이미지를 조각으로 나누는 easeljs

Question

저는 easeljs를 처음 접했고 이미지를 주어진 개수만큼 어떻게 나눌 지 궁금합니다. 지금까지 수집 한 내용에서 SpriteSheets를 사용하여이를 수행해야합니다. 그러나 내가 본 적이있는 자습서는 하나의 Spritesheet에 여러 이미지가있는 자습서입니다. 하나의 이미지를 여러 이미지로 나누어 SpriteSheet에 넣는 것은 아닙니다.

var data = { 
    images: ["/images/teemo.png"], 
    frames: {width:50, height:50} 
    }; 
    var spriteSheet = new createjs.SpriteSheet(data); 
    console.log(spriteSheet); 
    console.log(spriteSheet[frames]); 
    var frames = spriteSheet[frames]; 
    console.log(frames); 
    for (var i=0; i<frames.length; i++){ 
    var bmp = new createjs.Bitmap(SpriteSheet[frames][i]); 
    } 

Answer 1

spritesheet 흥미로운 방법 (정말 클래스의 의도는 아니지만)입니다 : 이 지금까지 (내가 제대로 아직 spriteSheet 배열에 액세스 할 수 있기 때문에 변수 프레임이 정의되지 않은 것을 알고) 내 코드입니다 . 귀하의 사용법은 잘못된 것입니다.

1. Spritesheet 만들기
2. 각 각 인스턴스를 표시하도록 같은 SpriteSheet 인스턴스
3. 사용 sprite.gotoAndStop (프레임)을 가리키는, 스프라이트 인스턴스 생성 (EaselJS 0.6.1에 BitmapAnimation라는 및 이전 버전) 당신은 또한 작물

   for (var i=0; i< numberOfImages; i++) { 
       var sprite = new createsjs.Sprite(spriteSheetData); 
       sprite.gotoAndStop(i); 
       stage.addChild(sprite); 
       // Other stuff 
   } 
   

   : 다른 조각

여기

은 예입니다 Bitmap과 자르기 영역을 정의하기 위해 Rectangle을 취하는 sourceRect 속성을 사용하여 이미지 조각을 만듭니다. 위의 방법과 거의 동일하지만 각 Rectangle 치수를 결정할 때 더 많은 작업이 필요할 수 있습니다.

건배.