Resources

@shell/pixi registers pixiApp, pixiAssets, and pixiNodes in the IoC container.

---

PixiApp

Manages the PixiJS Application instance and its world and UI rendering containers.

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

const pixi = resources.get('pixiApp');

Properties

Property	Type	Description
app	Readonly<Application>	The PixiJS Application instance.
worldContainer	Container	The root container for all world sprites.
uiContainer	Container	Screen-space container rendered above the world.
isReady	boolean	Whether the PixiJS application has finished initializing.

Methods

Method	Description
setOptions(config)	Merge PixiJS ApplicationOptions into the launch config.
load()	Initialize the PixiJS application. Called automatically by the lifecycle system.

Lifecycle

PixiApp registers itself with the ECS lifecycle system. load() is called automatically during world mount. You do not need to call it manually.

Canvas handling

If the consumer does not provide a canvas via ApplicationOptions, the plugin appends the auto-created <canvas> to a DOM element with id="pixi-container". If the element is not found, an assertion error is thrown.

World container

The worldContainer is a PixiJS Container with isRenderGroup: true for GPU-accelerated camera transforms. All world sprites are added as children to this container. The CameraSync system drives the container’s transform.

UI container

The uiContainer is a separate render group above worldContainer. It is not affected by CameraSync; entities assigned to PixiLayer.Ui therefore use screen coordinates.

Manual ticker

The built-in PixiJS ticker is stopped on initialization. The ECS Ticker system manually drives updates on Schedule.Render.

---

pixiAssets

The PixiJS Assets API used for asynchronous texture loading.

const assets = resources.get('pixiAssets');

Methods

Use get(source) to read an already cached texture and load(source) to load one asynchronously.

You typically do not call pixiAssets directly. SpriteSync automatically loads textures when a Texture component changes:

entity.$texture.source = 'assets/enemy.png'; // SpriteSync handles loading

But you can also preload assets manually:

const assets = resources.get('pixiAssets');
await assets.load('assets/hero.png');
await assets.load('assets/enemy.png');

PixiNodeRegistry

pixiNodes owns transient PixiJS objects. Each numeric logical-group slot stores a dense node array for transform synchronization and role-specific references such as sprite and text. A group can contain multiple nodes while keeping each render layer flat. The registry also owns synchronous detachment and destruction during component, entity, scene, and world teardown.