Comprendre les bases de la conception de jeux vidéo en JavaScript – Initialisation de Phaser.js

Dans ce chapitre, nous allons commencer notre projet avec l’initialisation de Phaser. C’est la première étape pour commencer à développer un jeu vidéo avec ce framework. Ce processus inclut la configuration du jeu, la création de la scène initiale et l’intégration de Phaser. Nous allons détailler chaque étape afin de vous guider tout au long du processus.

Installation de Phaser

Dans ce projet, nous souhaitons utiliser npm (un gestionnaire de paquets) car il nous permet d’installer facilement des bibliothèques comme Phaser. Node.js, quant à lui, nous permettra de lancer un serveur local sur notre ordinateur pour exécuter notre jeu. Cerise sur le gâteau, il sera capable de recharger automatiquement la page à chaque modification de notre code. Plutôt pratique, non ?

1. Assure-toi d’avoir Node.js et npm installés

Avant toute chose, tu dois avoir Node.js et npm installés sur ton ordinateur. Si tu ne les as pas encore installés, voici comment faire :

Télécharge et installe Node.js depuis le site officiel.
Une fois installé, tu peux vérifier que npm est bien installé en ouvrant ton terminal et en tapant la commande suivante :

bash

npm -v

Cela te donnera la version de npm si c’est bien installé !

Le -v dans la commande npm -v est une abréviation pour –version pour afficher la version actuellement installée.

2. Crée un nouveau projet vide

Ensuite, tu dois créer un dossier pour ton projet si tu ne l’as pas encore fait.

Dans ton terminal, navigue à l’endroit où tu veux créer ton projet et crée un dossier :

bash

mkdir mon-jeu
cd mon-jeu

Initialise un projet Node.js dans ce dossier :

bash

npm init -y

Cela va créer un fichier package.json pour ton projet.

Dans la commande npm init -y, le -y (ou –yes) est un drapeau qui permet de répondre automatiquement « oui » à toutes les invites lors de l’initialisation d’un projet npm avec npm init.

Normalement, quand vous exécutez npm init, il vous pose plusieurs questions, comme :

Nom du package
Version
Description
Point d’entrée (entry point)
Test command
Repository URL
Auteur
Licence

Si vous tapez npm init -y (ou npm init –yes), il accepte les valeurs par défaut pour toutes ces questions sans vous demander, et crée un fichier package.json avec des valeurs par défaut. Par exemple, pour un nouveau projet, cela générera un package.json comme suit :

json

{
  "name": "nom-du-package",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

En gros, -y permet de gagner du temps en automatisant le processus d’initialisation avec les valeurs par défaut, plutôt que de devoir répondre manuellement à chaque question. C’est super pratique pour créer rapidement un projet de base 😉

3. Installer Phaser via npm

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.

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

Crée un fichier index.html dans ton dossier de 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 -->
    <!-- defer : Retarde l'exécution du script jusqu'à ce que le DOM soit complètement chargé -->
    <script defer 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 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, 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 😉

5. 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 de structure pour ce fichier JavaScript, je t’ai mis des commentaires pour que tu puisses t’en servir en tant que mémo 📓

javascript

import Phaser from 'phaser'; // On importe Phaser depuis le dossier node_modules

const config = {
    type: Phaser.AUTO, // Phaser choisit automatiquement le meilleur moteur de rendu disponible (WebGL ou Canvas)

    // Dimensions de la fenêtre du jeu
    width: 800,
    height: 600,

    scale: {
        mode: Phaser.Scale.FIT, // Redimensionne le jeu pour s'adapter à la taille de l'écran tout en conservant les proportions
        autoCenter: Phaser.Scale.CENTER_BOTH, // Centre automatiquement le jeu horizontalement et verticalement
    },

    backgroundColor: '#87CEEB', // Couleur d'arrière-plan de la fenêtre de jeu (bleu ciel), idéale pour bien distinguer les contours du jeu

    // Configuration du système physique utilisé dans le jeu
    physics: {
        default: "arcade", // Utilise le moteur physique "arcade", simple et performant pour de nombreux types de jeux
        arcade: {
            gravity: { y: 300 }, // Applique une gravité verticale vers le bas (300 pixels/seconde²)
            debug: false, // Permet de visualiser les boîtes de collision et autres éléments physiques si activé
        },
    },

    // Configuration des différentes étapes de la scène
    scene: {
        preload,
        create,
        update,
    },
};

// Création de l'instance Phaser avec la configuration définie
const game = new Phaser.Game(config);

// Fonction pour charger les ressources nécessaires avant le début du jeu
function preload() {
    console.log('Chargement des ressources...');
}

// Fonction pour configurer les objets de la scène après le chargement des ressources
function create() {
    console.log('Initialisation de la scène...');
}

// Fonction de mise à jour appelée en continu (environ 60 fois par seconde par défaut)
function update() {
    console.log('Mise à jour...');
}

La configuration du jeu

Avant de lancer notre jeu, nous devons d’abord le configurer. Cela permet de définir des éléments essentiels comme la taille de la fenêtre du jeu, le moteur physique à utiliser, ou encore quelles scènes afficher. C’est là qu’intervient la constante config, qui va contenir toutes ces informations. Voyons cela ligne par ligne :

javascript

const config = {
    type: Phaser.AUTO, // Phaser choisit automatiquement le meilleur moteur de rendu disponible (WebGL ou Canvas)

    // Dimensions de la fenêtre du jeu
    width: 800,
    height: 600,

    scale: {
        mode: Phaser.Scale.FIT, // Redimensionne le jeu pour s'adapter à la taille de l'écran tout en conservant les proportions
        autoCenter: Phaser.Scale.CENTER_BOTH, // Centre automatiquement le jeu horizontalement et verticalement
    },

    backgroundColor: '#87CEEB', // Couleur d'arrière-plan de la fenêtre de jeu (bleu ciel), idéale pour bien distinguer les contours du jeu

    // Configuration du système physique utilisé dans le jeu
    physics: {
        default: "arcade", // Utilise le moteur physique "arcade", simple et performant pour de nombreux types de jeux
        arcade: {
            gravity: { y: 300 }, // Applique une gravité verticale vers le bas (300 pixels/seconde²)
            debug: true, // Permet de visualiser les boîtes de collision et autres éléments physiques si activé
        },
    },

    // Configuration des différentes étapes de la scène
    scene: {
        preload,
        create,
        update,
    },
};

Phaser.AUTO : Phaser choisira automatiquement le moteur de rendu à utiliser, c’est-à-dire comment il affichera les éléments à l’écran. Si ton navigateur prend en charge WebGL, Phaser l’utilisera pour des performances optimales. Si WebGL n’est pas disponible, il reviendra à Canvas, qui est une option plus basique mais largement compatible avec tous les appareils. Cette approche garantit que ton jeu fonctionne de manière fluide sur la plupart des plateformes.
Si tu préfères spécifier un moteur de rendu en particulier, tu peux choisir Phaser.CANVAS ou Phaser.WEBGL. Cependant, cela n’est généralement pas recommandé, car cela peut réduire la compatibilité ou les performances du jeu sur certains appareils.
width: 800, height: 600 : Ces deux propriétés définissent la taille de la fenêtre du jeu en pixels. Ici, 800 pixels de large et 600 pixels de haut. Cela correspond à la résolution de ton jeu. Tu peux ajuster ces valeurs selon la taille que tu veux pour ta fenêtre de jeu.
scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH } : Cette partie de la configuration gère comment le jeu s’adapte à différentes tailles d’écran, en particulier lorsqu’il est redimensionné.
- mode: Phaser.Scale.FIT : Cette option indique que le jeu doit s’ajuster à la taille de l’écran tout en maintenant ses proportions (c’est-à-dire sans déformation). Si l’écran a un rapport largeur/hauteur différent de la fenêtre de jeu, il redimensionnera l’écran du jeu pour s’adapter tout en conservant la même forme. Par exemple, si la fenêtre du jeu est plus petite que la taille par défaut du jeu, elle sera réduite à la taille maximale qui s’adapte sans distorsion.
- autoCenter: Phaser.Scale.CENTER_BOTH : Cela permet de centrer automatiquement le jeu à la fois horizontalement et verticalement sur l’écran, peu importe sa taille. Ainsi, si la fenêtre du jeu ne remplit pas tout l’écran, le jeu sera toujours bien centré et agréable à regarder. Tu peux aussi utiliser Phaser.Scale.CENTER_HORIZONTALLY pour center le jeu horizontalement ou Phaser.Scale.CENTER_VERTICALLY pour le centrer verticalement, selon les besoins de ton jeu.
backgroundColor: ‘#87CEEB’ : Cette ligne définit la couleur d’arrière-plan de la fenêtre du jeu. Ici, le code #87CEEB est un code hexadécimal qui représente une teinte de bleu ciel. Cela donne un joli fond pour ton jeu, ce qui est particulièrement utile pour bien délimiter la zone de jeu et donner une ambiance visuelle agréable.
physics: { default: « arcade », … } : Cette ligne configure le moteur physique du jeu. Dans ce cas, on choisit le moteur « arcade », qui est un moteur physique simple, rapide et performant, parfait pour des jeux 2D comme des plateformes ou des jeux d’action. Phaser propose plusieurs moteurs physiques, mais « arcade » est celui le plus couramment utilisé car il est léger et facile à intégrer. Il permet de gérer des éléments comme la gravité, les collisions et le mouvement des objets de manière efficace sans trop de complexité.
- gravity: { y: 300 } : Cette ligne applique de la gravité sur l’axe vertical (y). Le nombre 300 indique l’intensité de la gravité en pixels par seconde au carré. Cela signifie que les objets dans le jeu tomberont vers le bas à une vitesse croissante, avec une accélération de 300 pixels/seconde². Tu peux augmenter ou diminuer cette valeur pour ajuster la force de la gravité selon l’ambiance de ton jeu (par exemple, une gravité plus faible pour un jeu de plateforme « lunaire »).
- debug: true : Cette option permet d’afficher des informations de débogage pendant le développement. Si tu mets cette option à true, tu verras des boîtes de collision autour de tes objets, des lignes de forces, etc. C’est super utile pour vérifier que la physique de ton jeu fonctionne comme tu veux. Cependant, une fois que tu as fini le développement et que tu es prêt à déployer ton jeu, il est préférable de laisser cette option sur false pour ne pas encombrer l’écran avec des éléments de débogage inutiles.
scene: { preload, create, update } : Ce paramètre est essentiel car il définit le nom des trois fonctions principales du cycle de vie d’une scène dans Phaser. Ces fonctions sont appelées automatiquement par Phaser et permettent de configurer, initialiser et mettre à jour ton jeu au fur et à mesure que le joueur interagit avec lui.
- 1. preload : Cette fonction est appelée une seule fois, avant que le jeu ne commence, et c’est l’endroit où tu vas charger toutes les ressources nécessaires (comme les images, les sons, les sprites, etc.) pour ton jeu.
  Par exemple : tu pourrais l’utiliser pour charger une image pour le personnage du joueur.
- 2. create : Cette fonction est appelée après le chargement des ressources dans la fonction preload. C’est à cet endroit que tu vas créer les objets de la scène, définir les animations et configurer les comportements de ton jeu.
  Par exemple : tu pourrais ajouter des éléments comme des ennemis avec leurs comportements, des plateformes ou d’autres objets interactifs, et aussi gérer des événements, comme les entrées du joueur (clavier, souris, etc.).
- 3. update : C’est la fonction qui est appelée de manière continue, à chaque image (frame) du jeu, généralement 60 fois par seconde par défaut. Elle permet de mettre à jour l’état de la scène, comme les mouvements des objets, les interactions, les animations, ou la gestion de la physique.
  Par exemple : tu pourrais l’utiliser pour déplacer ton personnage, vérifier les collisions, ou encore modifier le score du joueur.
En résumé, ces trois fonctions constituent le cœur de la logique d’une scène dans Phaser :
- preload : Charger les ressources.
- create : Créer les objets et la logique du jeu.
- update : Mettre à jour l’état de la scène en temps réel.
Voici comment cela s’intègre dans le cycle de vie d’une scène de Phaser :
- Préparation des ressources (preload) → Initialisation de la scène (create) → Mise à jour du jeu (update) → Mise à jour du jeu (update) → Mise à jour du jeu (update) → …
Ces trois fonctions sont fondamentales pour que ton jeu fonctionne correctement et pour qu’il réagisse aux actions du joueur.

Si ces trois fonctions ne sont pas encore claires pour toi, n’hésite pas à poser tes questions à la communauté ou à nous contacter. Il est vraiment important de bien les comprendre avant de passer à l’étape suivante !

Lancement du jeu

Une fois que la configuration du jeu est définie, on peut créer une nouvelle instance de Phaser en utilisant la constante config et la classe principale de Phaser Phaser.Game avec la ligne :

javascript

const game = new Phaser.Game(config);

En gros, cette ligne lance réellement le jeu avec tous les paramètres que tu as spécifiés précédemment. C’est un peu comme appuyer sur le bouton « Play » une fois que tout est prêt !

6. 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;
}

Ouf, on commence à voir le bout, tout va bien ? C’était une grosse partie cette configuration, je t’invite à prendre un café, un thé, etc. Bref, prends une petite pause, puis on ira tester tout ça !

7. Récapitulatif de ta structure de dossiers

Si tout s’est bien passé, tu devrais te retrouver avec une structure comme ça :

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

Cette structure va t’aider à organiser ton projet de manière propre et efficace. Maintenant, c’est (enfin) le moment de tester et de voir si tout fonctionne comme prévu ! 😄

8. Tester l’installation de Phaser avec Vite

Maintenant qu’on a bien préparé notre projet, il est temps de le tester localement. Pour ça, on va utiliser Vite, un serveur de développement super rapide (non mais vraiment, c’est pas juste un jeu de mot) 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. Ça va rendre le développement beaucoup plus fluide pour la suite!

8.1. Installation de Vite

Pour commencer, on va installer Vite dans notre projet :

Ouvre ton terminal et place-toi à la racine de ton projet.
Installe Vite via npm avec cette commande :

bash

npm install vite --save-dev

Cela va installer Vite en tant que dépendance de développement dans le dossier node_modules.

8.2. 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.

8.3. 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).

Résumé

Dans ce chapitre, nous avons abordé les étapes essentielles pour débuter un projet de jeu vidéo avec Phaser en utilisant npm pour gérer les dépendances et Node.js pour exécuter un serveur local. Voici les points clés :

Installation de Phaser : Nous avons installé Node.js et npm, puis utilisé npm pour installer Phaser dans notre projet.
Création d’un projet Node.js : Après avoir initialisé un projet Node.js avec npm init -y, nous avons installé Phaser via la commande npm install phaser.
Configuration du projet : Nous avons créé un fichier HTML (index.html) pour héberger notre jeu et intégré un fichier JavaScript (main.js) pour gérer la logique du jeu, avec des scènes définies dans la configuration Phaser.
Structure du jeu : Le projet est structuré de manière claire avec des dossiers pour le code source, les styles CSS et les dépendances.
Vite pour le développement local : Nous avons installé Vite, un serveur de développement rapide, pour tester notre jeu localement. Il permet de recompiler et recharger automatiquement la page lors de modifications.
Lancement du jeu : Une fois tout configuré, nous avons lancé le projet avec npm run dev et vérifié que notre jeu fonctionne correctement sur le serveur local.

Félicitations ! Après ce (trop) long chapitre, tu viens d’initialiser ton premier projet Phaser avec succès. C’est le début d’une longue carrière de création de jeux vidéo avec Phaser ! 🎉

La boucle de jeu : cœur de l’interactivité

Introduction à Phaser

Structure d’un projet Phaser

Initialisation de Phaser.js

Les formes géométriques

—

Projet final – Présentation

—

Statut des chapitres :

Disponible

Partiellement disponible

Bientôt disponible

Revenir à la formation

📌 Bienvenue dans l’espace Questions & Réponses !

Tu as une question sur un concept du chapitre ? Une explication te semble un peu floue ? 🤔 Cet espace est là pour toi ! Pose tes questions et échange avec les autres étudiants pour mieux comprendre le contenu.

Avant de poser une question, pense à :

Vérifier si quelqu’un n’a pas déjà posé la même question.
Donner un maximum de détails pour obtenir une réponse précise.
Être respectueux et clair dans ta demande.

L’entraide est la clé de l’apprentissage ! Alors, n’hésite pas à partager tes doutes ou à aider les autres si tu as la réponse. 🚀

Liste des réponses

Les questions / réponses sont disponibles uniquement pour les membres Premium.

Poser une question

L’ajout de questions est disponible uniquement pour les membres Premium.