pixijs-scene-particle-container
Use this skill when rendering thousands of lightweight sprites in PixiJS v8. Covers ParticleContainer with Particle instances, addParticle/removeParticle, 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.
Security Assessment
About pixijs-scene-particle-container
PixiJS Scene Particle Container covers rendering thousands of lightweight sprites in PixiJS v8 using ParticleContainer, a specialized container that draws hundreds to tens of thousands of similar sprites in a single draw call with minimal per-object overhead. It is intended for particle effects, bullet patterns, and any case needing many similar-looking objects. Particles share a single base texture and have a restricted transform set, and they are not full Container children: a ParticleContainer holds Particle instances in its own particleChildren array and rejects normal children, so objects are added with addParticle rather than addChild, and the whole container is wrapped in a regular Container when it needs to be grouped with other scene objects. The Particle API is new in v8 but stable for production.
Constructor options for ParticleContainer include texture (the shared base texture, falling back to the first particle's texture if omitted), particles (an initial array), dynamicProperties (flags for vertex, position, rotation, uvs, and color that control which attributes re-upload to the GPU each frame, with only position dynamic by default), roundPixels for crisper pixel-art rendering, and shader to replace the default particle shader. All standard Container options also apply. boundsArea, though inherited from Container, is effectively required here because the container returns empty bounds by default for performance, which causes it to be culled as invisible and to miss containsPoint when boundsArea is unset.
Particle itself is a lightweight struct rather than a Container subclass, with flat numeric fields: texture (required and sharing the container's base texture source), x, y, scaleX, scaleY, anchorX, anchorY, rotation, tint, and alpha, where tint and alpha combine into an internal color field. The constructor also accepts a bare Texture as shorthand for a texture object using the defaults, and Particle.defaultOptions is a reassignable static object for changing defaults globally. Related skills cover scene core concepts, sprites for full per-object features, assets and texture atlases, performance, and the container used to wrap particle output with other display objects.
FAQ
When should I use ParticleContainer instead of regular sprites?
Use it when rendering hundreds to tens of thousands of lightweight, similar-looking sprites such as particle effects or bullet patterns, where minimal per-object overhead and a single draw call matter. For full per-object features, use a normal Sprite instead.
How do I add particles to the container?
Call addParticle with Particle instances; ParticleContainer keeps them in its own particleChildren array and rejects normal children, so addChild does not apply. You can also pass an initial particles array in the constructor.
Why is boundsArea important?
By default the container returns empty bounds for performance, so without boundsArea it is culled as invisible when culling is active and containsPoint always misses. Setting boundsArea, for example to the screen rectangle, is effectively required.
What does dynamicProperties control?
It flags which particle attributes (vertex, position, rotation, uvs, color) re-upload to the GPU every frame. Only position is dynamic by default, so you mark what you animate and leave the rest static for speed.
Do all particles need the same texture?
Yes. Every particle in a ParticleContainer must share the same base texture source. If you omit the container texture, it falls back to the texture of the first particle added.
Install pixijs-scene-particle-container
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
pixijs/pixijs-skills