HTML5 Canvas中的平滑步行精灵

Question

我正在用canvas(&js)开发一个等距html5游戏.我的网格由列(x)和行(y)组成.

目前我的玩家可以穿过地图,但他从坐标跳到坐标.

我试图让他以平滑的方式从一个瓷砖走到另一个瓷砖,使用精灵动画.但是我不知道我怎么也找不到任何关于这个机制的文章,所以我再次向你求助!

所以,如果你知道如何做到这一点,或者知道解释这个的文章或教程,那就太棒了!

提前致谢,

Nick Verheijen

更新:我正在使用的代码来管理我的播放器

Player.move = function(direction)
{
 var newX = Player.positionX;
 var newY = Player.positionY;

 switch( direction )
 {
    case 'up':
        Player.moveDirection = 'up';
        newY--;
    break;
    case 'down':
        Player.moveDirection = 'down';
        newY++;
    break;
    case 'left':
        Player.moveDirection = 'left';
        newX--;
    break;
    case 'right':
        Player.moveDirection = 'right';
        newX++;
    break;
}

Player.positionX = newX;
Player.positionY = newY;
}

注意:我正在保存播放器移动的方向,因此我可以显示正确的图像.

此外,我没有使用像EaselJS这样的库.由于简单的原因,几乎没有任何文档或示例,所以我必须自己解决所有问题.

Answer 1

您需要使用基于时间的运动。请参阅以下文章：

在 JavaScript 中使用 canvas 制作位图精灵动画