Pixi

The @shell/pixi package provides a PixiJS renderer integration for the ECS world. It manages the PixiJS Application, synchronizes ECS components to PixiJS display objects, and provides a built-in camera system.

Setup

import { PixiPlugin } from '@shell/pixi';

world.addPlugin(PixiPlugin);

This registers serializable sprite/text intent, transient node references, the PixiApp, pixiAssets, and pixiNodes resources, and the Pixi render systems on Schedule.Render:

• PixiTransformGroupInit allocates a logical transform group.
• Sprite and text systems create and synchronize their concrete PixiJS nodes.
• Generic transform systems update every node in each group without checking node type.
• CameraSync applies the camera transform to the world container.
• PixiRenderLayerSync routes screen-space entities to the UI container above the world.
• Ticker manually drives the PixiJS ticker.

One entity can own multiple PixiJS nodes, such as both a sprite and text, without adding a physical parent container per entity.

By default, the plugin also spawns a camera entity at startup.

@shell/pixi consumes canonical transform components from @shell/transform but does not re-export them. Applications can use @shell/engine-2d for one aggregate import. Code that installs PixiPlugin directly should import transform APIs from @shell/transform and install TransformPlugin or HierarchyTransformPlugin separately.

---

Topics

• Pixi Plugin — Plugin configuration and options
• Components — Render intent, runtime nodes, and transform groups
• Resources — PixiApp and PixiAssets
• Systems — Sprite syncing and camera systems
• Prefabs — Built-in camera prefab