Pixijs Scene Particle Container
Render thousands of lightweight sprites in one draw call for particles, bullets, or dense VFX in PixiJS v8 games and canvas apps.
Overview
pixijs-scene-particle-container is an agent skill for the Build phase that documents PixiJS v8 ParticleContainer and Particle instances for mass sprite rendering in one draw call.
Install
npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-scene-particle-containerWhat is this skill?
- ParticleContainer for hundreds to tens of thousands of sprites in a single draw call
- Particle API: addParticle/removeParticle, particleChildren—not addChild
- dynamicProperties: vertex, position, rotation, uvs, color
- boundsArea, roundPixels, and update behavior for performance tuning
- Assumes pixijs-scene-core-concepts; stable Particle API in PixiJS v8
- single draw call for hundreds to tens of thousands of particles
Adoption & trust: 1.3k installs on skills.sh; 206 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need dense particle or bullet visuals in PixiJS but full Container children explode draw calls and CPU overhead.
Who is it for?
Indie game or interactive canvas work in PixiJS v8 where you already know core scene concepts and need particle-scale rendering.
Skip if: Projects not using PixiJS, UI-heavy apps without canvas VFX, or cases needing full Container features per sprite.
When should I use this skill?
Rendering thousands of lightweight sprites; ParticleContainer, addParticle, particleChildren, dynamicProperties, boundsArea, particle effects in PixiJS v8.
What do I get? / Deliverables
You configure ParticleContainer with the correct particleChildren workflow, dynamicProperties, and grouping pattern so large sprite counts render efficiently.
- ParticleContainer setup with correct Particle API usage
- Performance-oriented particle VFX configuration
Recommended Skills
Journey fit
Implementation guidance lands in Build when you wire rendering and scene graph choices into the product. ParticleContainer is a client-side WebGL/canvas rendering pattern—primary home is frontend/game client code, not backend or ops.
How it compares
Use for batched Particle sprites instead of thousands of regular Sprite Container children.
Common Questions / FAQ
Who is pixijs-scene-particle-container for?
Solo builders and small teams shipping PixiJS v8 games or canvas experiences who need particle-scale sprite counts without per-child Container cost.
When should I use pixijs-scene-particle-container?
During Build when implementing particle effects, bullet patterns, or any high-count similar sprites—especially when triggers mention ParticleContainer, addParticle, dynamicProperties, or boundsArea.
Is pixijs-scene-particle-container safe to install?
Review the Security Audits panel on this Prism page before installing; the skill is MIT-licensed documentation-style guidance with no install counts claimed here.
Workflow Chain
Requires first: pixijs scene core concepts
SKILL.md
READMESKILL.md - Pixijs Scene Particle Container
`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. Assumes 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. The Particle API is new in v8 but is stable for production use. ## Quick Start ```ts const texture = await Assets.load("particle.png"); const container = new ParticleContainer({ texture, boundsArea: new Rectangle(0, 0, app.screen.width, app.screen.height), dynamicProperties: { position: true, rotation: false, color: false, }, }); for (let i = 0; i < 10000; i++) { container.addParticle( new Particle({ texture, x: Math.random() * app.screen.width, y: Math.random() * app.screen.height, }), ); } app.stage.addChild(container); ``` **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). ## Constructor options ### ParticleContainerOptions All `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) are also valid here — see `skills/pixijs-scene-core-concepts/references/constructor-options.md`. Note that `children` is omitted: use `particles` instead. | Option | Type | Default | Description | | ------------------- | -------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `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. | | `particles` | `T[]` | `[]` | Initial array of `Particle` (or `IParticle`) instances. Equivalent to calling `addParticle` for each, but skips per-call view updates. | | `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