我简单的easeljs脚本中的精灵动画没有出现

Question

我正在尝试使用easeljs 并为spritesheet 制作动画。这是我第一次使用精灵，因此对它们并不了解。

显示这个特定动画的简单easeljs代码是；

var stage;

function init() {

    // create a new stage and point it at our canvas:
    stage = new createjs.Stage(document.getElementById("demoCanvas"));

     var data = {
         images: ["http://i.imgur.com/g5WtL7v.png"],
         frames: {width:256, height:256},
         animations: {
            run:[0,4]
            }
     };

     var spriteSheet = new createjs.SpriteSheet(data);
     var animation = new createjs.BitmapAnimation(spriteSheet);
     animation.gotoAndPlay("run");

}

但是精灵根本没有出现在画布上。我做错了什么？

附加问题； 在easeljs中定义框架可以通过

frames: [ // x, y, width, height, imageIndex, regX, regY

虽然我确实了解宽度和高度，但什么是 x、y、imageIndex 和 regX、regY。该文档解释了我如何使用这些参数，但对于我生命中第一次使用精灵的人来说，我只是不知道这些术语的含义。

编辑：我也尝试过更改代码；

 var stage;

function init() {

    // create a new stage and point it at our canvas:
    stage = new createjs.Stage("demoCanvas");

    var data = {
        images: ["http://i.imgur.com/g5WtL7v.png"],
        frames: {width:256, height:256, count:8},
        animations: {
            run:[0,4, true]
        }
    };

    var ss = new createjs.SpriteSheet(data);
    var animation = new createjs.BitmapAnimation(ss);

    animation.x = 100;
    animation.y = 100;

    stage.addChild(animation);

    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener("tick", stage);
}

但我仍然看到一片空白的画布......

Answer 1

您在帧对象中缺少帧计数：

frames: {width:...,height:...,count:4} // or whatever number of frames your sprite holds

并且以防万一：宽度和高度是1帧的宽度和高度，而不是整个图像。

在此处查看更多信息和示例：http://www.createjs.com/Docs/EaselJS/classes/SpriteSheet.html

Answer 2

好的，通过结合上面列出的两个代码，我得到了工作；

var stage;

function init() {

    // create a new stage and point it at our canvas:
    stage = new createjs.Stage("demoCanvas");

    var data = {
        images: ["http://i.imgur.com/g5WtL7v.png"],
        frames: {width:256, height:256, count:8},
        animations: {
            run:[0,4, true]
        }
    };

    var ss = new createjs.SpriteSheet(data);
    var animation = new createjs.BitmapAnimation(ss);



    animation.x = 100;
    animation.y = 100;

    stage.addChild(animation);
    animation.gotoAndPlay("run");

    createjs.Ticker.setFPS(10);
    createjs.Ticker.addEventListener("tick", stage);
}

现在我有一些问题；

1. 如果我需要animation.gotoAndPlay("run"); 为精灵设置动画，为什么https://github.com/CreateJS/EaselJS/blob/master/examples/SpriteSheet_simple.html 的代码不需要它？
2. new createjs.Sprite(ss, "run"); 和 new createjs.BitmapAnimation(spriteSheet); 有什么区别。我找不到前者的任何文档。