pixi-scene-container

Container is the general-purpose node of the PixiJS v8 scene graph. It holds children and applies transforms, alpha, tint, and blend mode to its whole subtree. Every display object you make will either be a Container you're building a branch on, or a leaf (Sprite, Graphics, Text, Mesh) that you nest inside one.

Assumes familiarity with pixijs-scene-core-concepts.

Quick Start

const group = new Container({
  label: "hero-group",
  x: 200,
  y: 150,
  sortableChildren: true,
});

const body = new Sprite(await Assets.load("body.png"));
const head = new Sprite(await Assets.load("head.png"));
head.position.set(0, -40);
head.zIndex = 1;

group.addChild(body, head);
group.pivot.set(group.width / 2, group.height / 2);
group.scale.set(1.5);

app.stage.addChild(group);

Related skills: pixijs-scene-core-concepts (scene graph mental model, masking, layers, render groups), pixijs-scene-sprite / pixijs-scene-graphics / pixijs-scene-text / pixijs-scene-mesh (leaf objects that go inside containers), pixijs-events (eventMode, hit testing), pixijs-math (Matrix, toGlobal/toLocal detail), pixijs-performance (cacheAsTexture, culling, render groups).

Core Patterns

Constructor options

const container = new Container({
  label: "world",
  x: 100,
  y: 50,
  scale: 2,
  rotation: Math.PI / 4,
  alpha: 0.8,
  visible: true,
  tint: 0xffaa00,
  blendMode: "add",
  sortableChildren: true,
  isRenderGroup: true,
  origin: { x: 0, y: 0 },
  boundsArea: new Rectangle(0, 0, 1920, 1080),
});

All Container options (position, scale, tint, label, filters, zIndex, etc.) are also valid here — see skills/pixijs-scene-core-concepts/references/constructor-options.md.

The Container constructor uses assignWithIgnore to bulk-copy every field in the options object onto the instance except children, parent, and effects. Any public property of Container is a valid constructor option: cullable, cullArea, mask, filterArea, eventMode, hitArea, and so on. The options block above groups the most common ones; see the shared reference above for the full list.