PixiJS, le moteur WebGL 2D (et canvas) le plus populaire

L'intitulé de mon premier poste en tant que développeur (en dehors de mes missions de freelance) était : Game Developer.

Mon rôle était de développer des outils d'apprentissage basés sur des jeux et des activités interactives sur le web et le mobile pour de grandes entreprises françaises.

C'est à cette époque que j'ai découvert PixiJS, que j'ai beaucoup utilisé pour faire ces jeux en HTML5 et que je vous présente aujourd'hui.

C'est quoi Pixi ?

PixiJS est la bibliothèque (et non pas un framework) de moteur de rendu WebGL la plus populaire en Javascript.

On l'assimile souvent à un moteur de création de jeux en HTML5, mais il faut bien comprendre que Pixi ne contient que la partie "moteur graphique", et même si la bibliothèque embarque quelques mécaniques d'intéraction avec la souris, elle n'embarque aucun moteur physique (collision, gravité, etc...).

Ce qui signifie que si vous voulez l'utiliser pour créer un jeu, il faudra vous même programmer les notions de physiques (même basiques) de votre jeu.

Il existe beaucoup de tutoriels pour ça sur le web, et sinon vous pouvez passer par un moteur de création de jeu complet comme PhaserJS !

Qu'est-ce que WebGL ?

WebGL, qui signifie "Web Graphics Library", est une API de programmation graphique intégrée dans les navigateurs web et dont le rendu s'affiche sur un élément HTML de type "canvas", inspirée de la bibliothèque généraliste OpenGL.

Vous le savez, un canvas web est une toile blanche sur laquelle on va pouvoir venir importer et dessiner des éléments graphiques de manière programmatique (avec du code).

Mais au lieu d'utiliser l'API de dessin fournie pour le canvas, on va pouvoir utiliser une API plus poussée (celle de WebGL) qui va notamment permettre au navigateur d'exploiter les ressources de la carte graphique de la machine pour effectuer les calculs graphiques (ce que l'on appelle l'accelération matérielle) plutôt que d'utiliser les ressources du CPU (processeur central).

Pour une même animation graphique, celle créé avec WebGL sera donc plus optimisée, le rendu sera plus rapide et surtout plus fluide.

Pourquoi utiliser Pixi ?

Même si WebGL vous offre une librairie pour vulgairement "dessiner" sur cette toile blanche qu'est le canvas, tout écrire à la main directement avec cette API peut être très long et le code devient vite très lourd à maintenir.

Pixi va donc permettre d'abstraire une grande quantité de ce code pour vous fournir une API plus synthétique, mais aussi plus "complète". Par exemple la bibliothèque va vous apporter des notions de "containers"(pour regrouper plusieurs éléments graphiques entre eux), d'animation de sprites, d'intéractions, etc...

Pour vulgariser, imaginez que WebGL c'est Microsoft Paint, et que Pixi c'est Photoshop, pour un même résultat, les efforts déployés sont très différents !

Voici donc quelques avantages qu'offre Pixi :

• Une API complète mais facile d'accès
• Compatible avec la majorité des navigateurs (IE11 et plus) et mobile
• Fallback en canvas si WebGL désactivé
• Intéractions souris et tactiles intégrées (clic, drag&drop, etc...)
• De nombreux plugins
• ...

Comment on l'utilise ?

Vous allez voir que l'utilisation de Pixi est vraiment abordable pour la plupart des développeurs web et ne demande qu'une connaissance au final assez basique de Javascript.

Bien sûr comme tous les moteurs de rendu graphique, la complexité peut très vite augmenter selon le projet.

Ci-dessous, vous trouverez un petit exemple (tiré de la documentation de Pixi et légèrement customisé) d'une animation intéractive, contenant une image qui tourne et qui grossie lorsque vous cliquez dessus.

J'aurais pu vous montrer un exemple de jeu, mais j'ai préféré vous présenter la librairie avec un exemple de code simple !

Si vous voulez découvrir d'autres exemples, il y en a beaucoup sur le site officiel, et certains sont vraiment impressionants par rapport à la taille du code pour les produire !

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
<script type="text/javascript">
    // Scale mode for all textures, will retain pixelation
    PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
    
    const app = new PIXI.Application({ backgroundColor: 0xf1c40f,width: 300, height: 300, view: document.getElementById("canvas") });
    const sprite = PIXI.Sprite.from('/content/size/w100/2020/02/IMG_1989.jpg');
    // Set the initial position
    sprite.anchor.set(0.5);
    sprite.x = app.screen.width / 2;
    sprite.y = app.screen.height / 2;
    // Opt-in to interactivity
    sprite.interactive = true;
    // Shows hand cursor
    sprite.buttonMode = true;
    // Pointers normalize touch and mouse
    sprite.on('pointerdown', onClick);
    
    app.stage.addChild(sprite);

    function onClick() {
        sprite.scale.x *= 1.1;
        sprite.scale.y *= 1.1;
    }
    
    // use delta to create frame-independent transform
    app.ticker.add(function(delta){
        sprite.rotation -= 0.01 * delta;
    });
</script>

Pour commencer à utiliser Pixi, je vous invite à vous rendre sur la documentation officielle, et vous pourrez commencer à vous amuser en quelques minutes : https://www.pixijs.com/