HTML5キャンバスで滑らかなウォーキングスプライト

Question

私はキャンバス（& js）でアイソメのhtml5ゲームを開発しています。私のグリッドは列（x）と行（y）で構成されます。

現在のところ、私のプレーヤーは地図を歩くことができますが、座標から座標にジャンプします。

私は彼にスプライトアニメーションを使って滑らかな方法でタイルからタイルまで歩かせようとしています。しかし、私はどのようにしてこのことの仕組みをカバーする記事を見つけることができないのかわからないので、もう一度私はあなたに目を向ける！

これを行う方法がわかっている場合、またはこれを説明する記事やチュートリアルを知っていれば、それは素晴らしいことです！事前に

おかげで、

ニックVerheijen

UPDATE：私は私のプレイヤーに歩いて今使っているコード

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へのリンクを持っているとして、おそらくそれは、改善されていますチュートリアル。 http://createjs.com/#!/EaselJS/demos/apitest