2

我正在开发一个 javascript 画布游戏，我想提高游戏的性能。我正在阅读一些关于如何获得更好性能的文章——一种技术是预渲染。

将每个对象（每个对象都有一个纹理）渲染到它自己单独的画布元素是否有意义？这是我正在渲染的实体的示例：

    fruitless.ctx.save();
        fruitless.ctx.translate(this.body.GetPosition().x,this.body.GetPosition().y);
        fruitless.ctx.rotate(this.body.GetAngle());
        fruitless.ctx.scale(this.scale.x, this.scale.y);

        fruitless.ctx.drawImage(this.texture, ... )
        this.face.draw();
    fruitless.ctx.restore();

所以基本上我每次迭代都在运行 drawImage() 函数......预渲染建议这个 drawImage() 应该在初始化中完成（只需一次） - 对吗？

4

2 回答 2

2

在不了解更多信息的情况下很难给出具体建议……但这是一个开始：

  1. 将任何静态背景元素放在 html 图像中，然后首先放置该图像。如果背景图像是静态的但大于您的游戏视口，请滚动它。

  2. 将动画元素按需要制作动画的时间分为几组。所以在第 5 帧上动画的太阳和云元素将是一组。为每一帧设置动画的葡萄人和理由人将在不同的组中。为这几个组中的每一个创建一个画布。

  3. 将不经常动画的元素放在精灵表上。

  4. 将经常动画的元素放在它们自己的图像对象中。

  5. 将经常重新纹理化的元素放在它们自己的屏幕外画布中并在那里重新纹理化。这是交易：画布在移动设备上运行不佳，因此您不希望在移动设备上使用很多画布。但是将所有纹理变化预渲染到图像对象中会占用大量内存。

底线：

预渲染无疑会给你带来性能提升。

但是你需要测试各种预渲染策略，看看哪种在哪种设备上效果最好

于 2013-05-19T19:00:17.593 回答
0

要回答这个问题：

将每个对象（每个对象都有一个纹理）渲染到它自己单独的画布元素是否有意义？这是我正在渲染的实体的示例：

嗯，这取决于。那里有多少？他们在做什么？

如果它们一直在嗡嗡作响，那么您不妨将它们全部放在同一个画布元素上，因为无论如何，这将持续更新。

如果有些是静态的，请将它们分组。

您的目标是尽可能少drawImage地拨打电话，因为这相当昂贵。

此外，从广义上讲，将微优化留到最后是个好主意。

于 2013-05-20T03:47:49.553 回答