why easeljs fails, when does animations with TexturePacker, at change the number of decimals?

Question

I don't know if the problem is a easeljs fault or if I'm doing something wrong (quite possibly). When I do animations with TexturePacker object, the animations that are in array positions between numbers with different number of decimals, don't display. (ex. 9 to 10, 99 to 100)

The code example in 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

Your issue is that you are referencing single frames as "animations" and use an array for just 1 frame. There are multiple ways of how this will work, see my fork below:

//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/

The EaselJS Animation-System is pretty powerfull, I'd say it's amazing enough that you animation was working by supplying a multi-dimensional array as frames.