Phaser

Phaser est un framework JavaScript open source pour créer des jeux 2D qui tournent dans le navigateur. Il s'occupe de tout ce qui est pénible à écrire soi-même : la boucle de jeu à 60 images par seconde, le rendu WebGL (avec repli sur Canvas), la physique, les collisions, le clavier, la souris, le tactile, les animations de sprites, le son et la caméra. Un jeu Phaser est une page web : il se partage avec un simple lien et fonctionne sur ordinateur comme sur mobile.

Ce cours utilise Phaser 4, la version actuelle. Si vous connaissez Phaser 3, l'API de jeu est presque identique : scènes, physique Arcade, tilemaps et tweens s'écrivent de la même façon. Les changements de la v4 concernent surtout le moteur de rendu.

Ce qu'on va construire

Star Runner est un jeu de plateforme classique :

• un personnage qui court, saute, et dont le saut est agréable à contrôler
• un niveau plus large que l'écran, avec caméra qui suit le joueur
• des plateformes traversables par le dessous
• des pièces à ramasser, des pics, des slimes qui patrouillent et qu'on écrase en leur sautant dessus
• trois vies, un chronomètre, un score et un record sauvegardé
• un menu, une pause, un écran de fin
• des particules, des secousses de caméra et des sons
• des boutons tactiles sur mobile

Chaque chapitre ajoute une fonctionnalité de Phaser au jeu :

Prérequis

Des bases de JavaScript : variables, fonctions, objets, classes, modules. Si ce n'est pas encore le cas, la formation JavaScript couvre tout ce dont vous aurez besoin, en particulier le chapitre sur les classes et this.

Installez Node.js en version LTS, puis vérifiez :

node --version
npm --version

Créer le projet

On utilise Vite comme serveur de développement : il recharge le jeu instantanément à chaque sauvegarde et produit une version optimisée pour la mise en ligne.

mkdir star-runner
cd star-runner
npm init -y
npm install phaser
npm install -D vite

Dans package.json, ajoutez le type module et les scripts :

{
  "name": "star-runner",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "phaser": "^4.2.1"
  },
  "devDependencies": {
    "vite": "^8.3.1"
  }
}

La page HTML ne contient qu'un conteneur pour le jeu :

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Star Runner</title>
    <style>
      html, body { margin: 0; height: 100%; background: #000; }
      #game { width: 100%; height: 100%; }
    </style>
  </head>
  <body>
    <div id="game"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Premier programme : un carré qui bouge

Avant de structurer le jeu, un premier fichier minimal pour comprendre le principe :

import Phaser from 'phaser'
 
class Demo extends Phaser.Scene {
  create() {
    this.carre = this.add.rectangle(100, 270, 60, 60, 0xffec27)
    this.fleches = this.input.keyboard.createCursorKeys()
  }
 
  update(time, delta) {
    const vitesse = 300 * (delta / 1000)
    if (this.fleches.left.isDown) this.carre.x -= vitesse
    if (this.fleches.right.isDown) this.carre.x += vitesse
  }
}
 
new Phaser.Game({
  type: Phaser.AUTO,
  parent: 'game',
  width: 960,
  height: 540,
  backgroundColor: '#1d2b53',
  scene: Demo,
})

npm run dev

Ouvrez l'URL affichée (en général http://localhost:5173) et utilisez les flèches.

Le cycle de vie d'une scène

Tout jeu Phaser est découpé en scènes : menu, niveau, écran de fin… Chaque scène a des méthodes appelées automatiquement :

Le paramètre delta est le temps écoulé depuis l'image précédente, en millisecondes. Multiplier les vitesses par delta rend le mouvement identique sur un écran à 60 Hz et sur un écran à 144 Hz. La physique Arcade, qu'on utilisera dès le chapitre 4, fait ce calcul pour nous.

La configuration du jeu

Voici la configuration finale de Star Runner. On y reviendra au fil des chapitres ; pour l'instant, les scènes importées n'existent pas encore.

import Phaser from 'phaser'
import { BootScene } from './scenes/BootScene.js'
import { PreloadScene } from './scenes/PreloadScene.js'
import { MenuScene } from './scenes/MenuScene.js'
import { GameScene } from './scenes/GameScene.js'
import { UIScene } from './scenes/UIScene.js'
import { PauseScene } from './scenes/PauseScene.js'
import { GameOverScene } from './scenes/GameOverScene.js'
 
const config = {
  type: Phaser.AUTO,
  parent: 'game',
  width: 960,
  height: 540,
  backgroundColor: '#5fcde4',
  pixelArt: true,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 1200 },
      debug: new URLSearchParams(location.search).has('debug'),
    },
  },
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
  },
  scene: [BootScene, PreloadScene, MenuScene, GameScene, UIScene, PauseScene, GameOverScene],
}
 
export default new Phaser.Game(config)

Les options importantes :

• type: Phaser.AUTO choisit WebGL si disponible, sinon Canvas
• width et height définissent la résolution logique du jeu : 960 × 540, soit du 16/9
• pixelArt: true désactive le lissage des images, indispensable pour un style pixel
• physics active le moteur Arcade avec une gravité vers le bas
• debug s'active en ajoutant ?debug à l'URL : les corps physiques s'affichent en couleur, précieux pour comprendre une collision ratée
• scale adapte le jeu à la taille de la fenêtre en gardant les proportions
• scene liste les scènes ; la première démarre automatiquement

Arborescence finale

star-runner/
├── index.html
├── package.json
├── public/
│   └── levels/
│       └── level1.json
└── src/
    ├── main.js
    ├── record.js
    ├── sfx.js
    ├── objects/
    │   ├── Player.js
    │   └── Slime.js
    └── scenes/
        ├── BootScene.js
        ├── PreloadScene.js
        ├── MenuScene.js
        ├── GameScene.js
        ├── UIScene.js
        ├── PauseScene.js
        └── GameOverScene.js

Le dossier public/ est servi tel quel par Vite : un fichier public/levels/level1.json est accessible à l'URL levels/level1.json.

Le projet complet est téléchargeable en archive à la fin du chapitre 8, pour comparer votre code ou repartir d'une base qui fonctionne.

Phaser fournit la boucle de jeu, le rendu et une scène par écran du jeu ; notre travail consiste à remplir create et update. Le chapitre suivant crée les premières vraies scènes et génère tous les graphismes du jeu sans un seul fichier image.