Question

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

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类的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

使用Graphics的粒子容器支持

2 个答案: