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

Question

我将使用 drawCircle()、drawRect() 等渲染的对象称为“原始”对象

考虑到:

1. 图元的位置发生变化(有约束 (1))
2. 原语*表示的对象被频繁创建/销毁

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

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

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

(1):我不知道在瞬间 t 子弹 1 位于位置 p1 并且t+1 瞬间，子弹 1 位于 p2 位置。但我确实知道在 t 时刻 p1 位置有一颗子弹，在 t+1 时刻有一颗子弹是 p2 位置的子弹。

Answer 1

我会选择选项 3:另一种解决方案。

通常最好尽可能使用位图 Sprite ，因为它们针对 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);

然后从纹理创建 Sprite

var s = new PIXI.Sprite(texture);

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

http://jsfiddle.net/gzh14bcn/

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

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

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