HTML5画布中流畅的精灵



我正在画布(&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这样的库。原因很简单,几乎没有任何文档或示例,所以我必须自己解决所有问题。

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

使用画布在JavaScript 中进行位图精灵动画

相关内容

  • 没有找到相关文章

最新更新