Également disponible en en.

Démarrer avec Phaser

Tâches

Créer le squelette du projet

1. Créer un répertoire pour votre jeu

2. Télécharger et décompressez le projet de base. L'arborescence doit ressembler à celle-ci.

   jeu
   ├── audio
   ├── data
   ├── images
   ├── index.html
   └── js
   

3. Lancer le serveur web local dans le répertoire racine (voir install guide et consulter la page dans un navigateur.

   Si vous utilisez l'éditeur Brackets, le module Aperçu en direct est amplement suffisant.

Initialiser Phaser

1. Notre jeu HTML5 va se servir de l'élément <canvas> pour dessiner. Phaser peut en créer un pour nous au démarrage. Il nous faut lui fournir l'élément conteneur ainsi que les dimensions de la zone de dessin (960✕600).

   Pour ce faire, modifier js/main.js et y ajouter la portion suivante qui va initialiser Phaser.

   window.onload = function () {
     let game = new Phaser.Game(960, 600, Phaser.AUTO, 'game');
   };
   

   Phaser.AUTO va tenter d'utiliser un contexte de type WebGL plus performant qu'un simple canvas 2D.

2. Rafraîchir le navigateur, un carré noir devrait apparaître.

   

Vérifications

Avant de passer à l'étape suivante, vérifiez que:

• Vous pouvez accéder au fichier index.html depuis votre navigateur
• et qu'un carré noir apparait dans la page.

Téléchargement

Êtes-vous bloqué? Jetez un œil au code source de cette étape.