PixiJS Integration: Effects, Games and Editors

PixiJS draws: display objects, filters, blend modes and meshes stay on the Pixi side. The ai*js packages own data, state and lifecycle, deciding what each frame shows and when objects are created or recycled. Only aispritejs/pixi imports Pixi; every other package is renderer-agnostic.

Each package is covered from three angles:

In games: runtime game logic and performance.
In editors: tools, saving, debugging and tests.
PixiJS techniques: the Pixi display objects, filters and blend modes that pair with it.

Technique index

Technique	Effect	Packages
ColorMatrixFilter	Hit flash, desaturate on pause	aifsmjs, aieventjs
BlurFilter	Pause screen or depth of field	aifsmjs
DisplacementFilter	Water or heat haze, with the map sprite moved by a system	aiecsjs
ParticleContainer	Thousands of bullets	aipooljs, aiecsjs, aiquadtreejs
add / screen blend modes	Glow, lasers	aipooljs, aispritejs
MeshRope	Trails	aiecsjs (SoA history buffer), aipooljs
RenderTexture / `generateTexture`	Thumbnails, procedural frames	aibridgejs, aispritejs
BitmapText	Damage numbers, counters	aipooljs, aieventjs
Masks	Fog of war	aiquadtreejs, aiecsjs
TilingSprite	Parallax	aiecsjs, aifsmjs
Events and hit testing	Drag, marquee select	aibridgejs, aieventjs, aifsmjs, aiquadtreejs

aiecsjs

Archetype ECS: components live in TypedArray SoA columns, and systems write their results into Pixi each frame. See the aiecsjs guide.

In games

SoA columns feed Particle positions in a ParticleContainer directly, with no per-object sync.
aiecsjs/loop runs a fixed-step loop, so the simulation does not depend on the display refresh rate.
ChildOf records which hull a turret belongs to, and a system places the turret from the hull’s position.

In editors

Format 2 snapshots serve as save and undo files: toJSON writes JSON, serializeWorld writes binary, and createDeltaSerializer handles incremental changes.
Defining the same component key again with the same kind and field layout returns the existing component, which suits script reload; a different layout throws EcsError.
onAdd / onRemove observers create and remove scene nodes alongside entities.

PixiJS techniques

ParticleContainer: SoA columns drive large numbers of Particles.
DisplacementFilter: a system moves the map sprite each frame.
MeshRope: recent positions kept in an SoA history buffer become the rope’s points.

aispritejs

Input-driven sprite animation graph: game logic sets inputs, and the graph decides which frame plays. See the aispritejs guide.

In games

The controller turns player actions into number, boolean and trigger inputs.
from: "*" with a priority lets a hit or death interrupt whatever animation is playing.
Non-looping clips return to idle through onEnd.

In editors

aispritejs/schema exports the graph JSON Schema, so the editor or CI can validate graph JSON.
parseAtlas turns a PixiJS v8 style atlas plus a control block into a graph; loadAtlas builds the animator directly.
Listeners are run-to-completion: when scrubbing a timeline, read activeState after the outermost update() returns and the readout never shows an intermediate state.

PixiJS techniques

createPixiSpriteAnimator swaps sprite.texture on every update().
The adapter owns only the texture and anchor, so tint and blend mode on the same sprite stay free.
Procedural frames can be baked to a RenderTexture with generateTexture, then handed to the adapter as a frameKey → Texture map.

aiaudiojs

Thin wrapper over Howler.js that manages loading, playback, crossfades and disposal. See the aiaudiojs guide.

In games

Switch level BGMs with a crossfade using curve: "equal-power".
Call unlock() in the first Pixi pointerup handler, so the AudioContext resumes inside a user gesture.
An AbortSignal cancels a running crossfade on scene exit; the abort stops no voice, so the caller handles both sounds afterwards.

In editors

disposeAll() on project switch also rejects in-flight load() calls with AudioDisposedError.
Timeline preview auditions sounds with play() and stop().

PixiJS techniques

Match the fade duration to a BlurFilter or ColorMatrixFilter tween; crossfade takes its duration in seconds, fade() takes milliseconds.

aiaudiojs has no audio sprites and no spatial audio; use Howler directly for those.

aieventjs

Typed event emitter for notifications between modules. See the aieventjs guide.

In games

throttleMs on pointer-move aiming: leading-edge throttling that drops events inside the window.
once for cutscene triggers that fire a single time.
captureErrors so one throwing listener cannot break the frame’s dispatch.

In editors

An event inspector subscribes to * with a sampleRate, so it sees only a sample of the traffic.
Aborting a tool’s signal removes all of that tool’s listeners at once.

PixiJS techniques

Relay FederatedPointerEvents as your own typed events through emit, copying only the fields you need, because Pixi reuses its event objects.
A BitmapText HUD subscribes to score events and updates its text.

aifsmjs

Deterministic FSM: machine definitions are plain data, and guards, actions and effects are injected at runtime. See the aifsmjs guide.

In games

Player and weapon each run as a sub-machine.
after() from aifsmjs/timer schedules the end of the invulnerability frames.
The pure step() runs no effects, so the same event sequence replays deterministically; it reproduces the parent machine only, not sub-machine state.

In editors

The recorder and persist middleware from aifsmjs/inspect feed a state panel.
aifsmjs/replay reproduces a bug report from its event log.
aifsmjs/pbt runs fast-check property tests in CI.

PixiJS techniques

A ColorMatrixFilter flash on entering hit.
A BlurFilter on the game layer on entering paused.
A scene FSM swaps TilingSprite background layers.

aiquadtreejs

2D quadtree rebuilt every frame; it does the broadphase only, and the caller does the exact checks. See the aiquadtreejs guide.

In games

Bullet broadphase: clear() and insert() again every frame.
bounds and query regions accept Pixi getBounds() results directly; both exclude the AABB’s right and bottom edges.
retrieve over an enemy’s vision region returns the targets it might see.

In editors

Marquee selection and hover picking over thousands of nodes: retrieve the candidates, then check them exactly.

PixiJS techniques

Fog-of-war masks: query the objects inside the visible region.
Hit testing: narrow the candidates with the quadtree before exact checks.

aipooljs

Fixed-size object pool with O(1) acquire() and release(). See the aipooljs guide.

In games

Bullets and particles come from the pool and go back after use.
onOverflow: 'null' makes acquire() return null under load, dropping that spawn.
borrow(fn, { signal }) for scoped effects: the object goes back when fn ends; an abort returns the object but does not stop the work inside fn.
The alive and available counters can go straight onto a debug overlay.

In editors

Preview nodes are pooled too.
Releasing a foreign or already released object throws PoolError, which catches tool bugs early.

PixiJS techniques

Particles, BitmapText damage-number pops and MeshRope segments all suit a pool.

aibridgejs

Transport-agnostic cross-context bridge; adapters handle the differences between hosts. See the aibridgejs guide.

In games

A game inside a WebView uses call to ask the host to save or handle a purchase, and emit to report progress.
timeoutMs makes an unresponsive host fail with BridgeTimeoutError instead of hanging.

In editors

Between the editor shell and the canvas iframe, use the iframe adapter with targetOrigin set to an exact origin, as the Sprite Playground does.
Tests switch to the mock adapter from aibridgejs/mock.
aibridgejs/detect picks an adapter from the host environment.

PixiJS techniques

Render a thumbnail to a RenderTexture, encode it as PNG and send it to the host over call.
The host sends an event when it resizes, and the game calls renderer.resize.

Recipes

Bullet hell

aipooljs + aiquadtreejs + aiecsjs + aieventjs. Firing takes a bullet from the pool and creates an entity; a movement system updates the SoA position columns and writes them into a ParticleContainer. Each frame the quadtree is rebuilt from those columns, retrieve returns candidates for the exact check, and a hit emits an event that the BitmapText HUD and the audio subscribe to. Bullets that leave the arena or hit something go back to the pool.

Character

aispritejs + aifsmjs + aiaudiojs. Player input goes to an aifsmjs machine that decides the behaviour state, such as idle, attack or hit. On each transition an effect turns the new state into aispritejs inputs and plays the matching sound through aiaudiojs; aispritejs then picks the frame from its graph.

Editor

aibridgejs + aifsmjs (aifsmjs/inspect) + aiecsjs (aiecsjs/serialize) + aispritejs (aispritejs/schema). The editor shell and the Pixi canvas iframe talk through aibridgejs. aifsmjs manages tool modes, and the recorder from aifsmjs/inspect keeps the log behind the state panel and bug reports. Scene data lives in an aiecsjs world, saved and undone through aiecsjs/serialize. Imported animation graphs are validated against aispritejs/schema first. The Sprite Playground implements the bridge between shell and iframe.

Live demos

Each of these five package guides includes an interactive PixiJS demo:

aiquadtreejsBroadphaseArena: bullet-hell collision broadphase

aipooljsBulletSpawner: a 256-bullet object pool

aifsmjsCharacterBrain: hit, invulnerability frames and state inspection

aispritejsHeroSprite: an animation state graph driven by the Pixi adapter

aiecsjsSwarmSimulation: a movement system over 2,000 entities