Question

我将一个“原始”称为用drawCircle（），drawRect（），...

渲染的对象

考虑到：

基元的位置发生变化（约束（1））
基元*表示的对象经常被创建/销毁

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

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

为了清楚起见，如果我使用drawCircle（）简单地渲染子弹，并且知道每帧都接收完整的游戏状态（即约束（1）），什么是最快的渲染方式？

（1）：我不知道即时 t 项目符号1位于 p1 位置在瞬间 t + 1 项目符号1位于 p2 的位置。但我做知道，在 t 时， p1 位置的子弹和 t + 1 的瞬间是 p2 位置的子弹。

Answer 1

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

通常最好在可能的情况下使用Bitmap Sprites，因为它们针对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中绘制同一个原语的多个实例？

1 个答案: