Cocos2d-JS의 간단한 스프라이트 시트 애니메이션

Question

helloworld-example과 cocos-2d-x 문서 (http://www.cocos2d-x.org/wiki/Sprite_Sheet_Animation)를 기반으로 간단한 스프라이트 시트 애니메이션을 만들려고했습니다. 코드는 다음과 같습니다.

this.mostafa = cc.Sprite.create(res.Mostafa_png);   
this.mostafa.attr({ 
    x: size.width/3, 
    y: size.height/3, 
    scale: 0.2, 
    rotation: 180 
}); 
this.addChild(this.mostafa, 0); 
var rotate = cc.RotateTo.create(2, 0); 

cc.spriteFrameCache.addSpriteFrames(res.Mostafa_plist); 

var animFrames = []; 
var str = ""; 
for (var i = 1; i < 9; i++) { 
    str = "mosquito_fly" + (i < 10 ? ("0" + i) : i) + ".png"; 
    var frame = cc.spriteFrameCache.getSpriteFrame(str); 
    animFrames.push(frame); 
} 
var animation = cc.Animation.create(animFrames, 0.04); 
var animate = cc.Animate.create(animation); 

this.mostafa.runAction(animate); // shows nothing 
//this.mostafa.runAction(rotate); // shows turning sprite 

아무런 표시가 없습니다. 하지만 마지막 줄을 넣고 두 번째 마지막 줄을 치면 회전하는 스프라이트가 나타납니다. (스프라이트 프레임 캐시가 올바르게로드 됨)

무엇이 누락 되었습니까?

Answer 1

두 가지 문제가있었습니다. 먼저 애니메이션에 대해 정의 된 텍스처가 있어야하며 두 번째로 연속 애니메이션이어야하는 경우 animFrames 유형이 animationFrame이어야합니다. 근로 코드합니다 (HelloWorld 예제의 ctor에 기능에 넣어) 다음과 같습니다

// Create sprite and set attributes 
    this.mostafa = cc.Sprite.create(res.Mostafa_single_png);   
    this.mostafa.attr({ 
     x: size.width/3, 
     y: size.height/3, 
     scale: 0.5, 
     rotation: 0 
    }); 
    this.addChild(this.mostafa, 0); 

// Load sprite frames to frame cache, add texture node 
    cc.spriteFrameCache.addSpriteFrames(res.Mostafa_plist); 
    var mostafaTexture = cc.textureCache.addImage(res.Mostafa_png), 
     mostafaImages = cc.SpriteBatchNode.create(mostafaTexture); 
    this.addChild(mostafaImages); 

    var animFrames = []; 
    var str = ""; 
    for (var i = 1; i < 9; i++) { 
     str = "mosquito_fly" + (i < 10 ? ("0" + i) : i) + ".png"; 
     var spriteFrame = cc.spriteFrameCache.getSpriteFrame(str); 
     var animFrame = new cc.AnimationFrame(); 
      animFrame.initWithSpriteFrame(spriteFrame, 1, null); 
     animFrames.push(animFrame); 
    } 
    var animation = cc.Animation.create(animFrames, 0.08, 100); 
    var animate = cc.Animate.create(animation); 

    this.mostafa.runAction(animate); 

Answer 2

junk = this; 
cc.spriteFrameCache.addSpriteFrames("res/e.plist"); 
spriteSheet = new cc.SpriteBatchNode("res/e.png"); 
junk.addChild(spriteSheet,15); 

var animFrames = []; 
for (var i = 1; i < 19; i++) { 
    var str = "e/e"+i+".png"; 
    var frame = cc.spriteFrameCache.getSpriteFrame(str); 
    animFrames.push(frame); 
} 
var animation = new cc.Animation(animFrames, 0.1); 
runningAction = new cc.RepeatForever(new cc.Animate(animation)); 

mask = new cc.Sprite("#e/e1.png"); 
mask.attr({ 
    x: 400, 
    y:105, 
    anchorX: 0.5, 
    anchorY: 0.5, 
    scale:0.5 
}); 
spriteSheet.addChild(mask,25); 
mask.runAction(runningAction)