Introduction

---

Phaser est un framework HTML5 pour créer des jeux pour les navigateurs Web et les smartphones. Phaser est spécialisé dans le traitement 2D. Pour l'aspect 3D, pour le moment il faut voir avec des bibliothèques externes, le temps que le framework intègre sa propre partie 3D. Phaser supporte WebGL pour le rendu dans les navigateurs et suit l'évolution technologiques (SpecialFX, Glow, Shine, Bloom), une gestion simplifiée du chargement des assets avec plus de 30 formats différents ainsi qu'un moteur de rendu physique. Phaser supporte les sprites, une gestion des particules, des vidéos, des images et bien d'autres encore comme les animations et la gestion des entrées par clavier, souris, touch...

Pour utiliser Phaser Vous devez disposer d'un serveur web. Le serveur Web local est la bonne solution pour faire des tests sinon vous pouvez utiliser un VPS avec un Nginx/Apache mais la contrainte de devoir mettre à jour régulièrement les informations est importante. Il est donc plus simple d'utiliser un serveur web local comme celui fourni par Python avec python -m SimpleHTTPServer ou celui disponible avec PHP par php -S localhost:8000.

Pour s'éviter de charger le code source de Phaser, il est plus simple d'utiliser l'inclusion depuis un CDN :

//  Un-minified
https://cdnjs.cloudflare.com/ajax/libs/phaser/3.87.0/phaser.js
https://cdn.jsdelivr.net/npm/phaser@v3.87.0/dist/phaser.js

//  Minified
https://cdnjs.cloudflare.com/ajax/libs/phaser/3.87.0/phaser.min.js
https://cdn.jsdelivr.net/npm/phaser@v3.87.0/dist/phaser.min.js

Rendez-vous toujours sur le site de Phaser https://phaser.io/download/stable pour obtenir les derniers liens de téléchargement du framework.

Hello World

---

Faire un hello world avec Phaser doit permettre de s'assurer que l'on peut afficher un événement graphique dans un canvas HTML5 normalement géré par votre navigateur web préféré.

Liens utiles

https://phaser.io

Structure de Phaser

---

Phaser reposant sur Javascript/TypeScript, nous allons utiliser les capacités objet du langage à notre faveur. Phaser requiert un objet de configuration qui va notamment contenir les dimensions de la scène de jeu ainsi que les fonctions liées à la scène, notamment les fonctions requises pour gérer le préchargement (preload()), la création (create()) et la mise à jour de l'affichage (update()).

var config = {
    type: Phaser.AUTO, // valeur par défaut qui va tenter WebGL avant de tenter Canvas si le navigateur ne supporte pas WebGL
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

La fonction preload() va contenir les assets que nous allons précharger et utiliser durant le jeu.

function preload ()
{
    this.load.image('sky', 'assets/sky.png');
    this.load.image('ground', 'assets/platform.png');
    this.load.image('star', 'assets/star.png');
    this.load.image('bomb', 'assets/bomb.png');
    this.load.spritesheet('dude', 
        'assets/dude.png',
        { frameWidth: 32, frameHeight: 48 }
    );
}

Nous allons précharger 4 images et une spritesheet, chacunes identifiées par un nom et un chemin physique. Ce nom sera utilisé lors des appels ultérieurs aux objets dans javascript. Essayez de mettre des noms qui recensent convenablement le contenu pour pouvoir s'y retrouver facilement. La spritesheet définit les dimensions de chaque bloc d'objet graphique par les cariables frameWidth et frameHeight

Pour afficher une image nous passons par la fonction create(). Les coordonnées de l'image à afficher sont données par rapport au centre de l'image. Puisque notre scène fait 800 x 600 nous affichons l'image (également en dimensions 800 x 600) de fond au centre donc en position 400 x 300. Pour simplifier nous pourrions utiliser la fonction setOrigin(0, 0) pour recaler le point d'insertion en (0, 0) sur l'image à copier (propriétés originX et originY en Phaser 3).

Lors de la mise en place de l'affichage, rappelez-vous que Phaer utiliser l'algorithme du peintre donc les premières images seront recouvertes par les suivantes.

function create ()
{
    this.add.image(400, 300, 'sky');
    this.add.image(400, 300, 'star');
}