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,
- standing is a function to make a sprite stand, the creation of the sprite shouldn’t be its responsibility.
- 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