Démarrer un projet Phaser (npm + Vite)

Téléchargements

Pour travailler avec Phaser, on va s’appuyer sur npm, le gestionnaire de paquets inclus avec Node.js. Il nous permet d’installer facilement des bibliothèques comme Phaser, sans rien faire à la main.

Grâce à Node.js, on pourra aussi lancer un serveur local sur notre ordinateur pour tester le jeu directement dans le navigateur.
Et le meilleur dans tout ça ? Le serveur recharge automatiquement la page dès qu’on modifie le code.

Autant dire que ça rend le développement beaucoup plus fluide et agréable ! 😄

Vérifier que Node.js et npm sont installés

Avant toute chose, assure-toi que Node.js et npm sont bien installés sur ton ordinateur.
Si ce n’est pas encore le cas, pas de panique, voici comment faire :

Ouvre ton terminal et tape les commandes suivantes :

bash

node -v
npm -v

Si les numéros de version s’affichent, tout est bon !
(mais tu n’auras pas forcément les mêmes que ceux de la capture d’écran)

Vérification de l'installation de Node.js et npm

Petit rappel utile :
Le -v dans la commande npm -v et node -v est une abréviation pour –version.
Il sert simplement à afficher la version actuellement installée.

Si l’une de ces commandes ne fonctionne pas, rends-toi sur le site officiel pour installer Node.js.

Créer un nouveau projet vide

Maintenant que tout est prêt, on va créer le dossier de notre jeu.
Ouvre ton terminal, place-toi à l’endroit où tu veux créer ton projet, puis tape :

bash

mkdir mon-jeu
cd mon-jeu

Ensuite, on initialise un projet Node.js dans ce dossier :

bash

npm init -y

Cette commande va créer automatiquement un fichier package.json, qui servira à gérer les dépendances et les scripts du projet.

Le -y (ou --yes) dans npm init -y permet de répondre “oui” à toutes les questions par défaut.

Normalement, quand on exécute simplement npm init, npm nous demande plusieurs infos comme :

le nom du projet
la version
une description
le fichier d’entrée (entry point)
les tests, le repository, l’auteur, etc.

Avec npm init -y, tout ça est rempli automatiquement avec des valeurs par défaut. Pratique pour aller vite quand on veut juste démarrer un projet sans se prendre la tête. 😄

Voici à quoi ressemble un fichier package.json tout juste créé :

bash

{
  "name": "mon-jeu",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Tu pourras toujours modifier ce fichier plus tard, par exemple pour changer le nom, ajouter un auteur ou créer tes propres scripts npm.

En bref :

mkdir mon-jeu → crée ton dossier.
npm init -y → initialise le projet avec un package.json par défaut.

Ton environnement de travail est maintenant prêt à accueillir Phaser et le reste de ton jeu !

Installer Phaser

Maintenant, on va installer Phaser en utilisant npm. Tu vas voir c’est vraiment rapide ! (enfin en théorie…) Toujours dans ton terminal, tape la commande suivante :

bash

npm install phaser

Cela va télécharger et installer Phaser dans ton projet. Une fois l’installation terminée, tu verras un dossier node_modules qui contient Phaser et toutes ses dépendances.

Créer la structure de base

Voici la structure minimale dont on va avoir besoin :

bash

mon-jeu/
│
├── css/                 # Dossier pour les fichiers CSS
│   └── style.css        # Fichier CSS pour personnaliser la page
│
├── node_modules/        # Dossier contenant toutes les dépendances installées via npm
│
├── src/                 # Dossier pour le code source de ton jeu
│   └── main.js          # Fichier JavaScript principal de ton jeu
│
├── index.html           # Fichier HTML qui héberge ton jeu
│
├── package.json         # Fichier de configuration npm (dépendances et scripts)
│
└── package-lock.json    # Fichier de verrouillage des versions de dépendances

Le fichier HTML, ce sera la porte d’entrée puisque c’est une application web

Crée un fichier index.html à la racine du projet :

html

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Runner - Phaser.js</title>

    <!-- StyleSheets -->
    <link rel="stylesheet" href="./css/style.css" />

    <!-- JavaScript -->
    <script defer type="module" src="./src/main.js"></script>
  </head>
  <body>
  </body>
</html>

Dans cet exemple, l’attribut defer sur la balise <script> permet de retarder l’exécution du script jusqu’à ce que le DOM soit complètement chargé. C’est comme si on avait placé la balise <script> juste avant la fin du body sans cet attribut.

html

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Runner - Phaser.js</title>

    <!-- StyleSheets -->
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <!-- JavaScript -->
    <script type="module" src="./src/main.js"></script>
</body>

</html>

Bon… en réalité, cette dernière méthode est plus lente au niveau des performances car le navigateur doit d’abord télécharger et exécuter le script avant de terminer le rendu de la page, alors qu’avec la première méthode, le script est chargé de manière asynchrone, sans bloquer le rendu de la page, mais c’est un détail 😉

Le fichier JavaScript, pour gérer la logique du jeu

Une fois ton fichier HTML configuré, il est temps de séparer la logique de ton jeu dans un fichier JavaScript. Crée un fichier main.js que tu placeras dans un dossier src/ à la racine de ton projet.

Ce fichier sera responsable de la configuration du jeu, de la gestion des scènes et de la mise à jour continue de l’état du jeu à chaque frame.

Voici un exemple minimal pour ce fichier JavaScript, on expliquera tout en détails dans le prochain chapitre 😉

javascript

import Phaser from 'phaser';

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  backgroundColor: '#87CEEB',
  scene: {
    create() {
      console.log('Phaser prêt !');
    }
  }
};

new Phaser.Game(config);

Le fichier CSS, pour gérer le design de la page

Le fichier CSS va te permettre de personnaliser l’apparence de la page qui héberge ton jeu. Bien que le jeu lui-même soit géré par Phaser, tu voudras probablement personnaliser la page autour du jeu, par exemple, pour définir l’arrière-plan, ajouter des marges, ou même styliser des éléments comme un titre au dessus du jeu.

Je t’invite donc à créer un fichier style.css et de le placer dans un nouveau dossier css/ à la racine de ton projet. Voici un exemple de contenu :

css

/**
 * Fichier de styles CSS utilisé pour la mise en page de la page HTML du projet Phaser.
 * Ce fichier est destiné à la conception de la page HTML et à la gestion des styles de la fenêtre du navigateur,
 * mais il ne doit pas s'appliquer au jeu en lui-même, le design du jeu doit être géré par le moteur Phaser.js
 * pour suivre les bonnes pratiques de développement avec ce moteur.
 */

* {
    position:relative;
    margin:0;
    padding:0;
}

html,
body {
    width: 100vw;
    height: 100vh;
    background-color: #000;
}

Tester l’installation de Phaser avec Vite

Maintenant qu’on a bien préparé notre projet, il est temps de le tester !

Pour ça, on va utiliser Vite, un serveur de développement ultra rapide qui va nous permettre de lancer notre jeu en local sur notre ordinateur et de voir les changements instantanément.

Vite fait tout le travail pour nous : il lance un serveur local, recompile notre code dès qu’on fait des modifications, et recharge la page automatiquement. Plus besoin d’appuyer sur F5 à chaque fois, un vrai gain de temps !

Ça va rendre le développement beaucoup plus fluide pour la suite !

Installation de Vite

Pour commencer, on va installer Vite dans notre projet.
Ouvre ton terminal et place-toi à la racine de ton projet, puis exécute cette commande :

bash

npm install vite --save-dev

Cette commande installe Vite en tant que dépendance de développement, c’est-à-dire un outil utilisé uniquement pendant la phase de création du projet.

L’option --save-dev indique à npm d’ajouter Vite dans la section "devDependencies" de ton fichier package.json.

Tu remarqueras sur ma capture d’écran que Vite a été ajouté dans la section "devDependencies", car il ne sera utilisé que pour le développement local, et non pour le jeu final en production.

Configuration de Vite

Dans le fichier package.json, ajoute un script pour lancer le serveur Vite. Ce script va nous permettre de démarrer facilement notre serveur local avec la commande npm run dev.

Voici à quoi pourrait ressembler ton package.json après modification :

json

{
  "name": "mon-jeu",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "phaser": "^3.87.0"
  },
  "devDependencies": {
    "vite": "^6.0.11"
  }
}

"dev": "vite" : Le script pour lancer le serveur Vite, qui démarre un serveur local pour le développement.
"build": "vite build" : Le script pour générer la version de production de ton jeu.
"serve": "vite preview" : Le script pour prévisualiser la version de production générée.

Il se peut que lors de l’installation via npm au tout début du chapitre, des clés supplémentaires, comme la description, la licence, etc., aient été ajoutées au fichier package.json.

Lancement du projet

Une fois que Vite est installé et configuré, tu peux lancer ton serveur local. Pour cela, il suffit de taper la commande suivante dans ton terminal :

bash

npm run dev

Cela va démarrer le serveur, et tu devrais voir un message dans ton terminal indiquant que ton jeu est accessible à une adresse locale, généralement http://localhost:3000 ou http://localhost:5173

Maintenant, à chaque fois que tu modifieras ton code (qu’il s’agisse du HTML, du CSS ou du JavaScript), Vite mettra à jour ton jeu en temps réel, sans que tu aies besoin de rafraîchir la page manuellement.

Par contre, il faudra relancer cette commande à chaque fois que tu redémarreras ton ordinateur, car le serveur sera coupé (ou chaque fois que tu l’arrêteras toi-même).

En résumé

Dans ce chapitre, tu as découvert toutes les étapes essentielles pour démarrer ton premier projet Phaser en utilisant npm et Vite.

Voici ce qu’on a vu ensemble :

Installation de l’environnement : tu as vérifié que Node.js et npm étaient installés, puis installé Phaser avec la commande npm install phaser.
Initialisation du projet : avec npm init -y, tu as créé un projet Node.js prêt à accueillir ton jeu.
Structure du projet : tu as mis en place une structure claire avec les fichiers HTML, CSS et JavaScript nécessaires au bon fonctionnement du jeu.
Mise en place de Vite : tu as installé et configuré Vite, un serveur de développement ultra rapide qui recharge automatiquement la page à chaque modification.
Lancement du jeu : en exécutant npm run dev, tu as lancé ton premier projet Phaser dans le navigateur.

Félicitations ! 🎉
Tu viens d’initialiser ton tout premier projet Phaser avec succès.

C’est une grande étape : ton environnement est prêt, ton jeu s’affiche, et tu peux maintenant te concentrer sur la partie la plus fun, créer et animer ta première scène de jeu !

Dans le prochain chapitre, on va enfin découvrir comment configurer Phaser et créer ta toute première scène de jeu 🎮