Use this skill when reasoning about the PixiJS v8 scene graph as a whole: how containers, leaves, transforms, and render order fit together. Covers leaf vs container distinction, local/world coordinates, culling, render groups, sortable children, masking, RenderLayer, constructor options shared by every scene node, and which leaf skill covers which display object. Triggers on: scene graph, display list, Container, Sprite, Graphics, Text, Mesh, ParticleContainer, DOMContainer, GifSprite, masking,
This skill is the shared mental model for the PixiJS v8 scene graph, referenced by every pixijs-scene-* leaf skill. The scene graph is a tree of display objects rooted at app.stage, where each node has a parent, a transform (position, scale, rotation, pivot, skew) relative to its parent, and optional visual state such as alpha, tint, blendMode, and visibility. Each frame the renderer walks the tree, composes transforms and visual state down to world space, culls offscreen content, and emits draw calls; earlier siblings draw behind later ones, so the tree is both the layout model and the render order. Every display object in v8 is a Container subclass, since the old DisplayObject base type was removed.
A central rule is the distinction between containers and leaves. Containers (Container or RenderLayer) hold children and are used for any node that groups, positions, or transforms others. Leaves draw something and must not have children; these are Sprite, Graphics, Text, Mesh, ParticleContainer's Particle, DOMContainer, and GifSprite. Adding children to a leaf logs a deprecation warning and is scheduled to become a hard error, so leaves that need grouping should be wrapped in a Container. The skill frames how transforms compose from localTransform into worldTransform (and groupTransform when a render group is in the chain), with toGlobal, toLocal, and getGlobalPosition for converting between spaces; full Matrix detail lives in pixijs-math.
It also surveys the cross-cutting concepts each have their own deeper reference: explicit z-ordering through sortableChildren plus zIndex versus RenderLayer for render order decoupled from hierarchy; render groups (isRenderGroup: true or enableRenderGroup()) that apply a subtree's transform on the GPU as one matrix; culling via cullable, cullArea, and cullableChildren; masking where the mask type (alpha, stencil, scissor, color) is chosen automatically from the mask object; visibility/alpha/tint/blendMode semantics including the difference between visible = false and renderable = false; destroy semantics including destroy({ children: true }) for whole branches; and lifecycle events like childAdded and visibleChanged. A leaf comparison table points each display object to its dedicated skill. Use this when reasoning about how containers, leaves, transforms, and render order fit together as a whole.
Containers (Container or RenderLayer) are nodes that hold children and are used to group, position, or transform other nodes. Leaves such as Sprite, Graphics, Text, and Mesh draw something and must not have children; wrap them in a Container to group them.
Children render in array order, so index 0 draws first (behind) and the last index draws last (in front). For explicit z-ordering set sortableChildren = true and assign zIndex values, or use RenderLayer when render order needs to be decoupled from the logical hierarchy.
Flagging a container with isRenderGroup: true (or calling enableRenderGroup()) tells PixiJS to apply that subtree's transform on the GPU as a single matrix instead of recomputing every descendant's world transform on the CPU each frame, which helps on large, stable sub-trees.
container.destroy() unlinks a single node, while container.destroy({ children: true }) recursively destroys the entire subtree; texture: true and textureSource: true additionally tear down GPU resources owned by leaves.
visible = false skips both rendering and transform updates, whereas renderable = false skips rendering but still updates transforms, which is useful when hit-testing or bounds queries need to stay live.
Quick Setup:
.claude/skills/Repository
pixijs/pixijs-skills