Question

我正在开发一个javascript画布游戏，我想改善游戏的性能。我正在阅读一些关于如何实现更好性能的文章 - 一种技术是预渲染。

将每个对象（每个对象都有一个纹理）渲染到它自己独立的canvas元素中是否有意义？以下是我正在呈现的实体的示例：

    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（）应该在初始化中完成（只需一次） - 是吗？

Answer 1

很难在不知道更多的情况下提出具体建议......但这是一个开始：

将任何静态背景元素放在html图像中并首先放下该图像。如果背景图像是静态但大于游戏视口，则滚动背景图像。
在动画元素需要动画制作多个组时对其进行排序。因此，在第5帧上制作动画的太阳和云元素将是一组。每个框架都有动画的葡萄人和男人将会在不同的群体中。为这几个组中的每个组创建一个画布。
在精灵表上放置不常用的动画元素。
将经常设置的动画元素放在自己的图像对象中。
将经常重新纹理化的元素放在自己的屏幕外画布上并在那里重新纹理。这是交易：帆布在移动设备上运行不佳，因此您不希望在移动设备上使用大量画布。但是将纹理的所有变体预渲染到图像对象中会占用大量内存。

底线：

预渲染无疑会为您带来性能提升。

但您需要测试各种预渲染策略，以了解哪种设备最适合哪种设备

Answer 2

回答这个问题：

将每个对象（每个对象都有纹理）渲染到自己独立的canvas元素中是否有意义？以下是我正在呈现的实体的示例：

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

如果他们一直都在嗖嗖嗖嗖，那么你也可以将它们全部放在同一个画布元素上，无论如何，这将会不断更新。

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

您的目标是尽可能少地进行drawImage次通话，因为这相当昂贵。

此外，广义地说，将微观优化留到最后是个好主意。

HTML5画布性能增强

2 个答案: