cocos2d-jscocos2d-html5

cocos2d-js moveTo and animate action


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);

Solution

  • 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);