enchant.js - 7e partie

Supposons que l’on veuille déplacer un sprite d’un point A à un point B sur une certaine période de temps. Il va falloir : prendre en compte la distance entre les deux points, le taux de frame par seconde, et calculer de combien le sprite doit se déplacer. Le « plugin » timeline permet de faire ça plus simplement : il permet de contrôler les entités suivant le temps (et aussi suivant les frames). En faisant un_sprite.tl.setTimeBased(), on indiquera un temps dans les méthodes du plugin, alors que par défaut (ou avec un_sprite.tl.setFrameBased()) on indiquera un nombre de frames.

Par exemple, bear.tl.moveTo(250, 250, 2000); fera bouger bear vers le point (250, 250) en 2 secondes ou en 2000 frames (de la même manière, il existe moveBy qui permet de se déplacer d’un certain nombre de pixels). On peut également faire tourner (rotateTo et rotateBy), mettre à l’échelle (scaleTo et scaleBy) ou alors régler l’opacité du sprite (fadeIn, fadeOut et fadeTo) de la même façon.

Ce qui est pratique, c’est qu’on peut enchaîner les instructions :

bear.tl.moveTo(250, 250, 2000).scaleTo(-1, 1, 250)
     .moveTo(10, 10, 2000).scaleTo(1, 1, 250);

On se déplace, se tourne, puis on retourne au point de départ, et on se remet dans le bon sens. Cela n’empêche en rien l’ajout d’écouteur comme on peut le voir dans l’exemple 2.

Dans l’exemple suivant, on voit que les méthodes loop, delay et then font ce que leur nom indique : loop permet de répéter à l’infini une séquence, delay permet de temporiser et then permet l’appel à une fonction. (Pour arrêter la boucle, on peut utiliser unloop.)

Si on veut enchaîner les appels à delay/then :

bear.tl.delay(30).then(une_fonction).
    delay(15).then(function{}(
        dosomething(foo));).
    delay(10).then(function{}(
        this.anotherthing(););

on peut utiliser cue à la place :

bear.tl.cue({
    30: une_noction,
    45: function{}(do_something(foo)),
    55: function{}(this.anotherthing())
});

Dans l’exemple 4, on a deux sprites qui se comportent de façon identique, l’un avec delay/then, l’autre avec cue.

On a vu précédemment, que bear.tl.moveTo(250, 250, 2000).scaleTo(-1, 1, 250) permettait au sprite de se déplacer, puis de se retourner. Si on veut faire les deux actions en même temps, on peut soit utiliser la méthode tween :

bear1.tl.tween({
    x: 250,
    y: 250,
    scaleX: 2,
    rotation: 45,
    opacity: 0.5,
    time: 2000});

qui permet de faire toutes ces opérations en même temps, soit utiliser la méthode and :

bear2.tl.delay(2000).moveTo(250, 10, 3000).and().
    scaleTo(3, 1, 4000).and().
    fadeTo(0.5, 100);

qui permet de chaîner les instructions (et également de mettre des durées d’action différentes) comme le montre l’exemple 5.

La ligne de temps est en fait gérée sous forme de queue. Et quand on fait bear.tl.moveBy(10,10,10); la timeline est retournée. On peut donc soit enchaîner les actions sur une même ligne, soit les mettre sur plusieurs :

bear.tl.moveBy(10,10,10).rotateTo(90,100);
//est équivalent à
bear.tl.moveBy(10,10,10);
bear.tl.rotateTo(90,100);

On peut aussi arrêter/redémarrer la ligne de temps :

bear1.on('touchstart', function(){
    if (flag){
        bear1.tl.pause();
    }else{
        bear1.tl.resume();
    }
    flag = !flag;

});

Et attendre un événement avec la méthode waitUntil qui prend en argument une fonction qui va retourner vrai au bout d’un moment ce qui permet de passer à l’action d’après :

bear3.tl.waitUntil(function(){
    bear3.moveBy(1,1);
    return bear3.x>200;
}).moveTo(150, 150, 1000).waitUntil(function(){
    return flag;}).moveTo(200, 200, 1000);

Ici, bear3 va se déplacer d’un pixel par un pixel, et lorsque qu’il aura dépassé la borne, il ira en (150, 150), puis attendra que flag soit à true et se déplacera à nouveau.

Il existe encore d’autres méthodes, mais on ne va pas les voir (je vous invite à regarder le code source), à part la méthode action qui prend comme paramètre la durée d’exécution de l’action (avec time), une fonction d’initialisation, une fonction de fin, et une fonction à exécuter durant l’exécution de l’action :

bear2.tl.delay(1000).action({
        time: 2000,
        onactionstart: function(){
            lbl.text = "ça commence";
            bear2.tl.show();
        },
        onactionend: function(){
            lbl.text = "c’est fini";
            bear2.tl.removeFromScene();
        },
        onactiontick: function(){
            lbl.text = "c’est en cours";
            bear2.x++;
            bear2.opacity -= 1 / 60;
        }
});

Ces trois derniers points sont regroupés dans l’exemple 6.

Pour terminer, on va s’intéresser à un argument que prennent la plupart de ces méthodes. On peut en effet contrôler la vitesse d’exécution des animations (easings.net). Pour cela on ajoute la fonction en dernier paramètre :

sprite.tl.moveBy(100, 100, enchant.Easing.QUAD_EASEOUT).
      fadeTo(0.5, enchant.Easing.SWING)

Les différentes fonctions possibles sont montrées dans l’exemple suivant.

Le plugin ui définit un certain nombre de classes comme une croix directionnel, un pad analogique, la création de bouton, et moultes autres choses bien sympathiques. On va voir la plupart.

Dans le dossier examples/plugins d’enchant.js, il y a des exemples pour ces deux plugins, ainsi que pour avatar (animation d’avatar), box2d (pour la physique 2D), gl (pour utiliser webgl, ce qui permet entre autre de faire de la 3D), widget (pour avoir des boutons, menu de navigation, etc.) ou encore wiiu (pour jouer sur la Wii U). Mais ça, je vous laisse regarder par vous-même.