pixijs-scene-core-concepts
This skill equips you with foundational knowledge of PixiJS v8's scene graph model, covering how containers organize display objects and transforms propagate through the hierarchy. Learn the distinction between container nodes and leaf objects, and discover how the rendering pipeline traverses your scene structure to produce optimized 2D output.
PixiJS v8's scene graph is a hierarchical tree structure where containers organize display objects and transforms propagate through the hierarchy. The scene graph model lets you build complex layouts by nesting containers—each container can hold children, and transforms (position, rotation, scale) compose as you traverse from parent to child. PixiJS v8 renders by traversing this tree structure, applying accumulated transforms and culling invisible objects for performance.
AI-generated summary based on this skill's SKILL.md
Install
pixijs/pixijs-skills/pixijs-scene-core-concepts
git clone https://github.com/pixijs/pixijs-skills
cp -r pixijs-skills/skills/pixijs-scene-core-concepts ~/.claude/skills/pixijs-scene-core-conceptsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is the pixijs scene graph and how does it work?
PixiJS v8's scene graph is a hierarchical tree structure where containers organize display objects and transforms propagate through the hierarchy. The scene graph model lets you build complex layouts by nesting containers—each container can hold children, and transforms (position, rotation, scale) compose as you traverse from parent to child. PixiJS v8 renders by traversing this tree structure, applying accumulated transforms and culling invisible objects for performance.
How does pixi container work and when should I use it?
A PixiJS container is a display object that holds and organizes child display objects. Containers don't render visual content themselves—they exist purely to group, transform, and manage children. Use containers when you need to move, rotate, or scale multiple objects together, or to organize your scene logically. Containers support render groups and culling, making them essential for performance optimization in complex scenes.
What's the difference between pixi sprite vs container?
PixiJS sprites are leaf display objects that render actual visual content (textures), while containers are node objects that hold and organize children but render nothing themselves. Sprites cannot have children; containers can. Use sprites for visual elements like characters or UI icons, and containers to group and manage hierarchies of objects. This distinction is critical for understanding PixiJS v8's display object model.
How do render groups and culling optimize PixiJS rendering?
PixiJS v8's render groups batch display objects into efficient GPU draw calls, reducing overhead. Culling automatically skips rendering objects outside the visible viewport or marked invisible, saving processing time. Together, these features dramatically improve performance in scenes with many objects. Render layers let you control draw order and apply effects to groups, while culling ensures only visible content reaches the GPU.
How do local and world coordinates differ in PixiJS scenes?
PixiJS v8 distinguishes local coordinates (relative to an object's parent) from world coordinates (absolute scene position). Each display object has a transform matrix that converts local to world space. When you set a sprite's x/y, you're working in local coordinates. To find an object's absolute position, PixiJS composes transforms up the hierarchy. Coordinate conversion is essential for hit detection, camera systems, and complex scene layouts.
What are the best practices for managing PixiJS v8 scene hierarchies?
PixiJS v8 scene management best practices include: organize related objects into containers for logical grouping; use render groups to batch similar objects; enable culling for objects outside the viewport; leverage z-ordering through child order or sortableChildren; apply masking sparingly as it impacts performance; and keep transform hierarchies shallow when possible. Understanding the display list traversal order helps you predict render order and debug visual issues.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
```ts const world = new Container({ isRenderGroup: true }); app.stage.addChild(world);
const hero = new Container({ label: "hero" }); hero.addChild(new Sprite(bodyTexture)); hero.addChild(new
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 8 files
skills/pixijs-scene-core-concepts/SKILL.md
skills/pixijs-scene-core-concepts/references/constructor-options.md
skills/pixijs-scene-core-concepts/references/container-hierarchy.md
skills/pixijs-scene-core-concepts/references/layers.md
skills/pixijs-scene-core-concepts/references/masking.md
skills/pixijs-scene-core-concepts/references/render-groups.md
skills/pixijs-scene-core-concepts/references/scene-management.md
skills/pixijs-scene-core-concepts/references/transforms.md