Question

我正在使用canvas（＆amp; 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

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

Using canvas to do bitmap sprite animation in JavaScript

Answer 2

我看到你关于不使用Easel.js的评论，但也许它自你上次看后有所改进，因为他们有8个演示，22个迷你演示，以及6个教程的链接。（我不是用户，只是评估等距图形的选择）

无论如何，如果再看看，请向下滚动到此页面上的BitmapAnimation（＃18）条目： http://createjs.com/#!/EaselJS/demos/apitest

HTML5 Canvas中的平滑步行精灵

2 个答案: