EaselJs动画问题

Question

这是我第一次学习EaselJs。我在用我在数据结构中列出的五个动画制作精灵动画时遇到了问题。有人知道我做错了什么吗？

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

1. Simple:只有一个名称+帧(如何定义"stand"
2. Consecutive帧：名称+开始/结束帧，以及“下一步”和“速度”。这就是你的大多数“左”和“右”漫游动画是如何defined.
3. Complex:的如果你有乱序的帧，这是最好的方法，因为你指定了确切的帧列表，然后是其他参数specifically.

你可以阅读所有的格式信息here。

我相信你把连续的方法和复杂的方法搞混了，在“向前走”和“向后走”动画中放了3帧。动画查找"2“作为下一个动画，"forwardwalk”作为速度。

使用[0,2,"forwardwalk"]而不是[0,1,2,"forwardwalk"]。“向后走”也是如此。

这应该就行了！您的示例可以很好地处理这一变化。