How and Where to use Phaser Tweens?

[kstamatov85]

Hi guys, in my game I have an arrow, which should rotate all the time from 50deg to -50deg starting from 0 deg.

It should do that with the given timing. My code looks like:

// POINTER TWEEN            GH.g_pointerTween = _this.game.add.tween(GH.g_pointer)            .to({angle: -_this.pointer_rotation_angle}, 400, Phaser.Easing.Linear.None)            .to({angle: 0}, 400, Phaser.Easing.Linear.None)            .to({angle: _this.pointer_rotation_angle}, 400, Phaser.Easing.Linear.None)            .to({angle: 0}, 400, Phaser.Easing.Linear.None)            .loop().start();

The question is if that is the correct approach for using the tween for that kind of purpose?

I noticed that the tween lags a bit and wondering is it more efficient way to achieve it?

 

And one more, when user hit the target I would like to show animated notification:

scorePoint : function() {        var pointText = this.add.text(200, 200, "\n  +1  \n");        var pointTextTween = this.game.add.tween(pointText)            .to({y: 100}, 800, Phaser.Easing.Linear.None)            .to({alpha: 0, y: 50}, 400, Phaser.Easing.Linear.None)            .start();        pointTextTween.onComplete.add(function() {            pointText.destroy();            this.game.tweens.remove(pointTextTween);        }, this);    },

Since I'm creating a local scope variables for the text and tween all for single use, is this the correct approach

for solving that issue?

Can I reuse the tween without initialized it every time when I call the function and remove it after it finish?

 

Thank you in advanced and sorry for the noobie questions!

 

 

 

 

 

 

 

[Skeptron]

Maybe the answer of Rich on this topic : http://www.html5gamedevs.com/topic/15873-rotation-of-a-sprite-around-a-fixed-point/ could interest you. Instead of tweens he uses proper sprite rotation, which is, he says, more efficient. Much more easy to stop / reuse at least!

[kstamatov85]

Thanks, but in update function I cant control the timing accurately

[tips4design]

Maybe the answer of Rich on this topic : http://www.html5gamedevs.com/topic/15873-rotation-of-a-sprite-around-a-fixed-point/ could interest you. Instead of tweens he uses proper sprite rotation, which is, he says, more efficient. Much more easy to stop / reuse at least!

 

Is it really more efficient? I always thought of tweens as something related to the UI, which doesn't necessarily do processing every frame. (same way the rendering occurs less often while the FPS is low, but the physics still runs at 60FPS)

[Skeptron]

I've always read everywhere that tweens are costly and should be avoided if possible.

[Skeptron]

Thanks, but in update function I cant control the timing accurately

 

How so? 

[kstamatov85]

Like full cycle of the tween is 800ms. Can i control that in update?

[Skeptron]

Put your 800ms and the date of the start of the animation into variables, and then at each update make the sprite rotate if the date is not expired. To know the angle of the rotation you can retrieve the deltaTime elapsed since last update, but I can't remember how (see the docs), so that you can evaluate the angle by seeing how long it's been since last update.

 

It's very simple but it may require a few variables and some testing.

[kstamatov85]

Put your 800ms and the date of the start of the animation into variables, and then at each update make the sprite rotate if the date is not expired. To know the angle of the rotation you can retrieve the deltaTime elapsed since last update, but I can't remember how (see the docs), so that you can evaluate the angle by seeing how long it's been since last update.

 

It's very simple but it may require a few variables and some testing.

 

Good one, I will try it

[drhayes]

FWIW, I don't believe the "tweens are costly" hype -- most of them are calculated up front so the per frame cost is pretty minimal. A tween on position is doing the same calculations as the physics system is every frame. I'm open to being corrected, though.

[kstamatov85]

FWIW, I don't believe the "tweens are costly" hype -- most of them are calculated up front so the per frame cost is pretty minimal. A tween on position is doing the same calculations as the physics system is every frame. I'm open to being corrected, though.

 

It is what I mostly need to know. How costly the tweens are and according to the 'performance price' where and with what purpose we should use them?

Another one is if I run one time tween should I remove it from the global scope?

Example case:

scorePoint : function() {        var pointText = this.add.text(200, 200, "\n  +1  \n");        var pointTextTween = this.game.add.tween(pointText)            .to({y: 100}, 800, Phaser.Easing.Linear.None)            .to({alpha: 0, y: 50}, 400, Phaser.Easing.Linear.None)            .start();        pointTextTween.onComplete.add(function() {            pointText.destroy();            this.game.tweens.remove(pointTextTween); // IS THIS CORRECT ???        }, this);    },

[drhayes]

Weeeeeelllll... I think it depends. JS is garbage collected so you'd *think* you'll be okay but, in reality, if you make and throw away too many objects the GC will stop the world (and your game) to clean up. That's never what you want.

 

But I don't know of an absolute measure of an object's "heaviness" with respect to the GC. I just wait for GC problems to show up and go hunting.

 

On the other hand, if I know I'm going to re-use a tween or an emitter I keep them around, either in a state or a plugin. For example, I fade out and fade in when loading levels. This happens every time the player changes levels. So I keep those tweens and graphic objects around for the life of the game.