easeljs가 실패한 이유, TexturePacker로 애니메이션을 할 때 소수점 이하 자릿수를 변경하는 이유는 무엇입니까?

Question

문제가 easeljs 오류인지 또는 내가 잘못 (아주) 가능성이 있는지 알 수 없습니다. TexturePacker 객체로 애니메이션을 만들 때, 소수 자리수가 다른 숫자 사이의 배열 위치에있는 애니메이션은 표시되지 않습니다. (예 : 9-10, 100-99.) 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

문제는 "애니메이션"로 하나의 프레임을 참조하고를 사용하는 것입니다 배열은 단지 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 애니메이션 - 시스템 꽤 강력, 나는 당신 애니메이션으로 일하는만큼 놀라운 말할 것입니다 다차원 배열을 프레임으로 제공합니다.