0

我正在尝试使用easeljs 并为spritesheet 设置动画。这是我第一次使用精灵，因此对它们一无所知。

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

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);
}

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

4

2 回答 2

1

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

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

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

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

于 2013-09-15T19:21:47.353 回答
0

好的，我通过结合上面列出的两个代码来完成工作；

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);。我找不到前者的任何文件。
于 2013-09-16T19:41:10.347 回答