EaselJsのアニメーションの問題

Question

これは初めてのEaselJsの学習です。私はデータ構造にリストされている5つのアニメーションでスプライトをアニメーション化することに問題があります。誰かが私が間違っていることを考えているだろうか？

リンク：my code

 function CreateTile(x,y, stage){ 
    var rect = new createjs.Shape(); 
    rect.graphics.beginFill("green").drawRect(0,0,50,50); 
    rect.x = x; 
    rect.y = y; 

    var rect2 = new createjs.Shape(); 
    rect2.graphics.beginFill("lightgreen").drawRect(0,0,46,46); 
    rect2.x = x + 2; 
    rect2.y = y + 2; 

    stage.addChild(rect); 
    stage.addChild(rect2); 
    } 

    function GenerateField(height, width, stage) 
    { 
    var h_lim = height/50; 
    var w_lim = width/50; 

    for(var h = 0; h < h_lim; h++){ 
     for(var w = 0; w < w_lim; w++){ 
     CreateTile(w * 50,h * 50,stage); 
     } 
    } 
    stage.update(); 
    } 
    function init() { 
    var stage = new createjs.Stage("demoCanvas"); 
    GenerateField(800,600, stage); 
    var img = new Image(); 
    img.crossOrigin="Anonymous"; 
    img.src = "https://s13.postimg.org/n1dqnac93/spritesheet.png"; 
     var data = { 
     images : [img], 
     frames: {width:64, height:64}, 
     animations: { 
      stand:0, 
      forwardwalk:[0,1,2, "forwardwalk"], 
      leftwalk:[7,8, "leftwalk"], 
      rightwalk:[3,4, "rightwalk"], 
      backwalk:[9,10,11, "backwalk"] 
     } 
    }; 

    var spritesheet = new createjs.SpriteSheet(data); 
    var person = new createjs.Sprite(spritesheet); 
    person.x = 400; 
    person.y = 400; 
    person.gotoAndPlay("forwardwalk"); 
    stage.addChild(person); 

    window.addEventListener('keydown', function(e){ 
     var code = e.keyCode; 
     switch(code){ 
      case 37: 
      person.x -= 64; 
      stage.update(); 
      break; //Left key 
      case 38: 
      person.y -= 64; 
      stage.update(); 
      break; //Up key 
      case 39: 
      person.x += 64; 
      stage.update(); 
      break; //Right key 
      case 40: 
      person.y += 64; 
      stage.update(); 
      break; //Down key 
      default: 
      break; // ignore 
     } 
    }, false); 

    createjs.Ticker.useRAF = true; 
    createjs.Ticker.setFPS(5); 
    createjs.Ticker.on("tick", stage); 
    } 

Answer 1

あなたが持っているこの問題は、あなたのspritesheetを正しく定義していることです。

1. シンプル：ただ、単一の名前+フレーム（あなたが定義されてどのよう
2. 連続するフレーム「スタンド」：名+開始/終了フレームのほか、「次をSpritesheetsは、いくつかのフォーマットをサポート
3. コンプレックス：フレームが順不同である場合、これは最適なアプローチです。これは正確なフレームリスト、次に他のパラメータを指定します。

すべてのフォーマット情報hereを読むことができます。

私はあなたがコンプレックスとの連続的なアプローチを混乱させ、3つのフレームを「前方歩行」と「後方ウォーク」アニメーションに入れていると思います。アニメーションは次のアニメーションとして「2」を、スピードとして「フォワードウォーク」を見つける。

[0,1,2,"forwardwalk"]の代わりに[0,2,"forwardwalk"]を使用してください。 "backwardwalk"と同じです。

それはすべきです！あなたのサンプルは、その変更で正常に動作します。