我称之为“原始”的对象是使用drawCircle(),drawRect(),…
考虑到：
>基元的位置发生变化(约束(1))
>经常创建/销毁由基元*表示的对象
在不同位置绘制相同基元的多个实例的最快方法是什么：
>创建一个图形对象,将其一次性添加到容器中,每帧清除它,并在每个帧上使用不同的位置调用multiples drawSomething()？
>为每个图元创建一个图形对象,在其中调用一个drawSomething(),并将其添加到指定位置的容器中？
>另一个解决方案
为了清楚起见,如果我使用drawCircle()简单地渲染子弹,并且知道每帧都接收完整的游戏状态(即约束(1)),那么渲染它们的最快方法是什么？
(1)：我不知道在时刻t,子弹1位于位置p1,而在时刻t 1,子弹1位于位置p2.但我确实知道,在瞬间t,在位置p1处有一颗子弹,在时刻t 1,在位置p2处有一颗子弹.
解决方法
我会选择选项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);
这是一个从单个纹理创建多个精灵的示例.
请注意,此代码甚至不需要更新功能来重绘每个帧.你只需在最后渲染一次舞台.
因此,如果你有多个项目符号,你可以为每个项目符号创建一个Sprite,并在它移动时更新它的位置.一旦它关闭屏幕,删除对它的引用,GC将清理它.
如果要进一步优化,则应考虑为子弹使用对象池. https://en.wikipedia.org/wiki/Object_pool_pattern
