如何在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:另一种解决方案.

通常情况下,尽可能使用Bitmap Sprit,因为它们针对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