pixijs-scene-core-concepts

PixiJS scene graph render order is determined by sibling array indices, with lower indices drawn first. Alternatively, enabling sortableChildren on a Container allows zIndex-based sorting to control the visual stacking of its children.

A Container in PixiJS v8 acts as a grouping node that can hold children, whereas a leaf node like a Sprite, Graphics, or Text is a draw-only object. Leaf nodes cannot accept children, so attempting to attach them causes hierarchy errors.

Convert coordinates in a PixiJS DisplayObject hierarchy by using the toGlobal and toLocal methods. These functions account for localTransform and worldTransform composition, ensuring accurate positioning and hit detection across nested nodes.

Use PixiJS render groups or RenderLayer when you need specific render batching or layer separation independent of the DisplayObject hierarchy. Setting isRenderGroup on a Container isolates its rendering, while RenderLayer separates visual ordering from structural nesting.

Masks or culling in PixiJS may fail if applied to incorrect node types or if worldTransform composition is misunderstood. Ensure masks target valid Containers or leaf nodes and verify that culling checks respect the current coordinate space.

Safely destroy PixiJS DisplayObject hierarchies by calling destroy on root Containers, which propagates destruction to children. Avoid attaching children to leaf nodes and remove references to prevent memory leaks during the destruction lifecycle.