pixi-scene-core-concepts

This skill is the shared mental model referenced by all pixijs-scene-* leaves. It explains what the scene graph is in PixiJS v8, how a Container differs from a leaf, and where each concept lives. It does not go deep on any single API; it frames the pieces and points to the skill or reference file that does.

Quick Start

const world = new Container({ isRenderGroup: true });
app.stage.addChild(world);

const hero = new Container({ label: "hero" });
hero.addChild(new Sprite(bodyTexture));
hero.addChild(new Sprite(faceTexture));
world.addChild(hero);

const mask = new Graphics().rect(0, 0, 800, 600).fill(0xffffff);
world.mask = mask;
world.addChild(mask);

hero.position.set(world.width / 2, world.height / 2);

Related skills: pixijs-scene-container (Container API in detail), the leaf skills (pixijs-scene-sprite, pixijs-scene-graphics, pixijs-scene-text, pixijs-scene-mesh, pixijs-scene-particle-container, pixijs-scene-dom-container, pixijs-scene-gif), pixijs-events (hit testing traverses the scene graph), pixijs-performance (cache, culling, render groups), pixijs-math (Matrix, toGlobal/toLocal detail).

Core Concepts

What the scene graph is

The PixiJS scene graph is a tree of display objects rooted at app.stage. Each node has a parent, a transform (position, scale, rotation, pivot, skew) relative to its parent, and optional visual state (alpha, tint, blendMode, visibility). Each frame the renderer walks the tree, composes transforms and visual state down to world-space, culls what's offscreen, and emits draw calls. The scene graph is both the layout model and the render order: earlier siblings draw behind later siblings.

Every display object in v8 is a Container subclass. DisplayObject from earlier versions was removed.

Container vs leaf (CRITICAL)

There are two roles in the tree:

• Containers: nodes that hold children. Use a Container (or RenderLayer) for any node that groups, positions, or transforms other nodes.
• Leaves: nodes that draw something and have no children. Use Sprite, Graphics, Text, Mesh, ParticleContainer's Particle, DOMContainer, or GifSprite as leaves.