pixijs-scene-core-concepts

Name: pixijs-scene-core-concepts
Author: pixijs

2.9kinstalls15forks

How to install pixijs-scene-core-concepts?

pixijs/pixijs-skills/pixijs-scene-core-concepts

$npx -y skills add pixijs/pixijs-skills --skill pixijs-scene-core-concepts

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	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.
2
3	## Quick Start
4
5	```ts
6	const world = new Container({ isRenderGroup: true });
7	app.stage.addChild(world);
8
9	const hero = new Container({ label: "hero" });
10	hero.addChild(new Sprite(bodyTexture));
11	hero.addChild(new Sprite(faceTexture));
12	world.addChild(hero);
13
14	const mask = new Graphics().rect(0, 0, 800, 600).fill(0xffffff);
15	world.mask = mask;
16	world.addChild(mask);
17
18	hero.position.set(world.width / 2, world.height / 2);
19	```
20
21	Related skills: `pixijs-scene-container` (Container API in detail), the leaf skills (`pixijs-scene-sprite`, `pixijs-scene-graphics`, `pixijs-scene-text`, `pixijs-scene-mesh`, `pixijs-scene-particle-container`, `pixijs-scene-dom-container`, `pixijs-scene-gif`), `pixijs-events` (hit testing traverses the scene graph), `pixijs-performance` (cache, culling, render groups), `pixijs-math` (Matrix, toGlobal/toLocal detail).
22
23	## Core Concepts
24
25	### What the scene graph is
26
27	The PixiJS scene graph is a tree of display objects rooted at `app.stage`. Each node has a parent, a transform (position, scale, rotation, pivot, skew) relative to its parent, and optional visual state (alpha, tint, blendMode, visibility). Each frame the renderer walks the tree, composes transforms and visual state down to world-space, culls what's offscreen, and emits draw calls. The scene graph is both the layout model and the render order: earlier siblings draw behind later siblings.
28
29	Every display object in v8 is a `Container` subclass. `DisplayObject` from earlier versions was removed.
30
31	### Container vs leaf (CRITICAL)
32
33	There are two roles in the tree:
34
35	- Containers: nodes that hold children. Use a `Container` (or `RenderLayer`) for any node that groups, positions, or transforms other nodes.
36	- Leaves: nodes that draw something and have no children. Use `Sprite`, `Graphics`, `Text`, `Mesh`, `ParticleContainer`'s `Particle`, `DOMContainer`, or `GifSprite` as leaves.
37
38	In PixiJS v8, leaves must not have children. Adding children to a `Sprite` / `Graphics` / `Text` / `Mesh` logs a deprecation warning and is scheduled to become a hard error. The rule is: use `Container` for any node that needs children; do not nest children inside leaf scene objects. If you need to group a leaf with other leaves, wrap them in a `Container`.
39
40	This distinction is why the `pixijs-scene-*` skills are split the way they are: `pixijs-scene-container` covers the grouping node, and each leaf gets its own skill focused on its draw behavior.
41
42	### Transforms and coordinate spaces
43
44	Every container composes a `localTransform` (a `Matrix`) from its `position`, `scale`, `rotation`, `pivot`, and `skew`. The renderer multiplies parents' local transforms together to produce the `worldTransform` (and `groupTransform` if a render group is in the chain), which maps local points to scene-root space. Use `toGlobal(point)` and `toLocal(point, from?)` to convert between spaces, and `getGlobalPosition()` for this object's world position. Full Matrix detail lives in `pixijs-math`; transform setters and `toLocal`/`toGlobal` live in `pixijs-scene-container`.
45
46	### Render order and explicit z-ordering
47
48	Children render in array order: index 0 first, last index last. For explicit z-ordering on a single container, set `sortableChildren = true` and assign `zIndex` values to children. For render order that is decoupled from the logical hierarchy (e.g., a character's parent is a game world but its drawing happens on a UI layer), use `RenderLayer`. Deep detail, including when to prefer sortable children vs RenderLayer, is in `references/scene-management.md`.
49
50	### Render groups
51
52	Flagging a container with `isRenderGroup: true` (or calling `container.enableRenderGroup()`) tells PixiJS to apply its transform on the GPU as a single matrix instead of recomputing every descendant's world transform on the CPU each frame. Use render groups on large, stable sub-trees such as worlds, UI layers, or parallax strips. Deep detail in `references/scene-management.md`.
53
54	### Culling
55
56	`cullable = true` + a `cullArea: Rectangle` tells the `Culler

People who liked this also viewed

6 picks

Type

pixijs-scene-core-concepts

2.9kinstalls15forks

View on GitHub

How to install pixijs-scene-core-concepts?

pixijs/pixijs-skills/pixijs-scene-core-concepts

$npx -y skills add pixijs/pixijs-skills --skill pixijs-scene-core-concepts

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	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.
2
3	## Quick Start
4
5	```ts
6	const world = new Container({ isRenderGroup: true });
7	app.stage.addChild(world);
8
9	const hero = new Container({ label: "hero" });
10	hero.addChild(new Sprite(bodyTexture));
11	hero.addChild(new Sprite(faceTexture));
12	world.addChild(hero);
13
14	const mask = new Graphics().rect(0, 0, 800, 600).fill(0xffffff);
15	world.mask = mask;
16	world.addChild(mask);
17
18	hero.position.set(world.width / 2, world.height / 2);
19	```
20
21	Related skills: `pixijs-scene-container` (Container API in detail), the leaf skills (`pixijs-scene-sprite`, `pixijs-scene-graphics`, `pixijs-scene-text`, `pixijs-scene-mesh`, `pixijs-scene-particle-container`, `pixijs-scene-dom-container`, `pixijs-scene-gif`), `pixijs-events` (hit testing traverses the scene graph), `pixijs-performance` (cache, culling, render groups), `pixijs-math` (Matrix, toGlobal/toLocal detail).
22
23	## Core Concepts
24
25	### What the scene graph is
26
27	The PixiJS scene graph is a tree of display objects rooted at `app.stage`. Each node has a parent, a transform (position, scale, rotation, pivot, skew) relative to its parent, and optional visual state (alpha, tint, blendMode, visibility). Each frame the renderer walks the tree, composes transforms and visual state down to world-space, culls what's offscreen, and emits draw calls. The scene graph is both the layout model and the render order: earlier siblings draw behind later siblings.
28
29	Every display object in v8 is a `Container` subclass. `DisplayObject` from earlier versions was removed.
30
31	### Container vs leaf (CRITICAL)
32
33	There are two roles in the tree:
34
35	- Containers: nodes that hold children. Use a `Container` (or `RenderLayer`) for any node that groups, positions, or transforms other nodes.
36	- Leaves: nodes that draw something and have no children. Use `Sprite`, `Graphics`, `Text`, `Mesh`, `ParticleContainer`'s `Particle`, `DOMContainer`, or `GifSprite` as leaves.
37
38	In PixiJS v8, leaves must not have children. Adding children to a `Sprite` / `Graphics` / `Text` / `Mesh` logs a deprecation warning and is scheduled to become a hard error. The rule is: use `Container` for any node that needs children; do not nest children inside leaf scene objects. If you need to group a leaf with other leaves, wrap them in a `Container`.
39
40	This distinction is why the `pixijs-scene-*` skills are split the way they are: `pixijs-scene-container` covers the grouping node, and each leaf gets its own skill focused on its draw behavior.
41
42	### Transforms and coordinate spaces
43
44	Every container composes a `localTransform` (a `Matrix`) from its `position`, `scale`, `rotation`, `pivot`, and `skew`. The renderer multiplies parents' local transforms together to produce the `worldTransform` (and `groupTransform` if a render group is in the chain), which maps local points to scene-root space. Use `toGlobal(point)` and `toLocal(point, from?)` to convert between spaces, and `getGlobalPosition()` for this object's world position. Full Matrix detail lives in `pixijs-math`; transform setters and `toLocal`/`toGlobal` live in `pixijs-scene-container`.
45
46	### Render order and explicit z-ordering
47
48	Children render in array order: index 0 first, last index last. For explicit z-ordering on a single container, set `sortableChildren = true` and assign `zIndex` values to children. For render order that is decoupled from the logical hierarchy (e.g., a character's parent is a game world but its drawing happens on a UI layer), use `RenderLayer`. Deep detail, including when to prefer sortable children vs RenderLayer, is in `references/scene-management.md`.
49
50	### Render groups
51
52	Flagging a container with `isRenderGroup: true` (or calling `container.enableRenderGroup()`) tells PixiJS to apply its transform on the GPU as a single matrix instead of recomputing every descendant's world transform on the CPU each frame. Use render groups on large, stable sub-trees such as worlds, UI layers, or parallax strips. Deep detail in `references/scene-management.md`.
53
54	### Culling
55
56	`cullable = true` + a `cullArea: Rectangle` tells the `Culler

People who liked this also viewed

6 picks

Type