如何在 PIXI.js 中绘制同一图元的多个实例？

Question

我调用一个 "primitive" 使用 drawCircle()、drawRect() 渲染的对象，...

考虑到：

图元的位置发生变化（有约束(1)）
基元*表示的对象经常created/destroyed

在不同位置绘制相同图元的多个实例的最快方法是什么：

创建一个图形对象，一次性将其添加到容器中，每帧清除它，并在每帧的不同位置调用多次 drawSomething()？
每帧为每个图元创建一个图形对象，调用一个 drawSomething() 到其中，并将其添加到指定位置的容器中？
另一个解决方案？

为了清楚起见，如果我使用 drawCircle() 简单地渲染了子弹，并且知道我在每一帧都收到了游戏的完整状态（即约束 (1)), 渲染它们的最快方法是什么？

(1)：我不知道 t 子弹 1 是在位置 p1 并且瞬间 t+1 子弹 1 在位置 p2。但是我 do 知道在瞬间 t 位置 p1 和瞬间 t+1 p2.

位置有一颗子弹

Answer 1

我会选择选项 3：另一个解决方案。

通常最好尽可能使用位图精灵，因为它们针对 GPU 进行了更优化。（更多信息在这里 https://github.com/pixijs/pixi.js/issues/1390）

您可以轻松地将原始图形渲染成可重复使用的纹理。

// Render a circle to a texture
var texture = new PIXI.RenderTexture(renderer, 16, 16);
var graphics = new PIXI.Graphics();
graphics.beginFill(0x44FFFF);
graphics.drawCircle(8, 8, 8);
graphics.endFill();
texture.render(graphics);

然后从纹理创建精灵

var s = new PIXI.Sprite(texture);

这是一个从单个纹理创建多个精灵的示例。

http://jsfiddle.net/gzh14bcn/

请注意这段代码甚至不需要更新函数来重绘每一帧。您只需在最后渲染一次舞台。

因此，如果您有多颗子弹，您只需为每颗子弹创建一个 Sprite 并在它移动时更新它的位置。一旦它离开屏幕，删除对它的引用，GC 将清理它。

如果您想进一步优化，您应该考虑为您的项目符号使用对象池。 https://en.wikipedia.org/wiki/Object_pool_pattern

如何在 PIXI.js 中绘制同一图元的多个实例？

How to draw multiple instances of the same primitive in PIXI.js?

javascript

graphics

pixi.js