如何在PIXI.js中绘制相同原语的多个实例

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

本文关键字：同原语 实例 绘制 PIXI js      更新时间：2023-09-26

我把用drawCircle()， drawRect()，…渲染的对象称为"primitive"

考虑:

  1. 原语的位置改变(约束(1))
  2. 由原语*表示的对象经常被创建/销毁

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

  • 创建一个图形对象，将其一次性添加到容器中，每帧清除它，并在每帧的不同位置调用多个drawSomething() ?
  • 为每个原语每帧创建一个图形对象，在其中调用单个drawSomething()，并在指定位置将其添加到容器中?

为了清晰起见，如果我用drawCircle()简单地渲染子弹，并且知道我接收到游戏的每一帧的完整状态(这是约束(1))，那么什么是最快的方式来渲染它们?

(1):我不不知道在瞬间t子弹1在位置p1和瞬间t+1子弹1在位置p2。但是我确实知道在瞬间t位置p1有一个子弹，在瞬间t+1位置p2有一个子弹。

我会选择选项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/

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

所以如果你有多个子弹，你可以为每个子弹创建一个精灵，并在它移动时更新它的位置。一旦它离开屏幕，删除对它的引用，GC将清理它。

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

相关文章：