Prendre en main pixi.js 1 Posons les bases…

Maxime Batto

Prendre en main pixi.js Dans ce tutoriel, nous réaliserons un mini jeu pour apprendre les bases de la librairie pixi.js. Nous nous familiariserons entre autre avec la scène, les Sprite, les animations, les interactions avec l’utilisateur ou encore les collisions. Pixi.js est un moteur de rendu HTML5 crée en 2013 par GoodBoy. Il permet entre autre de réaliser des animations en détectant automatiquement si le rendu doit être en WebGL ou en Canvas. Cette bibliothèque Javascript est particulièrement rapide et puissante, ce qui en fait un outil performant et presque indispensable pour réaliser un jeu en 2D par exemple. C’est d'ailleurs l’objet de ce tutoriel. Avant de commencer, vous devez bien sûr télécharger la librairie ici : http://www.pixijs.com/ Voici les images que j’utiliserai durant cet article :

Notre ami Hubert :

et son plat favoris, le poisson :

1 Posons les bases… Pour faire du bon javascript, il faut partir sur une bonne base HTML, la voici : pixi.js Tuto body { margin: auto; padding: 0; background-color: #000000; width:500px; }

Quelques petites precisions: - On centre bien le jeu et on met un fond noir car celui-ci sera dans des tons clairs - Et bien sûr, on n’oublie pas d’inclure la librairie pixi.js

Maxime Batto

2 La mise en scène Bon, on a les bases, on peut commencer ! On va tout d’abord créer notre scène (stage), et essayer d’avoir un rendu ! // Stage (backgroundColor, animate) var stage = new PIXI.Stage(0xDEF7F7, true); // autoDetectRenderer (width, height, view, transparent) var renderer = PIXI.autoDetectRenderer(500, 700); document.body.appendChild(renderer.view); requestAnimFrame( animate ); function animate() { requestAnimFrame( animate ); renderer.render(stage); }

On crée un stage en fonction d’une couleur de fond (ici un beau bleu clair) et du paramètre animte qui sera à true s’il y a des interactions avec la souris (c’est le cas pour nous). Ensuite on utilise autoDetectRenderer qui crée notre rendu en fonction de sa largeur, sa longueur, du paramètre view qui indique si on utilise un canvas comme vue et de sa transparence. Ces deux derniers sont facultatifs. autoDetectRenderer va également vérifier si le navigateur supporte webGL et dans le cas contraire créera un rendu canvas automatiquement. Puis on ajoute le tout à la page web avec appendChild. Enfin, on lance la fonction animate qui sera la seule à s’exécuter en boucle tout au long du jeu. Si vous ne comprenez pas tout de suite, on aura l’occasion d’illustrer cela plus tard. Une explication s’impose... Pixi.js nécessite WebGL qui, pour des problèmes de sécurité, ne fonctionne pas en local. Donc si vous ne voyez rien, soyez attentifs à ces deux solutions : 1 Changer les fichiers locaux de sécurité : - Firefox : mettre security.fileuri.strict_origin_policy à false dans about:config. - Chrome : ajouter –allowfileaccessfromfiles sur la cible du navigateur (clic droit / propriété) - Internet Explorers : telecharger Chrome ou Firefox 2 Passer par un serveur web (WampServer fait tout à fait l'affaire).

Maxime Batto

3 La gestion des Sprite avec Hubert ! A partir de maintenant, vous devriez voir votre scène dans la couleur que vous avez choisie ! ‘‘Ce fond est incroyablement vide’’ me direz-vous, et vous avez raison ! D’ailleurs, qui dit scène dit acteur, donc ajoutons notre protagoniste ! var stage = new PIXI.Stage(0xDEF7F7, true); var renderer = PIXI.autoDetectRenderer(500, 700); document.body.appendChild(renderer.view); requestAnimFrame( animate ); var texture = PIXI.Texture.fromImage("hubert.png"); var hubert = new PIXI.Sprite(texture); hubert.anchor.x = 0.5; hubert.anchor.y = 0.5; hubert.position.x = 200; hubert.position.y = 10; hubert.scale.x = hubert.scale.y = 1.5; stage.addChild(hubert); function animate() { requestAnimFrame( animate ); renderer.render(stage); }

Décortiquons un peu tout ça…. Tout d’abord on crée une texture à partir d’une image (ici notre très cher Hubert, l’ours polaire). Une texture ne sert à rien si on ne l’applique pas sur un objet, donc on crée notre sprite à partir de cette texture. Une explication s’impose... Les textures : enregistre une image mais ne peut pas être ajouté directement sur la scène, il doit être tracé dans un sprite. Une même texture peut être utilisée sur plusieurs sprite. Les Sprite : La librairie vous permet également d’importer vos propres Sprite. Vous pouvez également utiliser des animations mais il faut au préalable convertir votre Sprite en JSON, je ne m’appesantirai pas plus là-dessus, mais je vous laisse un lien pour apprendre à le faire : http://peepsquest.com/tutorials/creatingSpritesheets.html

On gère ensuite certaines propriétés de ce sprite : - Son ancre ‘anchor’ qui correspond à son centre et qui se règle comme cela : x = 0 y = 0 pour le mettre en haut à gauche du sprite x = 0.5 y = 0.5 pour le mettre au milieu du sprite x = 1 y = 1 pour le mettre en bas à droite du sprite - Sa position ‘position’ sur la scène au début de l’animation (x = 0 y = 0 correspond au coin en haut à gauche). - Sa taille ‘scale’ (ou echelle) que l’on a ici augmenté (largeur et hauteur) de 50 %. Enfin, on ajoute Hubert sur la scène, qui contient maintenant un acteur ! N’est-il pas beau ! Bien sûr, un acteur sans scénario, c’est lassant à regarder… Créons sans plus tarder notre scénario !

Maxime Batto

4 Animons la scène ! Pour commencer, on va faire bouger notre pauvre Hubert que nous allons faire chuter sur toute la hauteur de la scène ! Et puisque c’est un mouvement, on va avoir besoin de notre fonction animate(), qui, comme je l’ai expliqué plus haut, se répète en boucle durant toute l’animation. function animate() { requestAnimFrame( animate ); hubert.position.y += 1; hubert.rotation += 0.05; renderer.render(stage); }

Donc on demande ici que soit exécuté en boucle : - L’augmentation de la position verticale d’Hubert (donc il va descendre puisque le 0 vertical se trouve en haut) - Une légère rotation pour rendre le tout plus fun ! On a maintenant une animation : Hubert l’ours polaire chute lourdement de l’écran ! Pas passionnant à regarder n’est-ce pas… Ajoutons donc un objectif réaliste pour impliquer l’utilisateur comme celui-ci : il doit manger tous les poissons sur l’écran avant d’arriver en bas !

Maxime Batto

5 La génération des poissons Passons donc à la génération des poissons ! La première chose à faire est de créer la texture du poisson, comme on a fait pour Hubert : ... var texture = PIXI.Texture.fromImage("hubert.png"); var texture_poisson = PIXI.Texture.fromImage("poisson.png"); var hubert = new PIXI.Sprite(texture);

... Maintenant qu’on a notre texture, il faut l’appliquer sur un sprite pour la voir. Pour cela, on va créer une fonction qui aura pour rôle de générer un poisson en fonction de sa position (elle sera déterminée aléatoirement pour plus de difficulté). function createFish(x, y) { var poisson = new PIXI.Sprite(texture_poisson); poisson.position.x = x; poisson.position.y = y; poisson.anchor.x = 0.5; poisson.anchor.y = 0.5; poisson.scale.x = poisson.scale.y = 1.5; poisson.interactive = true; poisson.buttonMode = true; return poisson; }

Quelques nouveautés : interactive autorise un sprite à être interactif, ainsi il pourra réagir aux évènements de la souris. buttonMode change le curseur de la souris en main au contact avec le sprite. Enfin return permet d’envoyer l’objet si on appelle la fonction, nous verrons cela plus loin. Notre fonction de génération de poissons est maintenant faite ! Pourtant les poissons n’ont pas apparus sur l’écran… Pas de panique ! C’est normal, il faut encore appeler la fonction ! L’appel ce fait comme ceci : // createFish( position horizontale, position verticale) monPoisson = createFish(500, 500); stage.addChild(monPoisson);

La variable recevra donc ce que retourne la fonction createfish (le fameux return !). Celle-ci sera placée à 500 px de la gauche et à 500 px du haut. Elle est alors affichée à l’écran grâce à addChild que nous avons déjà vu. Ce code affiche donc un poisson, sauf que, nous, on en veut au moins…… 10 ! C’est pourquoi j’ai opté pour placer ce code affichant le poisson dans une boucle, avec quelques petites modifications en conséquence :

Maxime Batto for (var i=0; i < 10; i++) { // createFish( position horizontale, position verticale) window["poisson"+i] = createFish(Math.random() * 446, Math.random() * 646); stage.addChild(window["poisson"+i]); };

Je répète 10 fois la création d’une variable contenant mon poisson, mais il serait trop dur de gérer 10 variables qui ont le même nom ! Alors j’ai trouvé un moyen pour avoir des noms de variable dynamiques. Le compteur i s’ajoute au nom de chaque variable et s’incrémente à chaque fois, donc j’aurais 10 variables nommées : poisson0, poisson1, poisson2…. Poisson9. Une explication s’impose... window[] n’a rien à voir avec pixi.js, c’est du javascript natif…

Je m’explique pour le choix des positions x et y (accrochez-vous) : Je veux que chaque poisson se positionne aléatoirement, c’est pourquoi j’utilise la fonction Math.random()qui retourne aléatoirement un nombre compris entre 0 et 1. Puisqu’on a paramétré la largeur de notre scène à 500 px et sa hauteur à 700 px, on les multiplies par notre nombre aléatoire ce qui fait que celui-ci sera compris entre 0 et 500 pour x, et 0 et 700 pour y. Pour optimiser un peu plus le système, on peut soustraire à x la largeur du poisson et a y la hauteur du poisson pour que celui-ci ne déborde pas hors de l’écran, ce que me donne 446 px et 646 px (vous n’aurez pas forcément les mêmes valeurs, tout dépend des dimensions de votre srpite). Vous devriez maintenant avoir vos 10 poissons générés aléatoirement sur l’écran. Allez-y, faites-vous plaisir, rafraichissez plusieurs fois la page et appréciez votre dur labeur !

Maxime Batto

6 Les évènements de la souris Il ne manque plus grand-chose maintenant ! Passons maintenant à l’avant-dernière étape de ce tutoriel : l’interaction avec la souris. On va donc rajouter ces quelques fonctions dans createFish. ... poisson.mousedown = function(data) { this.data = data; this.alpha = 0.9; this.dragging = true; }; poisson.mouseup = poisson.mouseupoutside = function(data) { this.alpha = 1 this.dragging = false; this.data = null; }; poisson.mousemove = function(data) { if(this.dragging) { var newPosition = this.data.getLocalPosition(this.parent); this.position.x = newPosition.x; this.position.y = newPosition.y; } } return poisson; }

Au moment du clic de la souris (mousedown) on indique qu’il y a une interaction avec data, on baisse l’opacité alpha du poisson, et on permet le déplacement dragging = true. Au relâchement du clic (mouseup) on remet l’opacité à 1, on ne permet plus le déplacement et on indique qu’il n’y a plus d’interaction. Au déplacement de la souris (mousemove), on vérifie si on a cliqué sur un poisson (dans ce cas dragging sera à true) et si c’est le cas, on lui fait suivre la position de la souris que l’on récupère avec getLocalPosition.

Maxime Batto

7 Les collisions Le jeu est pratiquement terminé maintenant ! Il ne manque plus qu’une chose : des collisions. Nous allons faire disparaître les poissons en contact avec Hubert pour faire croire qu’il les a mangés (et oui, je vous ai menti, il ne les mange pas vraiment…). Puisqu’on teste en boucle si il y a des collisions, on va devoir le faire dans la fonction animate, mais comme le code est un peu long et encombrant on va le faire dans une fonction à part que l’on appellera dans animate. Voici donc ma fonction update : var update = function () { for (var i=0; i < 10; i++) { if ( hubert.position.x