[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7CSW9ZFQMBNKFZD5TYTPTFT":3,"skill-same:01M7CSW9ZFQMBNKFZD5TYTPTFT":52},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":24,"commitSha":25,"skillDirectory":26,"forksCount":27,"repositoryHtmlUrl":28,"repositoryHomepageUrl":6,"ownerHtmlUrl":29,"ownerBlogUrl":6,"ownerDescription":30,"updatedAt":31,"install":32,"resources":45},"01M7CSW9ZFQMBNKFZD5TYTPTFT","pixijs-scene-core-concepts",null,"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\u002Fworld coordinates, culling, render groups, sortable children, masking, RenderLayer, constructor options shared by every scene node, and which leaf skill covers which display object. Triggers on: scene graph, display list, Container, Sprite, Graphics, Text, Mesh, ParticleContainer, DOMContainer, GifSprite, masking, render group, RenderLayer, world transform, constructor options, ContainerOptions.","om-scogo\u002Fskillsh-scraper","om-scogo","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F160466840?v=4","01M79AWB6DFVCQ7RK70CS34B96","Om Achrekar","01M79AWB6ZM9SKR8KDH1WSSM22",0,"MIT","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fpixijs-pixijs-skills\u002Fpixijs-scene-core-concepts\u002FSkill.md",[],[],"2026-11-15 14:19:17",false,"---\nname: pixijs-scene-core-concepts\ndescription: \"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\u002Fworld coordinates, culling, render groups, sortable children, masking, RenderLayer, constructor options shared by every scene node, and which leaf skill covers which display object. Triggers on: scene graph, display list, Container, Sprite, Graphics, Text, Mesh, ParticleContainer, DOMContainer, GifSprite, masking, render group, RenderLayer, world transform, constructor options, ContainerOptions.\"\nlicense: MIT\n---\n\nThis 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.\n\n## Quick Start\n\n```ts\nconst world = new Container({ isRenderGroup: true });\napp.stage.addChild(world);\n\nconst hero = new Container({ label: \"hero\" });\nhero.addChild(new Sprite(bodyTexture));\nhero.addChild(new Sprite(faceTexture));\nworld.addChild(hero);\n\nconst mask = new Graphics().rect(0, 0, 800, 600).fill(0xffffff);\nworld.mask = mask;\nworld.addChild(mask);\n\nhero.position.set(world.width \u002F 2, world.height \u002F 2);\n```\n\n**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\u002FtoLocal detail).\n\n## Core Concepts\n\n### What the scene graph is\n\nThe 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.\n\nEvery display object in v8 is a `Container` subclass. `DisplayObject` from earlier versions was removed.\n\n### Container vs leaf (CRITICAL)\n\nThere are two roles in the tree:\n\n- **Containers**: nodes that hold children. Use a `Container` (or `RenderLayer`) for any node that groups, positions, or transforms other nodes.\n- **Leaves**: nodes that draw something and have no children. Use `Sprite`, `Graphics`, `Text`, `Mesh`, `ParticleContainer`'s `Particle`, `DOMContainer`, or `GifSprite` as leaves.\n\nIn PixiJS v8, leaves must not have children. Adding children to a `Sprite` \u002F `Graphics` \u002F `Text` \u002F `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`.\n\nThis 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.\n\n### Transforms and coordinate spaces\n\nEvery 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`\u002F`toGlobal` live in `pixijs-scene-container`.\n\n### Render order and explicit z-ordering\n\nChildren 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\u002Fscene-management.md`.\n\n### Render groups\n\nFlagging 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\u002Fscene-management.md`.\n\n### Culling\n\n`cullable = true` + a `cullArea: Rectangle` tells the `CullerPlugin` (or any culling pass) to skip rendering objects that fall outside the visible area. `cullableChildren = false` short-circuits recursive culling for a sub-tree whose children are always on screen. Culling is a performance topic; `pixijs-performance` and `references\u002Fscene-management.md` cover the trade-offs.\n\n### Masking\n\nSet `container.mask` to another display object to clip its rendering. PixiJS picks the mask type automatically: a `Graphics` or `Container` mask uses a stencil buffer, a `Sprite` mask uses an alpha filter, and a number selects a `ColorMask`. All four mask types (AlphaMask, StencilMask, ScissorMask, ColorMask) are covered in `references\u002Fmasking.md`.\n\n### Visibility, alpha, tint, and blend mode\n\n`visible = false` skips rendering and transform updates; `renderable = false` skips rendering but still updates transforms (use when hit-testing or bounds queries need to stay live). `alpha` and `tint` multiply down through the sub-tree; `blendMode` controls how this container's draw instructions composite against what is already on the target. See `pixijs-blend-modes` for the full blend-mode list and `pixijs-scene-container` for per-node state.\n\n### Destroy semantics\n\n`container.destroy()` unlinks one node. `container.destroy({ children: true })` recursively destroys the whole sub-tree; always use this for killing a branch. `texture: true` and `textureSource: true` additionally tear down GPU resources owned by leaves. If `cacheAsTexture` is on, disable it before destroying. `pixijs-scene-container` documents the full signature.\n\n### Lifecycle events\n\nContainers emit events for hierarchy and visibility changes: `childAdded` \u002F `childRemoved` on the parent, `added` \u002F `removed` on the child, plus `visibleChanged` and `destroyed` on the container itself. Useful for wiring reactive UI updates or resource bookkeeping. Full details in `references\u002Fcontainer-hierarchy.md`.\n\n## Leaf comparison: which skill covers which object\n\n| Leaf                                                                 | Primary use                                                                                                                                                                 | Skill                             |\n| -------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |\n| `Sprite`                                                             | Draw a single texture at a position (with variants `NineSliceSprite` for resizable UI panels and `TilingSprite` for repeating backgrounds).                                 | `pixijs-scene-sprite`             |\n| `Text` \u002F `BitmapText` \u002F `HTMLText` \u002F `SplitText` \u002F `SplitBitmapText` | Render text. Canvas-based `Text` for general use, `BitmapText` for high-volume cheap text, `HTMLText` for rich HTML\u002FCSS layout, split variants for per-character animation. | `pixijs-scene-text`               |\n| `Graphics`                                                           | Vector drawing: shapes, lines, paths, fills, strokes. Backed by a `GraphicsContext`.                                                                                        | `pixijs-scene-graphics`           |\n| `Mesh` \u002F `MeshSimple` \u002F `MeshPlane` \u002F `MeshRope` \u002F `PerspectiveMesh` | Custom geometry with a shader or texture. Use `MeshRope` for textured path-following ribbons and `PerspectiveMesh` for 2D perspective.                                      | `pixijs-scene-mesh`               |\n| `ParticleContainer` + `Particle`                                     | Thousands of lightweight sprites with a restricted transform set, for high-throughput particle effects.                                                                     | `pixijs-scene-particle-container` |\n| `DOMContainer`                                                       | Render an HTML element positioned inside the scene graph (useful for inputs, iframes, accessibility overlays).                                                              | `pixijs-scene-dom-container`      |\n| `GifSprite`                                                          | Animated GIF playback as a display object. Requires `pixi.js\u002Fgif`.                                                                                                          | `pixijs-scene-gif`                |\n\n`Container` itself is covered in `pixijs-scene-container` and is the node every leaf lives inside.\n\n## When to use what (quick decisions)\n\n- \"I want to group and transform some display objects\" → `Container`, see `pixijs-scene-container`.\n- \"I want to draw a texture\" → `Sprite`, see `pixijs-scene-sprite`.\n- \"I want to draw vector shapes or paths\" → `Graphics`, see `pixijs-scene-graphics`.\n- \"I want to draw text\" → `Text` \u002F `BitmapText` \u002F `HTMLText`, see `pixijs-scene-text`.\n- \"I want thousands of cheap sprites\" → `ParticleContainer`, see `pixijs-scene-particle-container`.\n- \"I want a custom-geometry mesh or a deformed sprite\" → `Mesh` or one of its variants, see `pixijs-scene-mesh`.\n- \"I want to clip a sub-tree\" → set `.mask`, see `references\u002Fmasking.md`.\n- \"I want a decoupled render order\" → `RenderLayer`, see `references\u002Fscene-management.md`.\n- \"I want GPU-level transforms for a big stable sub-tree\" → `isRenderGroup: true`, see `references\u002Fscene-management.md`.\n- \"I want to skip offscreen rendering\" → `cullable = true` + `CullerPlugin`, see `pixijs-performance`.\n\n## References\n\n- [references\u002Fconstructor-options.md](references\u002Fconstructor-options.md): the ~30 fields inherited by every `Container`-derived node (transform, display, hierarchy, sorting, layout, effects, callbacks), with defaults, types, and when line-by-line assignment is appropriate. Shared reference for all leaf skills.\n- [references\u002Fcontainer-hierarchy.md](references\u002Fcontainer-hierarchy.md): add\u002Fremove\u002Fswap children, reparenting with transform preservation, label navigation, destroy sub-trees.\n- [references\u002Ftransforms.md](references\u002Ftransforms.md): position, scale, rotation, pivot, origin, skew, toGlobal\u002FtoLocal, the three matrices (local\u002Fgroup\u002Fworld), bounds.\n- [references\u002Fmasking.md](references\u002Fmasking.md): AlphaMask, StencilMask, ScissorMask, ColorMask, inverse masking, cost comparison.\n- [references\u002Flayers.md](references\u002Flayers.md): `RenderLayer`, attach\u002Fdetach, sorted layers, layer + logical parent split.\n- [references\u002Frender-groups.md](references\u002Frender-groups.md): `isRenderGroup`, GPU-level transforms, when to use, render-groups vs `cacheAsTexture`.\n- [references\u002Fscene-management.md](references\u002Fscene-management.md): combined view; render groups, `RenderLayer`, culling, zIndex sorting, `boundsArea`.\n\n## Common Mistakes\n\n### [CRITICAL] Adding children to a leaf display object\n\nWrong:\n\n```ts\nconst sprite = new Sprite(texture);\nsprite.addChild(new Graphics().rect(0, 0, 10, 10).fill(0xff0000));\n```\n\nCorrect:\n\n```ts\nconst group = new Container();\ngroup.addChild(new Sprite(texture));\ngroup.addChild(new Graphics().rect(0, 0, 10, 10).fill(0xff0000));\n```\n\nIn v8 leaves (`Sprite`, `Graphics`, `Text`, `Mesh`, `ParticleContainer`, `DOMContainer`, `GifSprite`) technically extend `Container` but should not hold children. Adding children to a leaf produces undefined rendering behavior. Wrap the leaf in a `Container` when you need grouping.\n\n### [CRITICAL] Referencing DisplayObject\n\nWrong:\n\n```ts\nimport { DisplayObject } from \"pixi.js\"; \u002F\u002F no such export in v8\nfunction moveNode(node: DisplayObject) {\n  node.x += 1;\n}\n```\n\nCorrect:\n\n```ts\nimport { Container } from \"pixi.js\";\nfunction moveNode(node: Container) {\n  node.x += 1;\n}\n```\n\n`DisplayObject` was removed in v8. Every display object — including `Sprite`, `Graphics`, `Text`, `Mesh` — is a `Container` subclass now. Use `Container` as the base type.\n\n### [HIGH] Forgetting isRenderGroup on large static subtrees\n\nWrong:\n\n```ts\nconst world = new Container();\nfor (let i = 0; i \u003C 5000; i++) {\n  world.addChild(new Sprite(texture));\n}\napp.stage.addChild(world);\n```\n\nCorrect:\n\n```ts\nconst world = new Container({ isRenderGroup: true });\nfor (let i = 0; i \u003C 5000; i++) {\n  world.addChild(new Sprite(texture));\n}\napp.stage.addChild(world);\n```\n\nWithout `isRenderGroup: true`, the renderer recomposes every child's transform against its parents every frame. Marking the subtree as a render group caches transforms and draw state until a child changes, which is essential for large or mostly-static trees.\n\n### [HIGH] Treating child.x as world space\n\nWrong:\n\n```ts\nconst enemy = new Container();\nenemy.x = 500;\nworld.addChild(enemy);\nworld.x = 200;\nconsole.log(enemy.x); \u002F\u002F 500 (local), not 700 (world)\n```\n\nCorrect:\n\n```ts\nconst worldPos = enemy.toGlobal({ x: 0, y: 0 });\nconsole.log(worldPos.x); \u002F\u002F 700\n```\n\n`Container.x\u002Fy\u002Fscale\u002Frotation` are LOCAL to the parent. Use `toGlobal(point)` to compute world-space coordinates, or `getGlobalPosition()` for the container's origin in world space. The world transform is not exposed as a simple `x\u002Fy` pair.\n\n### [MEDIUM] sortableChildren without zIndex\n\nWrong:\n\n```ts\nconst layer = new Container();\nlayer.sortableChildren = true;\nlayer.addChild(bg); \u002F\u002F no zIndex\nlayer.addChild(mid); \u002F\u002F no zIndex\nlayer.addChild(fg); \u002F\u002F no zIndex\n\u002F\u002F order is unchanged — all zIndex default to 0\n```\n\nCorrect:\n\n```ts\nconst layer = new Container();\nlayer.sortableChildren = true;\nbg.zIndex = 0;\nmid.zIndex = 10;\nfg.zIndex = 20;\nlayer.addChild(bg, mid, fg);\n```\n\n`sortableChildren` re-sorts children by `zIndex` before rendering, but only takes effect when children actually have distinct `zIndex` values. Setting only the parent flag has no visible effect.\n\n## Tooling\n\nThe [PixiJS Devtools Chrome extension](https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fpixijs-devtools\u002Faamddddknhcagpehecnhphigffljadon) lets you inspect and manipulate a running scene graph in real time. Install it for any non-trivial layout or render-order debugging.\n\n## API Reference\n\n- [Container](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.Container.html.md)\n- [ViewContainer](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.ViewContainer.html.md)\n- [RenderLayer](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.RenderLayer.html.md)\n- [RenderGroup](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Frendering.RenderGroup.html.md)\n- [Bounds](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Frendering.Bounds.html.md)\n- [Culler](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.Culler.html.md)\n- [CullerPlugin](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fapp.CullerPlugin.html.md)\n","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.\n\n## Quick Start\n\n```ts\nconst world = new Container({ isRenderGroup: true });\napp.stage.addChild(world);\n\nconst hero = new Container({ label: \"hero\" });\nhero.addChild(new Sprite(bodyTexture));\nhero.addChild(new Sprite(faceTexture));\nworld.addChild(hero);\n\nconst mask = new Graphics().rect(0, 0, 800, 600).fill(0xffffff);\nworld.mask = mask;\nworld.addChild(mask);\n\nhero.position.set(world.width \u002F 2, world.height \u002F 2);\n```\n\n**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\u002FtoLocal detail).\n\n## Core Concepts\n\n### What the scene graph is\n\nThe 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.\n\nEvery display object in v8 is a `Container` subclass. `DisplayObject` from earlier versions was removed.\n\n### Container vs leaf (CRITICAL)\n\nThere are two roles in the tree:\n\n- **Containers**: nodes that hold children. Use a `Container` (or `RenderLayer`) for any node that groups, positions, or transforms other nodes.\n- **Leaves**: nodes that draw something and have no children. Use `Sprite`, `Graphics`, `Text`, `Mesh`, `ParticleContainer`'s `Particle`, `DOMContainer`, or `GifSprite` as leaves.\n\nIn PixiJS v8, leaves must not have children. Adding children to a `Sprite` \u002F `Graphics` \u002F `Text` \u002F `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`.\n\nThis 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.\n\n### Transforms and coordinate spaces\n\nEvery 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`\u002F`toGlobal` live in `pixijs-scene-container`.\n\n### Render order and explicit z-ordering\n\nChildren 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\u002Fscene-management.md`.\n\n### Render groups\n\nFlagging 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\u002Fscene-management.md`.\n\n### Culling\n\n`cullable = true` + a `cullArea: Rectangle` tells the `CullerPlugin` (or any culling pass) to skip rendering objects that fall outside the visible area. `cullableChildren = false` short-circuits recursive culling for a sub-tree whose children are always on screen. Culling is a performance topic; `pixijs-performance` and `references\u002Fscene-management.md` cover the trade-offs.\n\n### Masking\n\nSet `container.mask` to another display object to clip its rendering. PixiJS picks the mask type automatically: a `Graphics` or `Container` mask uses a stencil buffer, a `Sprite` mask uses an alpha filter, and a number selects a `ColorMask`. All four mask types (AlphaMask, StencilMask, ScissorMask, ColorMask) are covered in `references\u002Fmasking.md`.\n\n### Visibility, alpha, tint, and blend mode\n\n`visible = false` skips rendering and transform updates; `renderable = false` skips rendering but still updates transforms (use when hit-testing or bounds queries need to stay live). `alpha` and `tint` multiply down through the sub-tree; `blendMode` controls how this container's draw instructions composite against what is already on the target. See `pixijs-blend-modes` for the full blend-mode list and `pixijs-scene-container` for per-node state.\n\n### Destroy semantics\n\n`container.destroy()` unlinks one node. `container.destroy({ children: true })` recursively destroys the whole sub-tree; always use this for killing a branch. `texture: true` and `textureSource: true` additionally tear down GPU resources owned by leaves. If `cacheAsTexture` is on, disable it before destroying. `pixijs-scene-container` documents the full signature.\n\n### Lifecycle events\n\nContainers emit events for hierarchy and visibility changes: `childAdded` \u002F `childRemoved` on the parent, `added` \u002F `removed` on the child, plus `visibleChanged` and `destroyed` on the container itself. Useful for wiring reactive UI updates or resource bookkeeping. Full details in `references\u002Fcontainer-hierarchy.md`.\n\n## Leaf comparison: which skill covers which object\n\n| Leaf                                                                 | Primary use                                                                                                                                                                 | Skill                             |\n| -------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |\n| `Sprite`                                                             | Draw a single texture at a position (with variants `NineSliceSprite` for resizable UI panels and `TilingSprite` for repeating backgrounds).                                 | `pixijs-scene-sprite`             |\n| `Text` \u002F `BitmapText` \u002F `HTMLText` \u002F `SplitText` \u002F `SplitBitmapText` | Render text. Canvas-based `Text` for general use, `BitmapText` for high-volume cheap text, `HTMLText` for rich HTML\u002FCSS layout, split variants for per-character animation. | `pixijs-scene-text`               |\n| `Graphics`                                                           | Vector drawing: shapes, lines, paths, fills, strokes. Backed by a `GraphicsContext`.                                                                                        | `pixijs-scene-graphics`           |\n| `Mesh` \u002F `MeshSimple` \u002F `MeshPlane` \u002F `MeshRope` \u002F `PerspectiveMesh` | Custom geometry with a shader or texture. Use `MeshRope` for textured path-following ribbons and `PerspectiveMesh` for 2D perspective.                                      | `pixijs-scene-mesh`               |\n| `ParticleContainer` + `Particle`                                     | Thousands of lightweight sprites with a restricted transform set, for high-throughput particle effects.                                                                     | `pixijs-scene-particle-container` |\n| `DOMContainer`                                                       | Render an HTML element positioned inside the scene graph (useful for inputs, iframes, accessibility overlays).                                                              | `pixijs-scene-dom-container`      |\n| `GifSprite`                                                          | Animated GIF playback as a display object. Requires `pixi.js\u002Fgif`.                                                                                                          | `pixijs-scene-gif`                |\n\n`Container` itself is covered in `pixijs-scene-container` and is the node every leaf lives inside.\n\n## When to use what (quick decisions)\n\n- \"I want to group and transform some display objects\" → `Container`, see `pixijs-scene-container`.\n- \"I want to draw a texture\" → `Sprite`, see `pixijs-scene-sprite`.\n- \"I want to draw vector shapes or paths\" → `Graphics`, see `pixijs-scene-graphics`.\n- \"I want to draw text\" → `Text` \u002F `BitmapText` \u002F `HTMLText`, see `pixijs-scene-text`.\n- \"I want thousands of cheap sprites\" → `ParticleContainer`, see `pixijs-scene-particle-container`.\n- \"I want a custom-geometry mesh or a deformed sprite\" → `Mesh` or one of its variants, see `pixijs-scene-mesh`.\n- \"I want to clip a sub-tree\" → set `.mask`, see `references\u002Fmasking.md`.\n- \"I want a decoupled render order\" → `RenderLayer`, see `references\u002Fscene-management.md`.\n- \"I want GPU-level transforms for a big stable sub-tree\" → `isRenderGroup: true`, see `references\u002Fscene-management.md`.\n- \"I want to skip offscreen rendering\" → `cullable = true` + `CullerPlugin`, see `pixijs-performance`.\n\n## References\n\n- [references\u002Fconstructor-options.md](references\u002Fconstructor-options.md): the ~30 fields inherited by every `Container`-derived node (transform, display, hierarchy, sorting, layout, effects, callbacks), with defaults, types, and when line-by-line assignment is appropriate. Shared reference for all leaf skills.\n- [references\u002Fcontainer-hierarchy.md](references\u002Fcontainer-hierarchy.md): add\u002Fremove\u002Fswap children, reparenting with transform preservation, label navigation, destroy sub-trees.\n- [references\u002Ftransforms.md](references\u002Ftransforms.md): position, scale, rotation, pivot, origin, skew, toGlobal\u002FtoLocal, the three matrices (local\u002Fgroup\u002Fworld), bounds.\n- [references\u002Fmasking.md](references\u002Fmasking.md): AlphaMask, StencilMask, ScissorMask, ColorMask, inverse masking, cost comparison.\n- [references\u002Flayers.md](references\u002Flayers.md): `RenderLayer`, attach\u002Fdetach, sorted layers, layer + logical parent split.\n- [references\u002Frender-groups.md](references\u002Frender-groups.md): `isRenderGroup`, GPU-level transforms, when to use, render-groups vs `cacheAsTexture`.\n- [references\u002Fscene-management.md](references\u002Fscene-management.md): combined view; render groups, `RenderLayer`, culling, zIndex sorting, `boundsArea`.\n\n## Common Mistakes\n\n### [CRITICAL] Adding children to a leaf display object\n\nWrong:\n\n```ts\nconst sprite = new Sprite(texture);\nsprite.addChild(new Graphics().rect(0, 0, 10, 10).fill(0xff0000));\n```\n\nCorrect:\n\n```ts\nconst group = new Container();\ngroup.addChild(new Sprite(texture));\ngroup.addChild(new Graphics().rect(0, 0, 10, 10).fill(0xff0000));\n```\n\nIn v8 leaves (`Sprite`, `Graphics`, `Text`, `Mesh`, `ParticleContainer`, `DOMContainer`, `GifSprite`) technically extend `Container` but should not hold children. Adding children to a leaf produces undefined rendering behavior. Wrap the leaf in a `Container` when you need grouping.\n\n### [CRITICAL] Referencing DisplayObject\n\nWrong:\n\n```ts\nimport { DisplayObject } from \"pixi.js\"; \u002F\u002F no such export in v8\nfunction moveNode(node: DisplayObject) {\n  node.x += 1;\n}\n```\n\nCorrect:\n\n```ts\nimport { Container } from \"pixi.js\";\nfunction moveNode(node: Container) {\n  node.x += 1;\n}\n```\n\n`DisplayObject` was removed in v8. Every display object — including `Sprite`, `Graphics`, `Text`, `Mesh` — is a `Container` subclass now. Use `Container` as the base type.\n\n### [HIGH] Forgetting isRenderGroup on large static subtrees\n\nWrong:\n\n```ts\nconst world = new Container();\nfor (let i = 0; i \u003C 5000; i++) {\n  world.addChild(new Sprite(texture));\n}\napp.stage.addChild(world);\n```\n\nCorrect:\n\n```ts\nconst world = new Container({ isRenderGroup: true });\nfor (let i = 0; i \u003C 5000; i++) {\n  world.addChild(new Sprite(texture));\n}\napp.stage.addChild(world);\n```\n\nWithout `isRenderGroup: true`, the renderer recomposes every child's transform against its parents every frame. Marking the subtree as a render group caches transforms and draw state until a child changes, which is essential for large or mostly-static trees.\n\n### [HIGH] Treating child.x as world space\n\nWrong:\n\n```ts\nconst enemy = new Container();\nenemy.x = 500;\nworld.addChild(enemy);\nworld.x = 200;\nconsole.log(enemy.x); \u002F\u002F 500 (local), not 700 (world)\n```\n\nCorrect:\n\n```ts\nconst worldPos = enemy.toGlobal({ x: 0, y: 0 });\nconsole.log(worldPos.x); \u002F\u002F 700\n```\n\n`Container.x\u002Fy\u002Fscale\u002Frotation` are LOCAL to the parent. Use `toGlobal(point)` to compute world-space coordinates, or `getGlobalPosition()` for the container's origin in world space. The world transform is not exposed as a simple `x\u002Fy` pair.\n\n### [MEDIUM] sortableChildren without zIndex\n\nWrong:\n\n```ts\nconst layer = new Container();\nlayer.sortableChildren = true;\nlayer.addChild(bg); \u002F\u002F no zIndex\nlayer.addChild(mid); \u002F\u002F no zIndex\nlayer.addChild(fg); \u002F\u002F no zIndex\n\u002F\u002F order is unchanged — all zIndex default to 0\n```\n\nCorrect:\n\n```ts\nconst layer = new Container();\nlayer.sortableChildren = true;\nbg.zIndex = 0;\nmid.zIndex = 10;\nfg.zIndex = 20;\nlayer.addChild(bg, mid, fg);\n```\n\n`sortableChildren` re-sorts children by `zIndex` before rendering, but only takes effect when children actually have distinct `zIndex` values. Setting only the parent flag has no visible effect.\n\n## Tooling\n\nThe [PixiJS Devtools Chrome extension](https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fpixijs-devtools\u002Faamddddknhcagpehecnhphigffljadon) lets you inspect and manipulate a running scene graph in real time. Install it for any non-trivial layout or render-order debugging.\n\n## API Reference\n\n- [Container](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.Container.html.md)\n- [ViewContainer](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.ViewContainer.html.md)\n- [RenderLayer](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.RenderLayer.html.md)\n- [RenderGroup](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Frendering.RenderGroup.html.md)\n- [Bounds](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Frendering.Bounds.html.md)\n- [Culler](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.Culler.html.md)\n- [CullerPlugin](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fapp.CullerPlugin.html.md)\n",{"name":5,"license":15,"description":7},"main","8859218955d9504cd18b59e7892100718039d3b4","data\u002Fskills\u002Fpixijs-pixijs-skills\u002Fpixijs-scene-core-concepts",1,"https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper","https:\u002F\u002Fgithub.com\u002Fom-scogo","SDE-1 @ Scogo ","2026-07-18 12:22:46",{"source":8,"skillName":5,"commands":33,"prompt":43,"zipAvailable":44},[34,37,40],{"tool":35,"command":36},"npx","npx skills add om-scogo\u002Fskillsh-scraper --skill pixijs-scene-core-concepts",{"tool":38,"command":39},"bunx","bunx skills add om-scogo\u002Fskillsh-scraper --skill pixijs-scene-core-concepts",{"tool":41,"command":42},"pnpm","pnpm dlx skills add om-scogo\u002Fskillsh-scraper --skill pixijs-scene-core-concepts","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fpixijs-pixijs-skills\u002Fpixijs-scene-core-concepts\u002FSkill.md",true,[46],{"path":47,"resourceType":48,"resourceTypeDesc":49,"sizeBytes":50,"sourceHtmlUrl":51},"metadata.json","REFERENCE","参考文档",489,"https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fpixijs-pixijs-skills\u002Fpixijs-scene-core-concepts\u002Fmetadata.json",[53,60,65,72,77,84],{"skillNo":54,"name":55,"nameZh":6,"description":56,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":57,"categories":58,"keywords":59,"publishedAt":19},"01M7D6MC9FAAEV4CMNYX8W7JTG","arxiv-search","Search arXiv physics, math, and computer science preprints using natural language queries. Powered by Valyu semantic search.","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fyorkeccak-scientific-skills\u002Farxiv-search\u002Fskills\u002Farxiv-search\u002FSKILL.md",[],[],{"skillNo":61,"name":55,"nameZh":6,"description":56,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":62,"categories":63,"keywords":64,"publishedAt":19},"01M7D6M85CKKN87TA98VCQV4H7","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fyorkeccak-scientific-skills\u002Farxiv-search\u002FSkill.md",[],[],{"skillNo":66,"name":67,"nameZh":6,"description":68,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":71,"publishedAt":19},"01M7D4ZTCS4DR3CE4JY06X84T2","working-with-legacy-code","Safely change and test untested codebases using Feathers' \"Working Effectively with Legacy Code\". Use when the user mentions \"legacy code\", \"no tests\", \"untested codebase\", \"how do I test this\", \"seams\", \"characterization tests\", \"golden master\", \"sprout method\", \"afraid to change this code\", \"monster method\", \"dependency breaking\", or \"inherited a messy codebase\". Also trigger when changing code without tests safely, getting a class under test when constructors, statics, or singletons block it, adding features to tangled modules, or planning incremental test coverage for an old codebase. Covers the legacy-code change algorithm, seams, characterization tests, sprout\u002Fwrap, and dependency-breaking techniques. For refactoring code that already has tests, see refactoring-patterns. For day-to-day code quality, see clean-code.","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fwondelai-skills\u002Fworking-with-legacy-code\u002Fworking-with-legacy-code\u002FSKILL.md",[],[],{"skillNo":73,"name":67,"nameZh":6,"description":68,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":74,"categories":75,"keywords":76,"publishedAt":19},"01M7D4ZHZKJD2RSNGAF63V14P4","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fwondelai-skills\u002Fworking-with-legacy-code\u002FSkill.md",[],[],{"skillNo":78,"name":79,"nameZh":6,"description":80,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":81,"categories":82,"keywords":83,"publishedAt":19},"01M7D4ZB4CJBFW5JE67CPH2QRV","web-typography","Select, pair, and implement typefaces for web projects. Use when the user mentions \"font pairing\", \"which typeface\", \"line height\", \"responsive typography\", \"web font loading\", \"type hierarchy\", \"variable fonts\", \"FOUT\u002FFOIT\", \"typographic scale\", or \"the text is hard to read\". Also trigger when choosing between system fonts and web fonts, optimizing font-loading performance, or designing readable long-form content. Covers readability evaluation, CSS implementation, and performance optimization. For overall UI design systems, see refactoring-ui. For dramatic typographic experiences, see top-design.","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fwondelai-skills\u002Fweb-typography\u002Fweb-typography\u002FSKILL.md",[],[],{"skillNo":85,"name":79,"nameZh":6,"description":80,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":88,"publishedAt":19},"01M7D4Z4MVYVY3NMJ18BNV6WNA","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fwondelai-skills\u002Fweb-typography\u002FSkill.md",[],[]]