EaselJs动画问题

Question

这是我第一次学习EaselJ。 我在使子画面与数据结构中列出的五个动画建立动画时遇到问题。 有人知道我在做什么错吗？

链接： 我的代码

      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。 Spritesheets支持几种格式：

1. 简单：只需一个名称+框架（您如何定义“站立”
2. 连续帧：名称+开始/结束帧，以及“下一个”和“速度”。 这就是大多数“左”和“右”步行动画的定义方式。
3. 复杂：如果您的帧顺序混乱，这是最好的方法，因为您指定了确切的帧列表，然后指定了其他参数。

您可以在此处阅读所有格式信息。

我相信您已经将连续方法与复合物混淆了，并在“前向走动”和“后向走动”动画中添加了3帧。 动画找到“ 2”作为下一个动画，“ forwardwalk”作为速度。

代替[0,1,2,"forwardwalk"] ，请使用[0,2,"forwardwalk"] 。 与“向后走”相同。

那应该做！ 您的样本可以很好地应对这种变化。