画布多个图像和移动浏览器性能

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

现在我试图添加一些随机硬币。首先，我创建的变量对图片

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中的函数（）中。

不幸的是，此后，游戏的移动FireFox（Chrome Mobile 20-30 fps）的游戏速度大约为30fps（从之前的60 fps没有硬币）。所以它的硬币大约是fps的一半。

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

来源

2013-08-20 Amay

初始化主环路外的硬币怎么样？实例化对象不是免费的。你也可以用'for（l = 0，len = coins.length; i danielepolencic

我有类似的经历;我已经寻找提示和技巧，但没有解决性能问题的神奇方法。提高性能的关键是将“drawImage”调用降至最低限度......请记住，它是您流程的瓶颈！所以，一定要画出当前可见的东西（即不要画出硬币/块/背景）。

对于什么关心图像加载，我没有看到任何替代你目前正在做的。最好的办法是使用一个独特的文件，包含所有的图像，然后在需要时使用正确的部分;这应该会减少下载时间（1个大文件比许多小文件更好），但不会增加性能。

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

来源

2013-08-20 20:07:59

他应该检查你的答案，因为我看不到其他方式来回答他的问题**'）** –

画布多个图像和移动浏览器性能

回答

相关问题