Pixi Plugin

The PixiPlugin bootstraps the PixiJS Application and wires all Pixi-related systems into the ECS world.

---

Usage

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

world.addPlugin(PixiPlugin);

This is the simplest setup. It registers components, systems, resources, and spawns a default camera entity.

---

Options

PixiPlugin accepts all pixi.js ApplicationOptions plus one additional option:

interface PixiPluginOptions extends ApplicationOptions {
  spawnCamera?: boolean; // default: true
}

Option	Type	Default	Description
spawnCamera	boolean	true	Whether to spawn a camera at startup.

PixiJS options are passed through to PixiApp.setOptions():

world.addPlugin(PixiPlugin, {
  backgroundColor: 0x000000,
  antialias: true,
  spawnCamera: false,
});

---

What it registers

Components

• Sprite
• Text
• PixiTransformGroup
• PixiRenderLayer
• Tint
• Texture
• NineSlice
• Camera

Resources (IoC)

• pixiApp — PixiApp instance
• pixiAssets — PixiJS Assets
• pixiNodes — PixiNodeRegistry with logical groups and role-owned nodes

Systems

System	Schedule	Ordering
CameraSync	Schedule.Render	Before node synchronization
PixiTransformGroupInit	Schedule.Render	Before concrete node creation
Sprite and text sync	Schedule.Render	Before generic transform sync
PixiRenderLayerSync	Schedule.Render	Routes nodes to world or UI
Transform and pivot sync	Schedule.Render	After concrete node creation
Ticker	Schedule.Render	After all synchronization

Startup

If spawnCamera is true (the default), a CameraPrefab entity is spawned during startup.

---

DOM integration

PixiJS creates a <canvas> element. 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":

<div id="pixi-container"></div>

If no container is found, the plugin throws an assertion error.

---

Manual control

If you want full control over the camera or other setup, pass spawnCamera: false and spawn your own camera entity:

import { Define } from '@shell/ecs';
import { Camera, PixiPlugin } from '@shell/pixi';
import { Position, Rotation } from '@shell/transform';

world.addPlugin(PixiPlugin, { spawnCamera: false });

commands.spawn(
  Define.prefab()
    .with(Position, { x: 0, y: 0 })
    .with(Camera, { zoom: 1 })
    .with(Rotation, { x: 0, y: 0, z: 0 }),
);