[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7CSZ4CSZ52QXRGFRDNDFSB4":3,"skill-same:01M7CSZ4CSZ52QXRGFRDNDFSB4":46},{"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},"01M7CSZ4CSZ52QXRGFRDNDFSB4","pixijs-scene-particle-container",null,"Use this skill when rendering thousands of lightweight sprites in PixiJS v8. Covers ParticleContainer with Particle instances, addParticle\u002FremoveParticle, particleChildren array, dynamicProperties (vertex, position, rotation, uvs, color), boundsArea, roundPixels, update. Triggers on: ParticleContainer, Particle, IParticle, addParticle, particleChildren, dynamicProperties, boundsArea, particle effects, constructor options, ParticleContainerOptions, ParticleOptions.","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-particle-container\u002Fskills\u002Fpixijs-scene-particle-container\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: pixijs-scene-particle-container\ndescription: \"Use this skill when rendering thousands of lightweight sprites in PixiJS v8. Covers ParticleContainer with Particle instances, addParticle\u002FremoveParticle, particleChildren array, dynamicProperties (vertex, position, rotation, uvs, color), boundsArea, roundPixels, update. Triggers on: ParticleContainer, Particle, IParticle, addParticle, particleChildren, dynamicProperties, boundsArea, particle effects, constructor options, ParticleContainerOptions, ParticleOptions.\"\nlicense: MIT\n---\n\n`ParticleContainer` is a specialized container for rendering hundreds to tens of thousands of lightweight sprites in a single draw call. Use it for particle effects, bullet patterns, or any case where you need a large number of similar-looking objects with minimal per-object overhead. Particles share a single base texture and have a restricted transform set; they are not full `Container` children.\n\nAssumes familiarity with `pixijs-scene-core-concepts`. `ParticleContainer` is a special leaf in a different sense: it contains `Particle` instances in its own `particleChildren` array and rejects normal PixiJS children. Use `addParticle`, not `addChild`, and wrap the whole `ParticleContainer` in a `Container` if you need to group it with other scene objects.\n\nThe Particle API is new in v8 but is stable for production use.\n\n## Quick Start\n\n```ts\nconst texture = await Assets.load(\"particle.png\");\n\nconst container = new ParticleContainer({\n  texture,\n  boundsArea: new Rectangle(0, 0, app.screen.width, app.screen.height),\n  dynamicProperties: {\n    position: true,\n    rotation: false,\n    color: false,\n  },\n});\n\nfor (let i = 0; i \u003C 10000; i++) {\n  container.addParticle(\n    new Particle({\n      texture,\n      x: Math.random() * app.screen.width,\n      y: Math.random() * app.screen.height,\n    }),\n  );\n}\n\napp.stage.addChild(container);\n```\n\n**Related skills:** `pixijs-scene-core-concepts` (scene graph basics), `pixijs-scene-sprite` (when you need full features per object), `pixijs-assets` (shared textures, atlases), `pixijs-performance` (batching, texture optimization), `pixijs-scene-container` (wrap with other display objects).\n\n## Constructor options\n\n### ParticleContainerOptions\n\nAll `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) are also valid here — see `skills\u002Fpixijs-scene-core-concepts\u002Freferences\u002Fconstructor-options.md`. Note that `children` is omitted: use `particles` instead.\n\n| Option              | Type                 | Default                                                                        | Description                                                                                                                                                                     |\n| ------------------- | -------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `texture`           | `Texture`            | `null`                                                                         | Shared base texture for all particles. If omitted, the container falls back to the texture of the first particle added; every particle must share the same base texture source. |\n| `particles`         | `T[]`                | `[]`                                                                           | Initial array of `Particle` (or `IParticle`) instances. Equivalent to calling `addParticle` for each, but skips per-call view updates.                                          |\n| `dynamicProperties` | `ParticleProperties` | `{ vertex: false, position: true, rotation: false, uvs: false, color: false }` | Flags for which particle attributes re-upload to the GPU every frame. Only `position` is dynamic by default; mark what you animate, leave the rest static for speed.            |\n| `roundPixels`       | `boolean`            | `false`                                                                        | Rounds particle positions to the nearest pixel. Produces crisper rendering for pixel-art styles at the cost of smooth sub-pixel motion.                                         |\n| `shader`            | `Shader`             | default particle shader                                                        | Replaces the default particle shader. The custom shader must declare `aPosition`, `aUV`, `aColor`, plus any dynamic-only attributes enabled via `dynamicProperties`.            |\n\n`boundsArea` is inherited from `Container` but is effectively required on `ParticleContainer`: the container returns empty bounds `(0, 0, 0, 0)` by default for performance, so without `boundsArea` it is culled as invisible when culling is active and `containsPoint` always misses.\n\n### ParticleOptions\n\n`Particle` is a lightweight struct, not a `Container` subclass — none of the `ContainerOptions` fields apply. The full option list:\n\n| Option     | Type          | Default    | Description                                                                                                                            |\n| ---------- | ------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| `texture`  | `Texture`     | —          | Required. Texture used to render this particle. All particles in the same `ParticleContainer` must share the same base texture source. |\n| `x`        | `number`      | `0`        | X position in the container's local space.                                                                                             |\n| `y`        | `number`      | `0`        | Y position in the container's local space.                                                                                             |\n| `scaleX`   | `number`      | `1`        | Horizontal scale factor.                                                                                                               |\n| `scaleY`   | `number`      | `1`        | Vertical scale factor.                                                                                                                 |\n| `anchorX`  | `number`      | `0`        | Horizontal anchor in 0–1 range; `0` is left, `0.5` is center, `1` is right.                                                            |\n| `anchorY`  | `number`      | `0`        | Vertical anchor in 0–1 range; `0` is top, `0.5` is center, `1` is bottom.                                                              |\n| `rotation` | `number`      | `0`        | Rotation in radians.                                                                                                                   |\n| `tint`     | `ColorSource` | `0xffffff` | Tint color as hex number or CSS color string. Combined with `alpha` into the internal `color` field.                                   |\n| `alpha`    | `number`      | `1`        | Transparency (0–1). Values outside the range are clamped. Combined with `tint` into the internal `color` field.                        |\n\nThe constructor also accepts a bare `Texture` as its sole argument (`new Particle(texture)`), which is shorthand for `new Particle({ texture })` using the defaults above.\n\n`Particle.defaultOptions` is a static object you can reassign to change defaults globally; see the \"Particle creation\" section below.\n\n## Core Patterns\n\n### Particle creation\n\n```ts\nconst particle = new Particle({\n  texture,\n  x: 100,\n  y: 200,\n  scaleX: 0.5,\n  scaleY: 0.5,\n  anchorX: 0.5,\n  anchorY: 0.5,\n  rotation: Math.PI \u002F 4,\n  tint: 0xff0000,\n  alpha: 0.8,\n});\n\ncontainer.addParticle(particle);\n```\n\n`Particle` is a lightweight struct with flat numeric fields: `x`, `y`, `scaleX`, `scaleY`, `anchorX`, `anchorY`, `rotation`, `color`, `texture`. It also exposes `tint` (hex\u002FCSS color) and `alpha` (0-1) as setters that combine into the internal `color` field. No transform hierarchy, no events, no filters.\n\nYou can pass a `Texture` directly as the sole argument: `new Particle(texture)`.\n\nOverride `Particle.defaultOptions` to change defaults globally:\n\n```ts\nParticle.defaultOptions = {\n  ...Particle.defaultOptions,\n  anchorX: 0.5,\n  anchorY: 0.5,\n};\n```\n\n### Pre-populating with the particles option\n\n```ts\nconst particles = Array.from(\n  { length: 10000 },\n  () =>\n    new Particle({\n      texture,\n      x: Math.random() * 800,\n      y: Math.random() * 600,\n    }),\n);\n\nconst container = new ParticleContainer({\n  texture,\n  boundsArea: new Rectangle(0, 0, 800, 600),\n  particles,\n});\n```\n\nPassing `particles` in the constructor is equivalent to creating the container empty and calling `addParticle` for each one, but avoids per-call view updates.\n\n### Dynamic vs static properties and update()\n\n```ts\nconst container = new ParticleContainer({\n  dynamicProperties: {\n    rotation: true,\n  },\n});\n```\n\n`dynamicProperties` controls which particle attributes re-upload to the GPU every frame. The defaults on `ParticleContainer.defaultOptions.dynamicProperties` are:\n\n```ts\n{ vertex: false, position: true, rotation: false, uvs: false, color: false }\n```\n\nYou only need to override the properties you are animating; the rest inherit the defaults (position dynamic, everything else static). Five properties in total:\n\n- `vertex`: scale\u002Fanchor vertices\n- `position`\n- `rotation`\n- `uvs`: texture coordinates (for frame-swapped particles)\n- `color`: tint and alpha\n\nMark only what you animate; static properties are cheaper. If you change a static property at runtime, call `container.update()` to re-upload:\n\n```ts\ncontainer.particleChildren.forEach((p) => {\n  p.tint = 0x00ff00;\n});\ncontainer.update();\n```\n\n### Batch operations on particleChildren\n\n```ts\n\u002F\u002F Bulk add\nconst batch = [];\nfor (let i = 0; i \u003C 5000; i++) {\n  batch.push(\n    new Particle({ texture, x: Math.random() * 800, y: Math.random() * 600 }),\n  );\n}\ncontainer.particleChildren.push(...batch);\ncontainer.update();\n\n\u002F\u002F Bulk remove\ncontainer.particleChildren.length = 0;\ncontainer.update();\n```\n\n`addParticle`, `addParticleAt`, `removeParticle`, `removeParticleAt`, and `removeParticles` all trigger view updates per call. For large batch operations, direct array manipulation plus a single `update()` is faster.\n\n### Texture and shader options\n\n`texture` in `ParticleContainerOptions` is optional. If omitted, the container falls back to the texture of the first particle added; every subsequent particle must share the same base texture source. Set it explicitly when you want to declare the atlas up front, or when the first particle might change mid-run:\n\n```ts\nconst container = new ParticleContainer({ texture });\n```\n\n`shader` lets you replace the default particle shader with any `Shader` instance. The custom shader must declare the attributes the particle pipe uploads (`aPosition`, `aUV`, `aColor`, plus any dynamic-only attributes enabled via `dynamicProperties`). Use this for custom blending math, distance-field sprites, or non-standard effects:\n\n```ts\nconst container = new ParticleContainer({ texture, shader: myCustomShader });\n```\n\n### Limitations\n\n`ParticleContainer` intentionally sacrifices features for speed:\n\n- No filters, masks, or per-particle blend modes. Blend modes apply at the container level: set `blendMode` on the `ParticleContainer` or let it inherit from a parent `Container` (the default `\"inherit\"` resolves to the ancestor's blend mode, like `Sprite` and `Mesh`). The whole particle batch shares one blend mode.\n- No nested children on particles.\n- No automatic bounds calculation.\n- All particles must share the same base texture source (atlases work; multiple unrelated textures do not).\n- Custom shaders are supported via the `shader` option.\n\n### Container method migration\n\n`ParticleContainer` uses a separate child management API optimized for GPU buffer updates. The standard `Container` child methods throw when called on a `ParticleContainer`.\n\n| Standard Container method    | ParticleContainer equivalent                        |\n| ---------------------------- | --------------------------------------------------- |\n| `addChild(child)`            | `addParticle(particle)`                             |\n| `removeChild(child)`         | `removeParticle(particle)`                          |\n| `addChildAt(child, index)`   | `addParticleAt(particle, index)`                    |\n| `removeChildAt(index)`       | `removeParticleAt(index)`                           |\n| `removeChildren(begin, end)` | `removeParticles(begin, end)`                       |\n| `getChildAt(index)`          | Access `container.particleChildren[index]` directly |\n| `swapChildren()`             | Not available                                       |\n| `reparentChild()`            | Not available                                       |\n\n## Common Mistakes\n\n### [CRITICAL] Adding Sprites to ParticleContainer\n\nWrong:\n\n```ts\nconst container = new ParticleContainer();\nconst sprite = new Sprite(texture);\ncontainer.addChild(sprite);\n```\n\nCorrect:\n\n```ts\nconst container = new ParticleContainer();\nconst particle = new Particle(texture);\ncontainer.addParticle(particle);\n```\n\n`ParticleContainer` does not accept `Sprite` children. `addChild` throws an error. Particles must be `Particle` instances (or any object implementing `IParticle`), added via `addParticle`. This is a complete rework from v7, where `ParticleContainer` accepted `Sprite` children.\n\n\n### [HIGH] Not setting boundsArea on ParticleContainer\n\nWrong:\n\n```ts\nconst container = new ParticleContainer();\n\u002F\u002F bounds is always (0, 0, 0, 0) — culling and hit testing fail\n```\n\nCorrect:\n\n```ts\nconst container = new ParticleContainer({\n  boundsArea: new Rectangle(0, 0, 800, 600),\n});\n```\n\n`ParticleContainer` returns empty bounds `(0, 0, 0, 0)` by default for performance. Without `boundsArea`, the container is culled as invisible when culling is active, and `containsPoint` always misses. Set `boundsArea` to the region your particles occupy.\n\n\n### [HIGH] Using children instead of particleChildren\n\nWrong:\n\n```ts\ncontainer.addParticle(new Particle(texture));\nconsole.log(container.children.length); \u002F\u002F 0\n```\n\nCorrect:\n\n```ts\ncontainer.addParticle(new Particle(texture));\nconsole.log(container.particleChildren.length); \u002F\u002F 1\n```\n\nParticles are stored in the `particleChildren` array, not `children`. The standard `Container.children` array is empty on a `ParticleContainer`. All particle enumeration, counting, and manipulation must use `particleChildren` plus the `*Particle` methods.\n\n\n### [MEDIUM] Do not use ParticleContainer as a normal container\n\n`ParticleContainer` contains particles, not display objects. If you need to group a particle system with a background sprite or UI overlay, wrap the `ParticleContainer` itself inside a plain `Container`:\n\n```ts\nconst world = new Container();\nworld.addChild(backgroundSprite, particleContainer, uiLayer);\n```\n\n\n## API Reference\n\n- [ParticleContainer](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.ParticleContainer.html.md)\n- [ParticleContainerOptions](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.ParticleContainerOptions.html.md)\n- [Particle](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.Particle.html.md)\n- [ParticleOptions](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.ParticleOptions.html.md)\n- [IParticle](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.IParticle.html.md)\n- [ParticleProperties](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.ParticleProperties.html.md)\n","`ParticleContainer` is a specialized container for rendering hundreds to tens of thousands of lightweight sprites in a single draw call. Use it for particle effects, bullet patterns, or any case where you need a large number of similar-looking objects with minimal per-object overhead. Particles share a single base texture and have a restricted transform set; they are not full `Container` children.\n\nAssumes familiarity with `pixijs-scene-core-concepts`. `ParticleContainer` is a special leaf in a different sense: it contains `Particle` instances in its own `particleChildren` array and rejects normal PixiJS children. Use `addParticle`, not `addChild`, and wrap the whole `ParticleContainer` in a `Container` if you need to group it with other scene objects.\n\nThe Particle API is new in v8 but is stable for production use.\n\n## Quick Start\n\n```ts\nconst texture = await Assets.load(\"particle.png\");\n\nconst container = new ParticleContainer({\n  texture,\n  boundsArea: new Rectangle(0, 0, app.screen.width, app.screen.height),\n  dynamicProperties: {\n    position: true,\n    rotation: false,\n    color: false,\n  },\n});\n\nfor (let i = 0; i \u003C 10000; i++) {\n  container.addParticle(\n    new Particle({\n      texture,\n      x: Math.random() * app.screen.width,\n      y: Math.random() * app.screen.height,\n    }),\n  );\n}\n\napp.stage.addChild(container);\n```\n\n**Related skills:** `pixijs-scene-core-concepts` (scene graph basics), `pixijs-scene-sprite` (when you need full features per object), `pixijs-assets` (shared textures, atlases), `pixijs-performance` (batching, texture optimization), `pixijs-scene-container` (wrap with other display objects).\n\n## Constructor options\n\n### ParticleContainerOptions\n\nAll `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) are also valid here — see `skills\u002Fpixijs-scene-core-concepts\u002Freferences\u002Fconstructor-options.md`. Note that `children` is omitted: use `particles` instead.\n\n| Option              | Type                 | Default                                                                        | Description                                                                                                                                                                     |\n| ------------------- | -------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `texture`           | `Texture`            | `null`                                                                         | Shared base texture for all particles. If omitted, the container falls back to the texture of the first particle added; every particle must share the same base texture source. |\n| `particles`         | `T[]`                | `[]`                                                                           | Initial array of `Particle` (or `IParticle`) instances. Equivalent to calling `addParticle` for each, but skips per-call view updates.                                          |\n| `dynamicProperties` | `ParticleProperties` | `{ vertex: false, position: true, rotation: false, uvs: false, color: false }` | Flags for which particle attributes re-upload to the GPU every frame. Only `position` is dynamic by default; mark what you animate, leave the rest static for speed.            |\n| `roundPixels`       | `boolean`            | `false`                                                                        | Rounds particle positions to the nearest pixel. Produces crisper rendering for pixel-art styles at the cost of smooth sub-pixel motion.                                         |\n| `shader`            | `Shader`             | default particle shader                                                        | Replaces the default particle shader. The custom shader must declare `aPosition`, `aUV`, `aColor`, plus any dynamic-only attributes enabled via `dynamicProperties`.            |\n\n`boundsArea` is inherited from `Container` but is effectively required on `ParticleContainer`: the container returns empty bounds `(0, 0, 0, 0)` by default for performance, so without `boundsArea` it is culled as invisible when culling is active and `containsPoint` always misses.\n\n### ParticleOptions\n\n`Particle` is a lightweight struct, not a `Container` subclass — none of the `ContainerOptions` fields apply. The full option list:\n\n| Option     | Type          | Default    | Description                                                                                                                            |\n| ---------- | ------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| `texture`  | `Texture`     | —          | Required. Texture used to render this particle. All particles in the same `ParticleContainer` must share the same base texture source. |\n| `x`        | `number`      | `0`        | X position in the container's local space.                                                                                             |\n| `y`        | `number`      | `0`        | Y position in the container's local space.                                                                                             |\n| `scaleX`   | `number`      | `1`        | Horizontal scale factor.                                                                                                               |\n| `scaleY`   | `number`      | `1`        | Vertical scale factor.                                                                                                                 |\n| `anchorX`  | `number`      | `0`        | Horizontal anchor in 0–1 range; `0` is left, `0.5` is center, `1` is right.                                                            |\n| `anchorY`  | `number`      | `0`        | Vertical anchor in 0–1 range; `0` is top, `0.5` is center, `1` is bottom.                                                              |\n| `rotation` | `number`      | `0`        | Rotation in radians.                                                                                                                   |\n| `tint`     | `ColorSource` | `0xffffff` | Tint color as hex number or CSS color string. Combined with `alpha` into the internal `color` field.                                   |\n| `alpha`    | `number`      | `1`        | Transparency (0–1). Values outside the range are clamped. Combined with `tint` into the internal `color` field.                        |\n\nThe constructor also accepts a bare `Texture` as its sole argument (`new Particle(texture)`), which is shorthand for `new Particle({ texture })` using the defaults above.\n\n`Particle.defaultOptions` is a static object you can reassign to change defaults globally; see the \"Particle creation\" section below.\n\n## Core Patterns\n\n### Particle creation\n\n```ts\nconst particle = new Particle({\n  texture,\n  x: 100,\n  y: 200,\n  scaleX: 0.5,\n  scaleY: 0.5,\n  anchorX: 0.5,\n  anchorY: 0.5,\n  rotation: Math.PI \u002F 4,\n  tint: 0xff0000,\n  alpha: 0.8,\n});\n\ncontainer.addParticle(particle);\n```\n\n`Particle` is a lightweight struct with flat numeric fields: `x`, `y`, `scaleX`, `scaleY`, `anchorX`, `anchorY`, `rotation`, `color`, `texture`. It also exposes `tint` (hex\u002FCSS color) and `alpha` (0-1) as setters that combine into the internal `color` field. No transform hierarchy, no events, no filters.\n\nYou can pass a `Texture` directly as the sole argument: `new Particle(texture)`.\n\nOverride `Particle.defaultOptions` to change defaults globally:\n\n```ts\nParticle.defaultOptions = {\n  ...Particle.defaultOptions,\n  anchorX: 0.5,\n  anchorY: 0.5,\n};\n```\n\n### Pre-populating with the particles option\n\n```ts\nconst particles = Array.from(\n  { length: 10000 },\n  () =>\n    new Particle({\n      texture,\n      x: Math.random() * 800,\n      y: Math.random() * 600,\n    }),\n);\n\nconst container = new ParticleContainer({\n  texture,\n  boundsArea: new Rectangle(0, 0, 800, 600),\n  particles,\n});\n```\n\nPassing `particles` in the constructor is equivalent to creating the container empty and calling `addParticle` for each one, but avoids per-call view updates.\n\n### Dynamic vs static properties and update()\n\n```ts\nconst container = new ParticleContainer({\n  dynamicProperties: {\n    rotation: true,\n  },\n});\n```\n\n`dynamicProperties` controls which particle attributes re-upload to the GPU every frame. The defaults on `ParticleContainer.defaultOptions.dynamicProperties` are:\n\n```ts\n{ vertex: false, position: true, rotation: false, uvs: false, color: false }\n```\n\nYou only need to override the properties you are animating; the rest inherit the defaults (position dynamic, everything else static). Five properties in total:\n\n- `vertex`: scale\u002Fanchor vertices\n- `position`\n- `rotation`\n- `uvs`: texture coordinates (for frame-swapped particles)\n- `color`: tint and alpha\n\nMark only what you animate; static properties are cheaper. If you change a static property at runtime, call `container.update()` to re-upload:\n\n```ts\ncontainer.particleChildren.forEach((p) => {\n  p.tint = 0x00ff00;\n});\ncontainer.update();\n```\n\n### Batch operations on particleChildren\n\n```ts\n\u002F\u002F Bulk add\nconst batch = [];\nfor (let i = 0; i \u003C 5000; i++) {\n  batch.push(\n    new Particle({ texture, x: Math.random() * 800, y: Math.random() * 600 }),\n  );\n}\ncontainer.particleChildren.push(...batch);\ncontainer.update();\n\n\u002F\u002F Bulk remove\ncontainer.particleChildren.length = 0;\ncontainer.update();\n```\n\n`addParticle`, `addParticleAt`, `removeParticle`, `removeParticleAt`, and `removeParticles` all trigger view updates per call. For large batch operations, direct array manipulation plus a single `update()` is faster.\n\n### Texture and shader options\n\n`texture` in `ParticleContainerOptions` is optional. If omitted, the container falls back to the texture of the first particle added; every subsequent particle must share the same base texture source. Set it explicitly when you want to declare the atlas up front, or when the first particle might change mid-run:\n\n```ts\nconst container = new ParticleContainer({ texture });\n```\n\n`shader` lets you replace the default particle shader with any `Shader` instance. The custom shader must declare the attributes the particle pipe uploads (`aPosition`, `aUV`, `aColor`, plus any dynamic-only attributes enabled via `dynamicProperties`). Use this for custom blending math, distance-field sprites, or non-standard effects:\n\n```ts\nconst container = new ParticleContainer({ texture, shader: myCustomShader });\n```\n\n### Limitations\n\n`ParticleContainer` intentionally sacrifices features for speed:\n\n- No filters, masks, or per-particle blend modes. Blend modes apply at the container level: set `blendMode` on the `ParticleContainer` or let it inherit from a parent `Container` (the default `\"inherit\"` resolves to the ancestor's blend mode, like `Sprite` and `Mesh`). The whole particle batch shares one blend mode.\n- No nested children on particles.\n- No automatic bounds calculation.\n- All particles must share the same base texture source (atlases work; multiple unrelated textures do not).\n- Custom shaders are supported via the `shader` option.\n\n### Container method migration\n\n`ParticleContainer` uses a separate child management API optimized for GPU buffer updates. The standard `Container` child methods throw when called on a `ParticleContainer`.\n\n| Standard Container method    | ParticleContainer equivalent                        |\n| ---------------------------- | --------------------------------------------------- |\n| `addChild(child)`            | `addParticle(particle)`                             |\n| `removeChild(child)`         | `removeParticle(particle)`                          |\n| `addChildAt(child, index)`   | `addParticleAt(particle, index)`                    |\n| `removeChildAt(index)`       | `removeParticleAt(index)`                           |\n| `removeChildren(begin, end)` | `removeParticles(begin, end)`                       |\n| `getChildAt(index)`          | Access `container.particleChildren[index]` directly |\n| `swapChildren()`             | Not available                                       |\n| `reparentChild()`            | Not available                                       |\n\n## Common Mistakes\n\n### [CRITICAL] Adding Sprites to ParticleContainer\n\nWrong:\n\n```ts\nconst container = new ParticleContainer();\nconst sprite = new Sprite(texture);\ncontainer.addChild(sprite);\n```\n\nCorrect:\n\n```ts\nconst container = new ParticleContainer();\nconst particle = new Particle(texture);\ncontainer.addParticle(particle);\n```\n\n`ParticleContainer` does not accept `Sprite` children. `addChild` throws an error. Particles must be `Particle` instances (or any object implementing `IParticle`), added via `addParticle`. This is a complete rework from v7, where `ParticleContainer` accepted `Sprite` children.\n\n\n### [HIGH] Not setting boundsArea on ParticleContainer\n\nWrong:\n\n```ts\nconst container = new ParticleContainer();\n\u002F\u002F bounds is always (0, 0, 0, 0) — culling and hit testing fail\n```\n\nCorrect:\n\n```ts\nconst container = new ParticleContainer({\n  boundsArea: new Rectangle(0, 0, 800, 600),\n});\n```\n\n`ParticleContainer` returns empty bounds `(0, 0, 0, 0)` by default for performance. Without `boundsArea`, the container is culled as invisible when culling is active, and `containsPoint` always misses. Set `boundsArea` to the region your particles occupy.\n\n\n### [HIGH] Using children instead of particleChildren\n\nWrong:\n\n```ts\ncontainer.addParticle(new Particle(texture));\nconsole.log(container.children.length); \u002F\u002F 0\n```\n\nCorrect:\n\n```ts\ncontainer.addParticle(new Particle(texture));\nconsole.log(container.particleChildren.length); \u002F\u002F 1\n```\n\nParticles are stored in the `particleChildren` array, not `children`. The standard `Container.children` array is empty on a `ParticleContainer`. All particle enumeration, counting, and manipulation must use `particleChildren` plus the `*Particle` methods.\n\n\n### [MEDIUM] Do not use ParticleContainer as a normal container\n\n`ParticleContainer` contains particles, not display objects. If you need to group a particle system with a background sprite or UI overlay, wrap the `ParticleContainer` itself inside a plain `Container`:\n\n```ts\nconst world = new Container();\nworld.addChild(backgroundSprite, particleContainer, uiLayer);\n```\n\n\n## API Reference\n\n- [ParticleContainer](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.ParticleContainer.html.md)\n- [ParticleContainerOptions](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.ParticleContainerOptions.html.md)\n- [Particle](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.Particle.html.md)\n- [ParticleOptions](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.ParticleOptions.html.md)\n- [IParticle](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.IParticle.html.md)\n- [ParticleProperties](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fscene.ParticleProperties.html.md)\n",{"name":5,"license":15,"description":7},"main","8859218955d9504cd18b59e7892100718039d3b4","data\u002Fskills\u002Fpixijs-pixijs-skills\u002Fpixijs-scene-particle-container\u002Fskills\u002Fpixijs-scene-particle-container",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-particle-container",{"tool":38,"command":39},"bunx","bunx skills add om-scogo\u002Fskillsh-scraper --skill pixijs-scene-particle-container",{"tool":41,"command":42},"pnpm","pnpm dlx skills add om-scogo\u002Fskillsh-scraper --skill pixijs-scene-particle-container","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fpixijs-pixijs-skills\u002Fpixijs-scene-particle-container\u002Fskills\u002Fpixijs-scene-particle-container\u002FSKILL.md",true,[],[47,54,59,66,71,78],{"skillNo":48,"name":49,"nameZh":6,"description":50,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":51,"categories":52,"keywords":53,"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":55,"name":49,"nameZh":6,"description":50,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":56,"categories":57,"keywords":58,"publishedAt":19},"01M7D6M85CKKN87TA98VCQV4H7","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fyorkeccak-scientific-skills\u002Farxiv-search\u002FSkill.md",[],[],{"skillNo":60,"name":61,"nameZh":6,"description":62,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":63,"categories":64,"keywords":65,"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":67,"name":61,"nameZh":6,"description":62,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":68,"categories":69,"keywords":70,"publishedAt":19},"01M7D4ZHZKJD2RSNGAF63V14P4","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fwondelai-skills\u002Fworking-with-legacy-code\u002FSkill.md",[],[],{"skillNo":72,"name":73,"nameZh":6,"description":74,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":77,"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":79,"name":73,"nameZh":6,"description":74,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":82,"publishedAt":19},"01M7D4Z4MVYVY3NMJ18BNV6WNA","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fwondelai-skills\u002Fweb-typography\u002FSkill.md",[],[]]