Vue d’ensemble de PixiJS

PixiJS

 

Sommaire

1) Présentation
2) Installation
3) Exemples de code et explications
4) Conclusion

 

1) Présentation

PixiJS est une bibliothèque JavaScript 2D open source et multi-plateforme qui utilise WebGL, elle est intéressante à utiliser quand on veut afficher beaucoup d’éléments à l’écran, donc très utile pour faire des jeux ou des expériences visuelles.

Elle a donc plusieurs avantages :

- Elle est multi-plateforme, elle a un code facilement transférable sur tablette, mobile etc. Les plateformes qui ne sont pas en mesure d’utiliser WebGL ne sont pas un problème non plus.

- Elle peut générer du texte stylisé et anti-aliasé et tout ça dans la résolution native d’un écran.

- Elle inclut un support avancé des sprites et inclut donc des fonctionnalités comme par exemple le rognage.

- On peut organiser nos objets de façon hiérarchique avec des relations parent-enfant.

- Tous les éléments que nous rajouterons (sprites, graphiques, polices de caractères, animations) pourrons être chargés et traités par PixiJS.

- On peut utiliser des technologies comme Cordova qui nous permettront de déployer un projet Pixi en tant qu’application.

- On peut créer nos propres filtres et shaders WebGL pour les intégrer dans nos projets.

- Elle supporte le « multi-touch » qui permet d’interagir avec un matériel informatique par l’intermédiaire de plusieurs points de contact, ce qui est parfait pour les appareils tactiles comme les smartphones ou les tablettes.

- Un point très important est que Pixi est, en plus d’être puissant, facile à utiliser et à mettre en place. Pixi a été pensé pour être facilement accessible aux différents types d’écrans.

 

2) Installation

Pour installer PixiJS il suffit d’aller sur le site officiel www.pixijs.com et de cliquer sur le bouton « Download » vous serez ensuite redirigé sur la page Git du projet PixiJS, une fois sur cette page allez voir le « Readme.md » juste en dessous des fichiers qui composent le projet, dans ce fichier il vous sera proposé plusieurs possibilités pour installer Pixi.

Dans la section « Setup » le lien « prebuilt build » (https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build) vous donnera la possibilité de télécharger simplement un prebuilt, il suffit de copier un des liens pour ensuite l’intégrer dans une balise « <script> » en prenant soin de modifier « <branch-or-tag-name> » selon la version que l’on veut.
Par exemple si je veux la version « dev » alors je devrais intégrer le lien comme suit :

PixiJS version dev

Toujours dans la section « Setup » une deuxième possibilité pour installer Pixi vous sera proposée, elle utilise la commande « npm ». Si vous n’avez pas encore « npm », installez-le (Sous Ubuntu : « sudo apt-get install npm ») et dans le terminal tapez la ligne suivante :
« npm install pixi.js »

Une autre solution proposé est de télécharger Pixi via « cdnjs », il suffira alors d’ ajouter la balise « <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script> » au fichier dans lequel on veut intégrer PixiJS. Pour choisir la version que l’on veut intégrer il suffira de changer la partie du lien qui correspond, en l’occurrence « 4.5.1 ».

Exemple :

PixiJS via cdnjs

Sous Linux une autre possibilité consiste en une commande « wget » qui nous permet de télécharger directement sur notre machine PixiJS.

Exemple pour télécharger la version « dev » sous Ubuntu :

« wget -P $HOME/Téléchargements/ "https://pixijs.download/dev/pixi.js" »

Cette commande téléchargera directement dans le dossier « Téléchargements » la version « dev » du fichier « pixi.js ».

 

3) Exemples de code

Voici un petit code basique pour pouvoir commencer à prendre en main PixiJS :

Code basique avec PixiJS

Dans ce code nous créons d’abord un objet « PIXI.Application » que l’on stocke dans la variable « app ». Ensuite on crée le nouvel enfant « app.view ».

Pour ajouter un sprite on charge la texture avec « PIXI.loader » et on lui donne l’alias « king », ensuite dans notre loader on crée une variable qui contiendra notre sprite en utilisant « Pixi.Sprite » puis on change sa taille grâce à « king.scale.set() », on le centre dans le rendu avec « king.x » et « king.y », on crée une ancre au milieu du sprite avec « king.anchor.x » et « king.anchor.y » et enfin on l’ajoute à notre scène avec « app.stage.addChild(king) ».
Pour terminer on écrit une fonction qui nous permettra d’écouter chaque mises à jour de l’image « app.ticker.add() » et à chaque image on tourne un peu notre sprite en incrémentant « king.rotation ».

Voici le rendu :

Rendu

Le prochain code sera assez similaire à celui vu précédemment mais au lieu de faire tourner notre sprite nous allons le rendre « interactif » pour que l’on puisse cliquer dessus.

Code sprite interactif

Dans ce code il n’y a pas grand-chose de nouveau, on rend notre sprite interactif avec « sprite.interactive », on change l’apparence du curseur quand il est sur notre sprite grâce à « sprite.buttonMode » et on écrit un événement qui, au clic de la souris, appellera la fonction « onClick » qui agrandira notre sprite.

Notez qu’en créant notre « PIXI.Application » on peut changer sa largeur, sa hauteur ou encore sa couleur de fond. On utilise « PIXI.settings.SCALE_MODE » pour conserver la pixellisation lorsque l’image sera agrandi, si il avait été omis, Pixi aurait anti-aliasé l’image. Autre remarque, nous créons notre sprite différemment du code vu précédent en utilisant « PIXI.Sprite.fromImage() ».

Maintenant à chaque clic sur le sprite il s’agrandira.

Rendu :

Rendu sprite interactif

Maintenant nous allons voir comment nous pouvons ajouter du texte que l’on aura stylisé avec Pixi.

Code texte stylisé avec Pixi

On commence par créer une variable qui contiendra le style que l’on appliquera à notre texte en créant un nouveau « PIXI.TextStyle » on pourra ainsi donner une police, une taille, un dégradé, une ombre à notre texte. On peut aussi faire en sorte que le texte s’affiche sur plusieurs lignes en mettant « wordWrap » à « true » et en jouant sur sa taille.

Ensuite il ne nous reste plus qu’à créer un « PIXI.Text » qui aura comme paramètres notre texte et le style que nous avons préalablement écrit.

Rendu :

Rendu texte stylisé avec Pixi

Maintenant nous allons voir comment créer un « container » qui nous permettra d’y mettre des textures.

Code container Pixi

Nous commençons par créer un nouveau container avec « PIXI.Container », on crée une texture à partir d’une image puis on fait une boucle dans laquelle on fait un nouveau sprite à partir de notre texture puis on fait les calculs pour faire notre grille avant de l’ajouter à notre container.

Mais pourquoi faire un sprite à partir de notre texture ?

Tout simplement parce que le sprite a plusieurs informations dont la position, l’échelle (taille), la rotation et la transformation, alors que la texture est tout simplement l’image en elle-même sans toutes ces informations. Donc un sprite sera en quelque sorte dessiné tandis que la texture ne se composera que de l’image qu’on lui aura donné.

Rendu :

Rendu container Pixi

Avec Pixi on peut aussi dessiner des formes comme des ronds, des rectangles, des courbes, etc...

Voici un petit exemple :

Dessiner avec Pixi

On peut donc dessiner avec Pixi en utilisant « PIXI.Graphics() », on lui précise qu’on ne veut pas de contour avec « graphics.lineStyle(0) » puis on lui donne la couleur de remplissage et on commence à dessiner un rond avec « graphics.drawCircle() » qui a en paramètres l’axe x, l’axe y et la taille. Ensuite on dessine un rectangle avec « graphics.Rect() » qui a en paramètres l’axe x, l’axe y, la largeur et la hauteur. On crée plusieurs autres rectangles avant d’arrêter le remplissage « graphics.endFill() » avec la couleur qu’on lui avait spécifié et on l’ajoute à notre scène.

Rendu :

Rendu d'un dessin avec Pixi

Pixi peut aussi lire des vidéos et c’est aussi facile que d’ajouter une texture.

Code vidéo Pixi - partie 1

Ici on crée simplement un bouton avec « PIXI.Graphics » qui nous permettra de lire la vidéo, on le centre, on le rend interactif et on modifie l’apparence du curseur, on l’ajoute à la scène et enfin on écoute le clic de la souris ou la pression du doigt sur l’écran grâce à « pointertap » pour appeler la fonction « play ».

Code vidéo Pixi - partie 2

Après le bouton on écrit notre fonction qui nous permettra de démarrer la vidéo. On détruit d’abord le bouton car nous n’en avons plus besoin, ensuite on crée une texture depuis notre vidéo (et oui c’est vraiment aussi simple), on crée un sprite avec cette texture pour pouvoir la modifier à notre convenance, on met notre sprite en plein écran et enfin on l’ajoute à la scène.

Quand on cliquera sur notre bouton la vidéo commencera et le bouton disparaîtra.

Rendu :

Rendu vidéo Pixi

Maintenant nous allons voir comment faire un glisser-déposer sur des sprite à la souris ou au doigt.

Code glisser-déposer Pixi - partie 1

On crée une texture à partir d’une image, on fait une boucle qui va appeler la fonction « createKing » avec comme paramètres deux nombres pris au hasard pour qui correspondront à l’axe x et y du sprite. Dans notre fonction « createKing » on crée notre sprite à partir de notre texture, on le rend interactif, on modifie l’apparence du curseur quand il est sur lui puis on met une ancre au milieu du sprite. Ensuite on lui attache des événements « pointer » qui permettront l’écoute du clic de la souris ou du doigt, on le positionne avec les valeurs passées en paramètres et enfin on l’ajoute à la scène.

Code glisser-déposer Pixi - partie 2

Dans la fonction « start » on stocke une référence aux données dans « this.data », ça nous permettra de gérer les différents points de pression sur un appareil tactile. Ensuite on passe « this.dragging » à « true » ce qui nous permettra de faire glisser notre sprite puis on l’agrandi un peu histoire de rendre l’événement plus évident quand on clique dessus.

Dans la fonction « end » on fait un peu l’inverse de ce qu’on a fait dans la fonction « start », on met « this.dragging » à « false », on met les valeurs dans « this.data » à « null » et on remet notre sprite à la taille normale.

Dans la fonction « move » on dit que si on fait glisser le sprite alors on met à jour sa position, tout simplement.

Rendu :

Rendu glisser-déposer Pixi

On peut aussi faire des filtres plutôt amusant avec Pixi. Dans cet exemple nous allons voir comment faire un filtre qui floute un de nos sprite, comme si on faisait le point sur un élément.

Code filtre Pixi - partie 1

On crée un nouveau sprite qui sera l’image de fond, on lui donne la taille de l’application puis on l’ajoute à la scène.
On crée un sprite qui sera notre premier personnage, on le positionne, on lui donne une taille et on l’ajoute à la scène. On fait pareil pour le deuxième personnage.

Code filtre Pixi - partie 2

On crée nos deux filtres de flou avec « PIXI.filters.BlurFilter », on les ajoute aux filtres de nos sprites. Nous créons un compteur que l’on initialise à « 0 », dans notre fonction on incrémente le compteur puis on crée deux variables, une qui stockera le cosinus de la valeur du compteur et une autre qui contiendra son sinus. Enfin on règle l’intensité du flou avec « filter.blur ».

Ce code aura pour effet de flouter un personnage puis de flouter l’autre personnage en rendant l’autre clair et en alternant entre les deux.

Rendu :

Rendu filtre Pixi

4) Conclusion

PixiJS est une bibliothèque puissante et assez facile à prendre en main, elle est performante et permet d’afficher beaucoup d’éléments en même temps en gardant un aspect fluide.

C’est donc une bibliothèque très utile quand le CSS ne suffit plus ou alors quand il devient assez compliqué à manier, PixiJS facilite grandement le développement de visuels multi-plateformes car elle prévoit des fonctionnalités qui prennent en compte plusieurs types d’appareils, ce qui est un gain de temps non négligeable.

Laisser un commentaire

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