我用EaselJS
创建了一个网页游戏,其中有一些(2-6)精灵在画布上移动。此外,它们可能会根据鼠标事件进行放大和缩小。
以下是我移动这些精灵的方式:
container.enemies.forEach(function(drop) {
drop.x += drop.vx;
drop.y += drop.vy;
checkHitWall(drop);
var collided = drop.checkCollision(container.enemies);
if (collided) {
distributeVelocity(drop, collided);
}
});
以下是我更改其大小的方法:
growingObject = function(obj) {
if (obj.radius > canvasWidth / 4) {
return;
}
var rate = 1.01;
obj.gotoAndStop("growing");
obj.radius *= rate;
obj.scaleX = obj.scaleY = obj.scale * rate;
obj.scale = obj.scaleX;
}
并且当鼠标按下时,每个刻度都会调用此函数。
背景在创建时缓存。
我不知道是否有使用EaselJS
移动/增长精灵的最佳实践。
该游戏在桌面浏览器上运行,但在安卓手机上非常滞后。
我认为这些精灵对手机来说并不是一个沉重的负担。性能分析结果表明draw
该方法占用了大部分 CPU 时间。如何优化它?
一个想法:您可以尝试降低帧速率以在流畅的动画和可接受的速度之间取得平衡。 根据我的经验,在游戏开始看起来不可接受之前,您可以在移动设备上达到令人惊讶的低帧率。 尝试这样的事情,并调整您的速度以模拟您之前 fps 时的速度。 显然,确切的调整取决于您。
创建JS。Ticker.setFPS(12);