粒子容器

¥Particle Container

ixiJS v8 通过 ParticleContainer 和 Particle 类引入了高性能粒子系统。该系统专为渲染大量轻量级视觉效果（例如火花、气泡、兔子或爆炸）而设计，通过去除所有不必要的开销来提供原始速度。

¥ixiJS v8 introduces a high-performance particle system via the ParticleContainer and Particle classes. Designed for rendering vast numbers of lightweight visuals—like sparks, bubbles, bunnies, or explosions—this system provides raw speed by stripping away all non-essential overhead.

警告Experimental API Notice

Particle API 稳定但处于实验阶段。它的界面可能会在未来的 PixiJS 版本中改进。我们欢迎你提供反馈，以指导其开发。

¥The Particle API is stable but experimental. Its interface may evolve in future PixiJS versions. We welcome feedback to help guide its development.

import { ParticleContainer, Particle, Texture } from 'pixi.js';

const texture = Texture.from('bunny.png');

const container = new ParticleContainer({
    dynamicProperties: {
        position: true, // default
        scale: false,
        rotation: false,
        color: false,
    },
});

for (let i = 0; i < 100000; i++) {
    const particle = new Particle({
        texture,
        x: Math.random() * 800,
        y: Math.random() * 600,
    });

    container.addParticle(particle);
}

app.stage.addChild(container);

为什么使用 ParticleContainer？

¥Why Use ParticleContainer?

• 极致性能：以高 FPS 渲染数十万甚至数百万个粒子。

  ¥Extreme performance: Render hundreds of thousands or even millions of particles with high FPS.

• 轻量级设计：粒子比 Sprite 更高效，缺少子级、事件或过滤器等额外功能。

  ¥Lightweight design: Particles are more efficient than Sprite, lacking extra features like children, events, or filters.

• 细粒度控制：通过声明哪些属性是动态的（每帧更新）或静态的（一次设置）来优化渲染。

  ¥Fine-grained control: Optimize rendering by declaring which properties are dynamic (updated every frame) or static (set once).

性能提示：静态 vs. 动态

¥Performance Tip: Static vs. Dynamic

• 动态属性每帧都会上传到 GPU。

  ¥Dynamic properties are uploaded to the GPU every frame.

• 静态属性仅在调用 update() 时上传。

  ¥Static properties are uploaded only when update() is called.

明确声明你的需求：

¥Declare your needs explicitly:

const container = new ParticleContainer({
    dynamicProperties: {
        position: true,
        rotation: true,
        scale: false,
        color: false,
    },
});

如果你稍后修改静态属性或粒子列表，则必须调用：

¥If you later modify a static property or the particle list, you must call:

container.update();

限制和 API 差异

¥Limitations and API Differences

ParticleContainer 的设计注重速度和简洁性。因此，它不支持完整的 Container API：

¥ParticleContainer is designed for speed and simplicity. As such, it doesn't support the full Container API:

❌ 不可用：

¥❌ Not Available:

• addChild(), removeChild()

• getChildAt(), setChildIndex()

• swapChildren(), reparentChild()

✅ 替代用法：

¥✅ Use Instead:

• addParticle(particle)

• removeParticle(particle)

• removeParticles(beginIndex, endIndex)

• addParticleAt(particle, index)

• removeParticleAt(index)

这些方法操作 .particleChildren 数组并正确维护内部 GPU 缓冲区。

¥These methods operate on the .particleChildren array and maintain the internal GPU buffers correctly.

创建粒子

¥Creating a Particle

Particle 支持关键显示属性，并且比 Sprite 效率更高。

¥A Particle supports key display properties, and is far more efficient than Sprite.

粒子示例

¥Particle Example

const particle = new Particle({
    texture: Texture.from('spark.png'),
    x: 200,
    y: 100,
    scaleX: 0.8,
    scaleY: 0.8,
    rotation: Math.PI / 4,
    tint: 0xff0000,
    alpha: 0.5,
});

你也可以使用简写：

¥You can also use the shorthand:

const particle = new Particle(Texture.from('spark.png'));

---

API 参考

¥API Reference

• ParticleContainer

• 粒子

  ¥Particle