The scene graph in PixiJS is a hierarchical tree of display objects that defines what gets rendered, how, and in what order. Every visual element in your application is part of this scene graph.
All display objects inherit from the Container class, which provides core functionality for:
Containers
Leaf Nodes
Leaf nodes are renderable objects that should not have children. In v8, only containers should have children.
Attempting to add children to a leaf node will not result in a runtime error, however, you may run into unexpected rendering behavior. Therefore, If nesting is required, wrap leaf nodes in a Container.
Before v8 (invalid in v8):
const sprite = new Sprite();
sprite.addChild(anotherSprite); // ❌ Invalid in v8
v8 approach:
const group = new Container();
group.addChild(sprite);
group.addChild(anotherSprite); // ✅ Valid
Every display object supports these transform properties:
const object = new Sprite(texture);
// Position
object.x = 100;
object.y = 100;
object.position.set(100, 100);
// Scale
object.scale.set(2, 2);
// Rotation (in radians)
object.rotation = Math.PI / 4; // 45 degrees
object.angle = 45; // Also 45 degrees
// Skew
object.skew.set(0.5, 0.3);
// Origin point for transforms
object.pivot.set(32, 32);
const parent = new Container();
const child = new Sprite(texture);
// Add/remove children
parent.addChild(child);
parent.removeChild(child);
// Bulk operations
parent.addChild(spriteA, spriteB, spriteC);
parent.removeChildren();
// Check relationships
console.log(child.parent === parent); // true
console.log(parent.children.length); // Number of children
const object = new Sprite(texture);
// Visibility
object.visible = false;
// Transparency
object.alpha = 0.5;
// Tinting
object.tint = 0xff0000; // Red tint
object.tint = '#ff0000'; // Also red
// Blend modes
object.blendMode = 'add';
// Masking
const mask = new Graphics().circle(0, 0, 50).fill(0xffffff);
object.mask = mask;
// Filters
object.filters = [new BlurFilter(2), new ColorMatrixFilter()];
const sprite = new Sprite(texture);
// Get dimensions
const bounds = sprite.getBounds();
console.log(bounds.width, bounds.height);
// Local vs Global bounds
const localBounds = sprite.getLocalBounds();
const globalBounds = sprite.getBounds();
// Quick size access
sprite.width = 100;
sprite.height = 100;
const button = new Sprite(texture);
button.interactive = true;
// Event handling
button.on('pointerdown', (event) => {
console.log('Clicked!', event);
});
button.on('pointhover', (event) => {
button.alpha = 0.8;
});
// Hit testing
const hit = button.containsPoint({ x: 100, y: 100 });
const spinner = new Container();
// Run every frame
spinner.onRender = () => {
spinner.rotation += 0.1;
};
// Remove callback
spinner.onRender = null;
cacheAsBitmap for static complex contentremoveChild()destroy() to clean up resources