cocos2d-js moveTo and animate action

Question

I have a moveTo sprite action and I am trying to have the sprite animate while moving. It is a waling animation.

My trouble is I can make the sprite moveTo or animate but not both together so that when the sprite stops moving the animation goes back to the standing frame.

I am using cocos2d-js v3.0

this.sprite = new cc.Sprite.create("#player-stand-f-0");
this.sprite.setPosition(new cc.Point(300,300));
this.addChild(this.sprite);

    var animFrames = [];
    var str = "";
    for (var i = 0; i < 5; i++) {
        str = "player-walk-f-" + i;
        var spriteFrame = cc.spriteFrameCache.getSpriteFrame(str);
       var animFrame = new cc.AnimationFrame();
        animFrame.initWithSpriteFrame(spriteFrame, 1, null);
        animFrames.push(spriteFrame);
    }

var animation = cc.Animation.create(animFrames, 0.025);
var animate   = cc.animate(animation);

sprite_action = cc.MoveTo.create(2,cc.p(x,y));
this.sprite.runAction(sprite_action);
this.sprite.runAction(animate);

I have also tried the following but the walking would animate once and not continue until moveTo stops.

var seq = cc.sequence(animate, sprite_action);

Do the actions work if you call them separately? I mean, have you tried commenting out only one of the `runAction` calls to see if they work as expected if the other one is not called? — Sebastián Vansteenkiste, Sep 22 '14 at 13:53
If yes, have you tried `cc.spawn(animate, sprite_action)`? (Offtopic: note that `cc.spawn()` equals `cc.Spawn.create()`, and this is true for all other actions. The `.create()` methods are deprecated) — Sebastián Vansteenkiste, Sep 22 '14 at 13:59
yes actions run separately. They run together in the sequence also but the animation only loops once and not for the duration of the move — Keith Power, Sep 22 '14 at 16:17
Yes I have tried the .spawn and the animation only runs one loop as with sequence — Keith Power, Sep 22 '14 at 16:32
Bloop. All I can think of is asking in the official forums then. Guys over there have a better understanding of the inner workings of the framework. — Sebastián Vansteenkiste, Sep 24 '14 at 15:18
I did yes. No answer though. I would have thought this would come up quite often and have a solution :-( — Keith Power, Sep 25 '14 at 17:11

score 9 · Accepted Answer · edited Apr 13 '20 at 00:09

If you use "cc.sequence" action it will animate first then move. But if you want to animate the sprite sheet while moving it, there are two ways to achieve that:Look into "cc.Spawn" action. It is used for the purpose just like you need. Another convenient method is to run two actions concurrently.. Below mentioned code will give you the idea.

    // create sprite sheet
    cc.SpriteFrameCache.getInstance().addSpriteFrames(spritesheet_plist); // add Spritesheet Plist 
    var SpriteSheet = cc.SpriteBatchNode.create(spritesheet_png);  // add Spritesheet Png
    this.addChild(SpriteSheet,1);

    // Push the frames for animation
    var animFrames = [];
    for (var i = 0; i < 6; i++) {
        var str = "sequence_" + i + ".png";
        var frame = cc.SpriteFrameCache.getInstance().getSpriteFrame(str);
        animFrames.push(frame);
    }


    // taadaa ...!!  Animate the sprites
    var animation = cc.Animation.create(animFrames, 0.06);
    var sprite = cc.Sprite.createWithSpriteFrameName("sequence_0.png");
    sprite.setAnchorPoint(0.5,0.5); // optional
    sprite.setScale(1.0,1.0); // optional
    sprite.setPosition(widhthPostion, heightPosition);
    sprite.runAction(cc.RepeatForever.create(cc.Animate.create(animation)));
    SpriteSheet.addChild(sprite,1);


    // Move the sprite
    var actionMove = cc.MoveTo.create(duration, cc.p(destinationX, destinationY));
    sprite.runAction(actionMove);

thanks for the reply but my question was how would I stop the walking animation once the move is completed? his walking animation should start when the move starts and finishes when he reaches the xy — Keith Power, Sep 29 '14 at 18:47
Instead of "sprite.runAction(cc.RepeatForever.create(cc.Animate.create(animation)));" use var animate = cc.RepeatForever.create(cc.Animate.create(animation)); then in move action add call function var actionMoveDone = cc.CallFunc.create(function(node) { sprite.stopAction(animate); }, this); sprite.runAction(cc.Sequence.create(actionMove, actionMoveDone)); — Aritra Das, Sep 30 '14 at 15:36

cocos2d-js moveTo and animate action

1 Answers1

Linked