Thursday, May 15, 2008

Tweener for games: Updating Amounts

Following up on the Tweener for games tutorials, this time we will see how to update amounts gradually using Tweener to make them look nice & smooth.

As an example we can see my game GAIA - Guess Who? where the score is updated gradually instead of in one step (immediately) adding more to the user's experience and making the game more playable and enjoyable. Trust me, these little details can make a difference ;)

Update amounts gradually using Tweener:
What I've got on stage is a dynamic textfield with instance name "txtScore".
To give it a value, we declare a variable called myScore:

var myScore : Number = 100;
txtScore.text = myScore;

If you run the movie, your txtScore shows 100.
Nothing exiting I know... :P

Because we need to update this amount when a certain event happens, then we add a button, we will call it mcAddBonus.
Now let's use tweener to update the score adding a 50 points bonus:

import caurina.transitions.Tweener;

var myScore : Number = 100;
txtScore.text = myScore;

mcAddBonus.onRelease = function() : Void
{
Tweener.addTween(this._parent, {myScore:myScore + 50, time:1, onComplete:function() { txtScore.text = Math.round(myScore); }});
}


Testing the movie, whenever we press our button after a second myScore updates by 50.
Still nothing special :(
but, how about if we use the tweener onUpdate parameter instead of onComplete?
the onComplete only updates our score when the tween has finished but as we saw on the previous example, onUpdate updates the value gradually before the tween finishes.
Let's change the code:

import caurina.transitions.Tweener;

var myScore : Number = 100;
txtScore.text = myScore;

mcAddBonus.onRelease = function() : Void
{
Tweener.addTween(this._parent, {myScore:myScore + 50, time:1, onUpdate:function() { txtScore.text = Math.round(myScore); }});
}



Sweet!
I must say I love Tweener, is a great tool :)
and this is the example:






salut!

1 comment:

felisan said...

hi Ernesto.
this is very nice info.
even though having used Tweener for more than a year, I had never noticed the onUpdate-parameter..
..so to me this is very useful.

I've commented a bit further on the subject:
http://felisan.wordpress.com/2008/06/30/as3-tweener-onupdate-parameter/

keep the good posts comin'
:O)