带有图形的粒子容器支持

Question

是否可以在 Pixi.js 中使用包含 Graphics 对象的 Particle Container 而不是 sprite？如果我使用图形 class，则会因为缺少纹理而抛出异常。

TypeError: e[0]._texture is undefined

目标是利用粒子容器的快速渲染性能来显示大量的图形元素（例如矩形、圆形、多边形）。

var group = new PIXI.ParticleContainer(2000, {scale: true, position: true, rotation: true});

for(var i=0; i <1000; i++)
{
  var graphics = new PIXI.Graphics();
      graphics.lineStyle(1, 0xef7975, 1);
      graphics.beginFill(0xef7975, 1);
      graphics.drawRect(0, 0, 10, 10);
      graphics.endFill();

      //Add Positioning, rotation, or scaling
      //....
      group.addChild(graphics);
}

Answer 1

一种可能性是使用 Graphics class 的 generateTexture(resolution, scaleMode) 函数。此纹理可用于实例化精灵并将其添加到粒子容器中。

var sprite = new PIXI.Sprite(this.graphics.generateTexture(this.width * this.height, PIXI.scaleModes.DEFAULT));
    group.addChild(sprite);

Answer 2

要将图形转换为纹理，请执行以下操作：

let texture = renderer.generateTexture( graphic );

这是一个演示：http://codepen.io/lonelydatum/pen/eggEje?editors=0010#0

带有图形的粒子容器支持

Particle container support with Graphics

javascript

pixi.js