enchant.js - 3e partie

Dans ce premier exemple (les sources sont toujours au même endroit), on va voir comment afficher une image. Pour cela, revenons au premier tutoriel. J’avais fait un game.rootScene.addChild(new Sprite(32,32)); sans expliquer. Et ben c’est aussi simple que ça : on crée une instance de Sprite et on l’ajoute à quelque chose. Le souci, c’est que dans cet exemple, ça affiche une image vide… Pour vraiment afficher une image, le mécanisme va rester le même : on crée une instance de Sprite en lui donnant des dimensions, on lui dit quelle image afficher et on l’ajoute à une scène.

Pour pouvoir afficher une image dans le sprite, le mieux, c’est de précharger l’image avec game.preload(urlDeLImage); puis de mettre cette image sur l’attribut image de notre instance en utilisant notreSprite.image = game.assets[urlDeLImage];.

Voilà donc ce que ça donne :

game.preload('../images/chara1.png');
game.onload = function() { 
    var player = new Sprite(200, 200);
    player.image = game.assets['../images/chara1.png'];
    game.rootScene.addChild(player);
};

Quand on spécifie à Sprite des dimensions plus grandes que celles de l’image chargée, enchant.js répète l’image comme on peut le voir dans ce premier exemple.

À l’inverse, si on spécifie des dimensions plus petites, l’image sera tronquée. Dans cet exemple, on voit aussi que pour spécifier où afficher l’image, on utilise les attributs x et y du Sprite :

player.x = 100;
player.y = 50;

L’origine du sprite — le point en haut à gauche —, sera positionné à 100 pixels à droite, et 50 pixels plus bas que l’origine de la scène sur laquelle il est placé.

Comment faire pour choisir quelle portion de l’image afficher ? Il y a au moins deux façons de faire. La première, c’est d’utiliser les attributs _frameLeft et _frameTop. En fixant ces deux valeurs, on dit à partir de quels pixels on doit découper l’image, en partant d’en haut à gauche (son origine étant 0×0). Par exemple, pour afficher le deuxième et troisième personnage de la troisième ligne, il faut découper une image de 64 de large par 32 de haut, en partant du 32e pixel d’en haut et du 64e de la gauche.

On fait donc un player1 = new Sprite(64, 32); pour découper l’image aux bonnes dimensions, puis player1._frameLeft = 32; et player1._frameTop = 64; pour découper la bonne portion de l’image.

Une autre façon de faire, et d’utiliser l’attribut frame. On a vu que l’image chargée est découpée en un rectangle aux dimensions du Sprite. En fait, elle est découpée en plusieurs rectangles, collés les uns aux autres. Quand on a affiché le sprite, on a en fait affiché le premier rectangle, la frame 0. Pour afficher le rectangle d’à côté, il suffit de faire player.frame = 1.

Dans ce quatrième exemple, l’image chara1.png est découpée en un carré de 32×32 (Sprite(32, 32)), puis on décale le carré en indiquant quelle frame afficher (player.frame = i+j*5;). J’ai rajouté un label avec le numéro de la frame sur chaque sprite si ce n’est pas suffisamment clair.

On peut donc faire en sorte que notre personnage « marche » en changeant le carré à afficher à chaque nouvelle frame du jeu. Pour cela, on peut passer à l’attribut frame une liste de valeur. En faisant player.frame = [0, 1, 0, 2]; la frame de l’image affichée sera 0 à la première frame du jeu, puis 1 à la seconde, puis 0, 2, et recommencera au début : 0 à la cinquième, puis 1, 0, 2, 0, 1, 2…

Pour ne plus qu’il fasse du surplace, on peut utiliser addEventListener('enterframe'...) pour changer sa position, et l’arrêter s’il va trop loin.

player.addEventListener('enterframe', function(){
    if (player.x > 50) player.frame = 8;
    else {
        player.x+=2;
        player.y+=3;
    }            
});

Bon, ça commence à ressembler à quelque chose. Mais comment on fait pour le faire partir dans l’autre sens ?

Pour inverser gauche/droite et haut/bas, c’est comme pour le faire changer de taille : on utilise scale(), scaleX, ou scaleY. L’attribut scaleX indique quelle est la mise à l’échelle sur la largeur du sprite : une valeur de 2 indique que le sprite est 2 fois plus large que normalement. À l’inverse, si on fixe scaleX à 0.5, le sprite sera deux fois moins large. Si on a modifié sa taille, et que l’on veut la doubler, il faudrait faire player.scaleX*=2; puis player.scaleY*=2;. À la place, on peut utiliser la méthode scale : player.scale(2, 2); qui va multiplier la valeur de scaleX et scaleY par 2. Quand on veut changer le sens d’un sprite sur l’axe des x, il faut donc faire player.scale(-1, 1);, quelque soit le sens.

De la même façon, on peut faire tourner le sprite. Soit en valorisant l’attribut rotation, soit en utilisant la méthode rotate(). Les angles de rotations sont en degrés. Comme pour la mise à l’échelle, si on fait .rotate(45) deux fois de suite, on aura un .rotation à 90°.

La rotation, comme pour la mise à l’échelle, se fait à partir de (sprite.x, sprite.y). Si on veut changer ça, il faut modifier l’origine en changeant les attributs .originX et .originY.

Pour modifier les attributs .scaleX, scaleY, on a la méthode .scale(). Pour modifier les attributs .rotateX, .rotateY, on a la méthode .rotate(). Pour modifier .x, .y, il existe aussi une méthode. Ou plus exactement, deux : .moveBy() et .moveTo(). La première permet de déplacer le sprite par rapport à sa position :

player.x += 1;
player.y += 1;

et

player.moveBy(1, 1);

sont donc équivalent.

De même, pour déplacer le sprite à (100, 100), on peut faire indifféremment :

player.x = 100;
player.y = 100;

ou

player.moveTo(100, 100);

Toutes ces méthodes sont montrées dans l’exemple 7.

Si on ne peut pas utiliser un fichier image, mais plutôt dessiner un rectangle, des lignes… il faut créer une instance de Surface et associer l’image du sprite à cet instance :

surface.context.stokeStyle = "Red"; 
surface.context.lineWidth = 8;
surface.context.rect(10, 10, 30, 80);
surface.context.fillStyle = "rgb(150, 150, 150)";
surface.context.fill();
surface.context.stroke();
sprite.image = surface;

Surface.context permet en fait d’accéder à l’API Canvas (mozilla.org). Quelques fonctionnalités sont montrées dans l’exemple 8.

Il nous restera deux trois choses à voir pour les sprites, mais on attendra un prochain tutoriel. La prochaine fois, on va voir de nouveaux événements, notamment pour pouvoir s’amuser avec le clavier et la souris !