Простая анимация листа спрайтов в Cocos2d-JS

На основе helloworld-example и cocos-2d-x docs (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

Ничего не показывает. Но если я вставлю последнюю строку и поставлю вторую последнюю, то это покажет вращающийся спрайт. (кеш кадра спрайта загружен правильно)

Чего не хватает?


animation sprite-sheet cocos2d-js
person Michael    schedule 17.04.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема была двоякой. Во-первых, для анимации должна быть определена текстура, а во-вторых, если это должна быть непрерывная анимация, то тип AnimFrames должен иметь тип animationFrame. Рабочий код выглядит следующим образом (поместите в функцию ctor примера helloworld):

// 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);
person Michael    schedule 18.04.2014