0

我正在写关于 HTML5 画布的移动浏览器性能。我正在尝试制作一个简单的平台游戏（如超级马里奥兄弟）。我有一个主角，两个敌人和模仿跳跃平台的方块。人物和敌人由drawImage绘制，方块由fillRect绘制（现在也是drawImage）。一切都是动画的（当角色移动时，角色 X 被添加到块 X 等等）。

现在我正在尝试添加一些随机硬币。首先我为 Image 创建了变量

var coinB = new Image();
coinB.src = 'coin.png';

接下来，我将使用具有随机 X 和 Y 的对象创建数组：

var k;
for (k = 0; k <= 30; k++) {
    coins.push({
        x: Math.floor(Math.random() * 36 + 4) * 100,
        y: Math.floor(Math.random() * 3 + 1) * 100,
        width:25,
        height:25
    });
}

之后，我尝试选择所有内容并绘制：

var l;
/* left is the character X for the animation */
for (l = 0; l < coins.length; l++) {
    ctx.drawImage(coinB, coins[l].x - left, coins[l].y, coins[l].width, coins[l].height);
}

一切都在 requestAnimFrame 中的 function() 中。

不幸的是，在那之后，游戏在 Mobile FireFox（Chrome Mobile 20-30 fps）上大约有 30 fps（之前没有硬币的 60 fps）。所以它大约是硬币fps的一半。

有没有更好的方法来导入图像并绘制它们？例如，我new Image()为所有事情做（mainchar = new Image()，enemy = new Image()，coin = new Image()= ect），与.src. 我认为这不是最好的解决方案。我该怎么做才能获得更好的性能（损失更少的 fps）？谢谢你的帮助。

4

1 回答 1

0

我有类似的经历；我一直在寻找技巧和窍门，但没有解决性能问题的神奇方法。提高性能的关键是将对“drawImage”的调用降至最低……请记住，这是您的流程的瓶颈！因此，请务必仅绘制当前可见的（即不要绘制视图之外的硬币/块/背景）。

对于图像加载的问题，我看不到您当前正在做的任何替代方案。您可以做的最好的事情是使用一个包含所有图像的唯一文件，然后在需要时使用正确的部分；这应该会减少下载时间（1 个较大的文件比许多较小的文件要好），但不会提高性能。

希望这对您有所帮助，玩得开心！

于 2013-08-20T20:07:59.713 回答