node.js和canvas,gameloop不同步

时间:2016-03-12 11:06:17

标签: javascript node.js loops canvas

我正在构建多人实时太空射击游戏。起初我只创建了单人游戏本地版本的游戏,看看事情是如何完成的。游戏以稳定的60 fps顺利运行。我很满意核心和性能,所以我开始将它移植到多人版本。作为游戏的服务器,我使用node.js。

我希望每个玩家看到相同的状态"状态"游戏和游戏的经验相同,所以我决定只将玩家输入传递给服务器,让服务器计算一切。

问题是,哪个方法应该用于服务器端的游戏循环?

服务器正在计算敌人的位置和敌人的子弹。我使用setInterval方法:

setInterval(function() {
    for(var i = 0; i < enemies.length; i++) {
        var enemy = enemies[i];
        enemy.move();
        enemy.fire();
    }
    io.emit('enemies', enemies);
}, 1000 / 60)

敌人移动功能是这样的:

    this.move = function() {
        this.x += (this.movX - this.x) / this.speed;
        this.y += (this.movY - this.y) / this.speed;
    };

在客户端,我运行requestAnimationFrame循环:

socket.on('enemies', function(enemies) {
    self.enemies = enemies;
});
var run = function() {
    for(var i = 0; i < self.enemies.length; i++) {
        (function(i) {
            var enemy = self.enemies[i];
            if(enemy.alive) {

                for(var i = 0; i < enemy.primary_bullets_pool.length; i++) {
                    var bullet = enemy.primary_bullets_pool[i];
                    if(bullet.alive) {
                        self.context.fillStyle = 'red';
                        self.context.fillRect(bullet.x, bullet.y, bullet.w, bullet.h);
                    }
                }

                self.context.drawImage(self.images[enemy.model], enemy.x, enemy.y, enemy.w, enemy.h);
            }
        }(i));
    }

    window.requestAnimationFrame(run);
};

现在用户体验非常糟糕。敌人是&#34;跳跃&#34;在屏幕上而不是顺利移动。我试验了间隔时间。如果放10毫秒而不是1000/60 - 它会好一点但抖动仍然可见。实现这一目标的正确方法是什么,这样每个玩家都可以在任何特定时间看到同一位置的敌人并且移动顺利完成?

1 个答案:

答案 0 :(得分:2)

就目前情况而言,看起来你每次更新敌人的位置&#34;打勾&#34; - 正如你所注意到的那样,如果服务器无法更新,它会显得紧张他们的立场足够快。

理想情况下,您不希望您的服务器必须不断向所有玩家发出所有敌人的位置事件,以实现平稳移动。对于应该完全在客户端上处理的事情来说,这是一个很大的开销。

我建议不要每次更新敌人在客户端的位置,并且#34;但是当敌人开始移动(或者开始向不同方向移动)然后制作动画时,接受敌人应该朝向一组坐标。这将为您提供所需的更流畅的体验。

来自GameDev Stack Exchange的this question的一些答案应该指向正确的方向来实现&#34;向&#34;功能