pixijs-scene-container

Name: pixijs-scene-container
Author: pixijs

3.0kinstalls15forks

How to install pixijs-scene-container?

pixijs/pixijs-skills/pixijs-scene-container

$npx -y skills add pixijs/pixijs-skills --skill pixijs-scene-container

Installs into the current project.

Summary

Use this skill when grouping, positioning, or transforming display objects in PixiJS v8. Covers Container constructor options (isRenderGroup, sortableChildren, boundsArea), addChild/removeChild/addChildAt/swapChildren/setChildIndex, position/scale/rotation/pivot/skew/alpha/tint,

Files · 1

View on GitHub

SKILL.md

1	`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.
2
3	Assumes familiarity with `pixijs-scene-core-concepts`.
4
5	## Quick Start
6
7	```ts
8	const group = new Container({
9	label: "hero-group",
10	x: 200,
11	y: 150,
12	sortableChildren: true,
13	});
14
15	const body = new Sprite(await Assets.load("body.png"));
16	const head = new Sprite(await Assets.load("head.png"));
17	head.position.set(0, -40);
18	head.zIndex = 1;
19
20	group.addChild(body, head);
21	group.pivot.set(group.width / 2, group.height / 2);
22	group.scale.set(1.5);
23
24	app.stage.addChild(group);
25	```
26
27	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).
28
29	## Core Patterns
30
31	### Constructor options
32
33	```ts
34	const container = new Container({
35	label: "world",
36	x: 100,
37	y: 50,
38	scale: 2,
39	rotation: Math.PI / 4,
40	alpha: 0.8,
41	visible: true,
42	tint: 0xffaa00,
43	blendMode: "add",
44	sortableChildren: true,
45	isRenderGroup: true,
46	origin: { x: 0, y: 0 },
47	boundsArea: new Rectangle(0, 0, 1920, 1080),
48	});
49	```
50
51	All `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) are also valid here — see `skills/pixijs-scene-core-concepts/references/constructor-options.md`.
52
53	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.
54
55	`isRenderGroup: true` promotes the container to its own render group so its transforms are applied on the GPU rather than recomputed per-child on the CPU. Use it on stable sub-trees (large static worlds, UI layers). Don't overuse; most scenes don't need explicit render groups and too many hurts performance. Profile before promoting. See `pixijs-scene-core-concepts/references/scene-management.md`.
56
57	`sortableChildren: true` causes children to be re-sorted by `zIndex` at the next render. See `zIndex` below.
58
59	`origin` is a first-class v8 transform helper: an `ObservablePoint` that acts as a rotation/scale center without moving the container. Where `pivot` shifts the projection of the local origin in parent space (so changing it displaces the object), `origin` leaves position alone and simply rotates/scales around the specified local point. Accepts `PointData`, a single number (applied to both axes), or can be set live via `container.origin.set(x, y)`. Setting both `pivot` and `origin` on the same container produces compounding behavior and is discouraged; pick one.
60
61	`boundsArea` forces `getBounds()` to return a fixed rectangle instead of recursively measuring children; it is a performance win for containers with hundreds of cheap, predictable children.
62
63	`cullable` and `cullArea` are valid constructor options (the `assignWithIgnore` pass copies them like any other field), but they are documented in `pixijs-performance` because culling setup is a performance concern rather than a scene-graph concern.
64
65	### Leaves vs containers
66
67	```ts
68	const parent = new Container();
69	const sprite = new Sprite(texture);
70
71	parent.addChild(sprite);
72	```
73
74	Only `Container` (and subclasses intended to hold children, like `RenderLayer`) should have children. `Sprite`, `Graphics`, `Text`, `Mesh`, `ParticleContainer` particles, and `DOMContainer` content are leaves by convention in PixiJS v8. Wrap them in a `Container` whenever you need to group things: give the container the layout logic and keep the leaves pure visual data. Adding children to a leaf logs a deprecation warning and is scheduled to become a hard error.
75
76	### Adding and removing children
77
78	```ts

People who liked this also viewed

6 picks

Type

pixijs-scene-container

3.0kinstalls15forks

View on GitHub

How to install pixijs-scene-container?

pixijs/pixijs-skills/pixijs-scene-container

$npx -y skills add pixijs/pixijs-skills --skill pixijs-scene-container

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	`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.
2
3	Assumes familiarity with `pixijs-scene-core-concepts`.
4
5	## Quick Start
6
7	```ts
8	const group = new Container({
9	label: "hero-group",
10	x: 200,
11	y: 150,
12	sortableChildren: true,
13	});
14
15	const body = new Sprite(await Assets.load("body.png"));
16	const head = new Sprite(await Assets.load("head.png"));
17	head.position.set(0, -40);
18	head.zIndex = 1;
19
20	group.addChild(body, head);
21	group.pivot.set(group.width / 2, group.height / 2);
22	group.scale.set(1.5);
23
24	app.stage.addChild(group);
25	```
26
27	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).
28
29	## Core Patterns
30
31	### Constructor options
32
33	```ts
34	const container = new Container({
35	label: "world",
36	x: 100,
37	y: 50,
38	scale: 2,
39	rotation: Math.PI / 4,
40	alpha: 0.8,
41	visible: true,
42	tint: 0xffaa00,
43	blendMode: "add",
44	sortableChildren: true,
45	isRenderGroup: true,
46	origin: { x: 0, y: 0 },
47	boundsArea: new Rectangle(0, 0, 1920, 1080),
48	});
49	```
50
51	All `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) are also valid here — see `skills/pixijs-scene-core-concepts/references/constructor-options.md`.
52
53	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.
54
55	`isRenderGroup: true` promotes the container to its own render group so its transforms are applied on the GPU rather than recomputed per-child on the CPU. Use it on stable sub-trees (large static worlds, UI layers). Don't overuse; most scenes don't need explicit render groups and too many hurts performance. Profile before promoting. See `pixijs-scene-core-concepts/references/scene-management.md`.
56
57	`sortableChildren: true` causes children to be re-sorted by `zIndex` at the next render. See `zIndex` below.
58
59	`origin` is a first-class v8 transform helper: an `ObservablePoint` that acts as a rotation/scale center without moving the container. Where `pivot` shifts the projection of the local origin in parent space (so changing it displaces the object), `origin` leaves position alone and simply rotates/scales around the specified local point. Accepts `PointData`, a single number (applied to both axes), or can be set live via `container.origin.set(x, y)`. Setting both `pivot` and `origin` on the same container produces compounding behavior and is discouraged; pick one.
60
61	`boundsArea` forces `getBounds()` to return a fixed rectangle instead of recursively measuring children; it is a performance win for containers with hundreds of cheap, predictable children.
62
63	`cullable` and `cullArea` are valid constructor options (the `assignWithIgnore` pass copies them like any other field), but they are documented in `pixijs-performance` because culling setup is a performance concern rather than a scene-graph concern.
64
65	### Leaves vs containers
66
67	```ts
68	const parent = new Container();
69	const sprite = new Sprite(texture);
70
71	parent.addChild(sprite);
72	```
73
74	Only `Container` (and subclasses intended to hold children, like `RenderLayer`) should have children. `Sprite`, `Graphics`, `Text`, `Mesh`, `ParticleContainer` particles, and `DOMContainer` content are leaves by convention in PixiJS v8. Wrap them in a `Container` whenever you need to group things: give the container the layout logic and keep the leaves pure visual data. Adding children to a leaf logs a deprecation warning and is scheduled to become a hard error.
75
76	### Adding and removing children
77
78	```ts

People who liked this also viewed

6 picks

Type