Question

我不知道这个问题是否是一个缓和的错误，或者我是否做错了（很可能）。当我使用TexturePacker对象进行动画时，不显示位于具有不同小数位数的数字之间的数组位置的动画。（例如9到10,99到100）

jsfiddle中的代码示例：

var fromTexturePacker = {
    "animations": {
        "0": [0],
            "1": [1],
            "2": [2],
            "3": [3],
            "4": [4],
            "5": [5],
            "6": [6],
            "7": [7],
            "8": [8],
            "9": [9],
            "10": [10],
    }
}

var canvas = document.getElementById("canvas");
var stage = new createjs.Stage(canvas);

createjs.Ticker.addListener(stage);

var image = new Image();
image.src = "http://www.kadrmasconcepts.com/blog/wp-content/uploads/2011/05/robin.png";

var Animaciones = {
    images: [image],
    frames: {
        width: 240,
        height: 315,
        regX: 120,
        regY: 160
    },
    animations: {}
};

var anim = fromTexturePacker['animations'];

Animaciones.animations['go0to9'] = [anim['0'], anim['9']];
Animaciones.animations['go9to10'] = [anim['9'], anim['10']];
Animaciones.animations['go10to10'] = [anim['10'], anim['10']];

bird = new createjs.BitmapAnimation(new createjs.SpriteSheet(Animaciones));
bird.x = 150;
bird.y = 150;
bird.gotoAndPlay("go0to9");

stage.addChild(bird);

http://jsfiddle.net/xa6Lr/9/

Answer 1

您的问题是您将单帧引用为“动画”并仅使用一个数组。有多种方法可以解决这个问题，请参阅下面的分支：

//either remove the arrays
var fromTexturePacker = {
    "animations": {
            "0": 0,
            "1": 1,
            "2": 2,
            "3": 3,
            "4": 4,
            "5": 5,
            "6": 6,
            "7": 7,
            "8": 8,
            "9": 9,
            "10": 10
    }
}

//OR if you NEED to put single frames into arrays, use this:
Animaciones.animations['go9to10'] = [anim['9'][0], anim['10'][0]];

http://jsfiddle.net/YVyKJ/2/

EaselJS动画系统功能非常强大，我认为通过提供多维数组作为帧，你的动画效果非常好。

为什么画架失败，什么时候用TexturePacker动画，改变小数？

1 个答案: