Tween -> run function -> tween

[Terumi]

Hello, 

 

Is it possible to tween an object, run a function, and then tween again in a sequenced fashion?

What I want to achieve basically is to tween a sprite out of the stage, teleport it to certain x/y and tween it again back to stage...

 

 

Thank you.

 

[powerfear]

//tween out of stagevar tween = game.add.tween(object);tween.to({x: 1000}, 2000);tween.onComplete.add(foobar, this);tween.start();function foobar() {    //teleport somewhere    object.x = -100;    //tween back to stage    var two = game.add.tween(object);    two.to({x: 300}, 2000);    two.start();}

Something like that?

[Terumi]

Yeah, but I should pass a variable (the teleport x/y/whatever) to the foobar function.

Is this possible?

[powerfear]

I don't think you can pass parameter to the function but you could use a simple variable if you simply want to modify it whitin the same scope if not you can make it global.

//variablevar x = -100;//if you need it in a complete different scope you can also make it global likewindow.globalstorage = {};globalstorage.x = -100;//tween out of stagevar tween = game.add.tween(object);tween.to({x: 1000}, 2000);tween.onComplete.add(foobar, this);tween.start();function foobar() {//teleport somewhereobject.x = x;//or if you need globalobject.x = globalstorage.x;//tween back to stagevar two = game.add.tween(object);two.to({x: 300}, 2000);two.start();}

[Terumi]

Yeah, that could be done that way but it looks cubersome if you want for example to animate multiple properties or something.

Wouldn't be nice to have the tween accept an object for the parameters you want to use in the callback functions?

 

something like

 

tween.onComplete.add(foobar, this, {obj: mySprite, var1: val1, var2: val2});

 

and then, on the foobar function

 

function foobar(attrs){

var obj = attrs.obj;

var myCustomValue = attrs.val1

etc,,,

}

 

That would be very helpful I think.

[mjablonski]

Just capture the required variables via the context:

tween.onComplete.add(new function() { foobar({obj: mySprite, var1: val1, var2: val2});}, this);

and then:

function foobar(attrs){...}

HTH, Maik

[Mattias]

On a related note, if you chain several .to() 's together, then use the onComplete on the last .to(), it seems it thinks it is complete when the first .to() has finished.

Is there a way for the onComplete to be complete and run the callback after the last .to() has finished?

[Chris]

Terumi: you nearly had the solution.

 

When you call 

tween.onComplete.add(foobar, {obj: mySprite, var1: val1, var2: val2});

you are passing an object as the scope for "this" in the event.

So inside the method foobar, you will be able to access this.obj, this.var1, this.var2, and so on.

There is no need to encapsulate anything in an additional method.

 

To wrap it up, here's poweroffear's code - slightly modified to access your custom properties from the callback function:

//tween out of stagevar tween = game.add.tween(object);tween.to({x: 1000}, 2000);tween.onComplete.add(foobar, {obj: object, targetX: 10, targetY: 10});tween.start();function foobar() {    //teleport somewhere    this.obj.x = this.targetX;    this.obj.y = this.targetY;}

[Mattias]

Found another thread with a solution to my question:

http://www.html5gamedevs.com/topic/1651-tween-oncompletecallback/?p=12702

 

 

 

tween._lastChild.onComplete.add(this.theEnd, this);

 

For those who are interested

[Terumi]

thank you people!