AS3 : Comment faire défiler un score grâce aux Tweens et aux Getter / Setter

22 décembre 2015

Suite à l’article ou j’expliquai comment fonctionnent les getter / setter,

Je vais expliquer ici, de quelle manière ils peuvent être combinés avec les tweens pour obtenir de nouveaux résultats.

Cas d’exemple : Tweener un score grace aux getter / setter

Comme c’est souvent le cas à la fin d’un level de mario par exemple, nous voulons indiquer au joueur combien de points il a gagné.

Mais plutot que de l’afficher de manière brute. Nous allons afficher un champ texte qui affiche 0 au début, puis dont le contenu augmente progressivement, jusqu’à afficher le score voulu. Cet effet est omniprésent dans le monde du jeu vidéo.

Comment faire ?

Nous avons besoin d’une classe qui encapsule le champ texte, nous la nommerons TextFieldTween

package  
{
    import flash.display.Sprite;
    import flash.text.TextField;
   
    public class TextFieldTween extends Sprite
    {
        private var _tf:TextField;
       
        public function MyClass() {
           
            _tf = new TextField();
            addChild(_tf);
        }
       
    }
}

Voici donc une classe toute simple, qui hérite de la classe Sprite, c’est donc un objet que l’on peut ajouter à la display list. Cette classe contient elle même un TextField nommé _tf.

Le setter / getter

Nous allons maintenant créer une propriété, gérée par des getter / setter, qui permettra de controller la valeur du champ texte.

private var _textValue:int = 0;

public function set textValue(_val:int):void
{
    _textValue = _value;
    _tf.value = String(Math.round(_val));
}
public function get textValue():int
{
    return _textValue;
}

Remarquez que le setter de textValue ne fait pas que modifier la valeur de la propriété, mais change également la valeur du champ texte.
Vous remarquerez également que j’ai arrondi la valeur de textValue, j’expliquerai pourquoi plus bas.
Cela permet déjà, depuis l’exterieur, de faire :

myOccurence.textValue = 8;

pour changer la valeur du textField.

Faire défiler la valeur grâce à une tween

Maintenant, il ne reste plus qu’à combiner cela avec des tween pour obtenir l’effet désiré.
Car la magie des tweens, c’est qu’on les utilise en général pour des propriétés standards (x, y, alpha)
mais qu’on peut aussi les utiliser avec des propriétés customisées créées via des getter / setter

public function showScoreTween(_value:int):void
{
    var _myTween = new Tween(this, "textValue", None.easeNone, 0, _value, 2.0, true);
}

Voici la ligne de code magique tant attendue,
nous appelons une tween sur l’objet courant, en indiquant la propriété textValue (que nous avons créé nous même via un getter / setter), et demandons de faire défiler (« tweener ») cette propriété de la valeur 0 jusqu’a la valeur demandée en argument.

La tween va donc se charger d’appeler, autant de fois que nécéssaire le setter de textValue, ce qui aura pour effet de faire défiler la valeur dans le champ texte.

Note 1 : la tween va fournir des valeurs décimales au setter, il est donc important d’arrondir la valeur avant de l’afficher dans le champ texte.

Note 2 : On peut avoir l’impression que le getter n’est pas utilisé ici, mais il est en réalité nécéssaire, car la classe Tween a également besoin de consulter la valeur de la propriété textValue pour ses calculs.

Le code complet :

package  
{
    import flash.display.Sprite;
    import flash.text.TextField;
    import fl.transitions.easing.None;
    import fl.transitions.Tween;
   
    public class TextFieldTween extends Sprite
    {
        private var _tf:TextField;
        private var _textValue:int = 0;
       
        public function MyClass() {
           
            _tf = new TextField();
            addChild(_tf);
        }
       

        public function set textValue(_val:int):void
        {
            _textValue = _value;
        }
        public function get textValue():int
        {
            return _textValue;
        }
       
        public function showScoreTween(_value:int):void
        {
            var _myTween = new Tween(this, "textValue", None.easeNone, 0, _value, 2.0, true);
           
           
        }
    }
}

3 comments on “AS3 : Comment faire défiler un score grâce aux Tweens et aux Getter / Setter

  1. […] Les getter / setter recèlent un autre interêt tout particulier, lié aux tween dont je parle ici : Faire défiler un score grâce aux Tween et au getter / setter. […]

  2. thehunter dit :

    Très bon tuto, je n’avais jamais pensé à utiliser les tween comme ça, ça ouvre à plein de possibilités :O

  3. BobbuBrowne dit :

    Hello! Cool post, amazing!!!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *