ParticleContainer

NOTE: Writing PixiJS apps in vanilla js (the imperative way) is always more performant. The React reconciler needs to pass and validate props which can be costly when dealing with lots of components.

Most of the time you won't notice any difference though (rendering 1000 sprites in a particle container is still fast).

Props

https://pixijs.download/v7.x/docs/PIXI.ParticleContainer.html

maxSize

The maximum number of particles that can be rendered by the container. Affects size of allocated buffers. This will only affect the component once and will be applied during creation.

properties

The properties of children that should be uploaded to the gpu and applied.

Prop	Default Value	Description
vertices boolean	false	When true, vertices be uploaded and applied. if sprite's scale/anchor/trim/frame/orig is dynamic, please set true.
position boolean	true	When true, position be uploaded and applied.
rotation boolean	false	When true, rotation be uploaded and applied.
uvs boolean	false	When true, uvs be uploaded and applied.
tint boolean	false	When true, alpha and tint be uploaded and applied.

batchSize

Number of particles per batch. If less than maxSize, it uses maxSize instead.

autoResize

If true, container allocates more batches in case there are more than maxSize particles.

Usage

// import { ParticleContainer, Sprite, Stage } from '@pixi/react'

<ExampleAssetLoader name="bunny" url="/pixi-react/img/bunny.png">
  <Stage width={300} height={300} options={{ backgroundColor: 0xffffff }}>
    <ParticleContainer position={[150, 150]} properties={{ position: true }}>
      <Sprite anchor={0.5} x={-75} y={-75} image="bunny" />
      <Sprite anchor={0.5} x={0} y={0} image="bunny" />
      <Sprite anchor={0.5} x={75} y={75} image="bunny" />
    </ParticleContainer>
  </Stage>
</ExampleAssetLoader>

Example