How to load the next scenes of sprite character when it reach the specific end x-axis instead of sequence function?

Hi everyone, I have used time delay to stop my walk sprite character and proceed to next sprite which is standing character through sequence function & time delay. My problem is, when I try to view on another computer, It exceed to the desired x position of character.

here’s my code

var walk = cc.CallFunc.create(function(node)
{
speed = 6; //speed of walk
this.walkAnim();
this.scheduleUpdate();
}, this);

var standing = cc.CallFunc.create(function(node)
{
this.stop(walk); //from walkAnim function
this.standing();
}, this);

this.runAction(
cc.Sequence.create(
walk,
cc.DelayTime.create(5), //time delay
standing,
}
}

Instead of using time delay, Is it possible to stop “walk sprite animation” and proceed to next scene which is “standing animation” when it reached to the specific X position?

Sorry for my English and Thank you in advance and GOD bless.

Hi, Jonathan,

It’s not reliable to use time delay to achieve what you want. In fact you can simply observe sprite’s position and trigger the action when you need.
I noticed that you used scheduleUpdate to your sprite, then it’s easy. In your update function which should be called every frame, you must control your sprite’s position. So when the position equals to the specific X position, you can do the following

this.stop(walk); //from walkAnim function 
this.standing();

Hope that’s what you need

Huabin

Hi Huabin, yes I tried it inside in scheduleUpdate function but it seems standing sprite doesn’t work the animation. =(

here’s my standing sprite code

var standingSprite = [];
standing:function(){
        var size = cc.Director.getInstance().getWinSize();
        this.item = cc.TextureCache.getInstance().addImage(image);
        var aSprite = cc.Sprite.createWithTexture(this.item, cc.rect(0, 0, 1296, 280));
        aSprite.setPosition( cc.p(x, y) );
        this.addChild(aSprite, sequence_number);

        var animFrames = [];
        for(var x = 0; x < action; x++)
        {
            var frame = cc.SpriteFrame.createWithTexture(this.item, cc.rect(x*distance, 0, width, height));
            animFrames.push(frame);
        }

        var animation = cc.Animation.create(animFrames, 0.15);
        var animate = cc.Animate.create(animation);
        aSprite.runAction(cc.RepeatForever.create(animate));
        standingSprite.push(aSprite);
    }, 



*and here's my code that i put inside the scheduleUpdate function*
 update:function() 
    {
               var size = cc.Director.getInstance().getWinSize();

                          var walkSprites = moveSprite;  
                          for(var i = 0;i< walkSprites.length;i++){  
                          var selSprite = walkSprites[i];
                            //alert(selSprite);
                            var handX = selSprite.getPosition().x + speed;
                            var handY = selSprite.getPosition().y;
                            selSprite.setPosition(cc.p(handX, handY));

                            _if(handX >= end){
                                this.stop(this.walk());
                                this.standing()
                            }_
}

Hi, Jonathan

There are some mis-understanding of the usage of our engine in your implementation.
For your problem, the thing is that you recreate a sprite and play its animation(maybe standing animation). But you never changed the existing sprite.

Other notes,

  1. standing is a function to make a sprite stand, the creation of the sprite shouldn’t be its responsibility.
  2. In update, you check for each walking sprite’s position, but you call a function standing without passing the sprite which should be stopped, the standing function need to know that. Same for stop function, I don’t understand why you pass this.walk() as a parameter.

If you want some tutorials, this page shows you almost all functionalities of cocos2d-html5 and how to use them, hope you enjoy it.
http://cocos2d-x.org/npm/cocos2d-html5/index.html

Huabin

Sorry for I didn’t clarify my code correctly. My problem maybe I mistaken what you want to mean. Can you elaborate it by coding?

By the way, I have uploaded here my myApp file that contains my code.

Really thanks to you Huabin for the help and suggestion link you gave. GOD BLESS

standingSprites: [],
walkSprites: [],
animation: null,
init: function() {
    var animFrames = [];
    for(var x = 0; x < action; x++)
    {
        var frame = cc.SpriteFrame.createWithTexture(this.item, cc.rect(x*distance, 0, width, height));
        animFrames.push(frame);
    }
    this.animation = cc.Animation.create(animFrames, 0.15);

    // First sprite
    this.addASprite();
}
addASprite: function() {
    var size = cc.Director.getInstance().getWinSize();
    this.item = cc.TextureCache.getInstance().addImage(image);
    var aSprite = cc.Sprite.createWithTexture(this.item, cc.rect(0, 0, 1296, 280));
    aSprite.setPosition( cc.p(x, y) );
    this.addChild(aSprite, sequence_number);

    var animate = cc.Animate.create(this.animation);
    aSprite.runAction(cc.RepeatForever.create(animate));
    this.walkSprites.push(aSprite);
},
standAndStop:function(sprite){
    // stand
    sprite.stopAllActions();
    // stop
    var index = this.walkSprites.indexOf(sprite);
    if( index != -1 ) {
        this.walkSprites.splice(index, 1);
        this.standingSprites.push(sprite);
    }
}, 
update:function() 
{
    var size = cc.Director.getInstance().getWinSize();

    for(var i = 0;i< this.walkSprites.length;i++){  
        var selSprite = this.walkSprites[i];
        var handX = selSprite.getPosition().x + speed;
        var handY = selSprite.getPosition().y;
        selSprite.setPosition(handX, handY);

        if(handX >= end){
            this.standAndStop(selSprite);
        }
    }
}

Just for showing you the logic, I haven’t tested the code