Structure d’un projet Phaser

Une bonne organisation est essentielle pour maintenir un projet propre et compréhensible, car elle permet de faciliter la gestion du code et des ressources à mesure que le projet se développe.

Voici une structure de base classique pour un projet Phaser :

my-phaser-game/
├── assets/
│   └── images/       # On commence simple : juste nos images pour l’instant
│
├── src/
│   ├── scenes/
│   │   └── GameScene.js   # La scène principale du jeu
│   │
│   └── main.js           # Point d'entrée du jeu (on lance Phaser ici)
│
└── index.html            # Le fichier HTML qui charge tout

Plus un projet devient complexe, plus il devient difficile de s’y retrouver sans une structure claire. Une organisation bien pensée te permettra de gagner du temps, d’éviter les erreurs et de collaborer plus efficacement avec d’autres développeurs.

Lorsque ton projet deviendra plus complexe (plusieurs scènes, un joueur, des ennemis, un menu, etc.), on pourra organiser le projet comme ceci :

my-phaser-game/
├── assets/              # Dossier contenant toutes les ressources
│   ├── images/          # Images, spritesheets, tilesets
│   ├── audio/           # Effets sonores, musiques
│   ├── fonts/           # Polices bitmap ou webfonts
│   └── videos/          # Vidéos (si nécessaire)
│
├── css/                 # Dossier contenant les fichiers CSS
│   └── style.css        # Styles principaux du projet
│
├── src/                 # Code source du projet
│   ├── scenes/          # Scènes (menus, niveaux, game over, etc.)
│   │   ├── BootScene.js # Pré-chargement des ressources
│   │   ├── MenuScene.js # Menu principal
│   │   ├── GameScene.js # Gameplay principal
│   │   └── ...          # Autres scènes
│   │
│   ├── objects/         # Objets spécifiques (joueur, ennemis, etc.)
│   │   ├── Player.js    # Exemple d'objet joueur
│   │   ├── Enemy.js     # Exemple d'objet ennemi
│   │   └── ...          # Autres objets
│   │
│   ├── systems/         # Systèmes réutilisables (gestion des collisions, UI, etc.)
│   │   └── PhysicsSystem.js
│   │
│   ├── utils/           # Fonctions utilitaires (helpers)
│   │   └── mathHelpers.js
│   │
│   ├── config.js        # Configuration globale (taille du jeu, paramètres Phaser)
│   └── main.js          # Point d'entrée principal du jeu
│
├── dist/                # Dossier contenant les fichiers compilés pour la production
│
├── package.json         # Dépendances et scripts npm
├── webpack.config.js    # Configuration Webpack (ou Vite/Rollup)
├── README.md            # Documentation du projet
└── index.html           # Fichier HTML principal pour charger le jeu

Cette structure est idéale pour un projet Phaser de taille moyenne à grande et permet de garder les fichiers bien organisés, faciles à maintenir et à développer.

assets/ : Dossier contenant toutes les ressources

Le dossier assets contient toutes les ressources utilisées par votre jeu, comme les images, les sons, les polices, et même les vidéos si elles sont nécessaires. Organiser ces ressources est crucial pour éviter de perdre du temps à chercher des fichiers dans un grand projet.

• images/ : Contient les images utilisées pour les sprites, les arrière-plans, les tilesets (grilles de tuiles pour la création de niveaux), etc.

• audio/: Contient les effets sonores et les musiques du jeu. On y place les fichiers audio nécessaires pour les sons d’action, la musique d’ambiance, etc.

• fonts/: Contient les polices bitmap ou webfonts utilisées pour afficher du texte dans le jeu.

• videos/: Contient des fichiers vidéo (si ton jeu en utilise), comme des cinématiques ou des intros.

css/ : Dossier contenant les fichiers CSS

Le dossier css/contient les fichiers de style utilisés pour la mise en forme de la page de ton jeu. Bien qu’il soit possible d’y ajouter des styles pour l’interface utilisateur (UI) ou les menus, il est généralement préférable d’utiliser Phaser pour la création du design du jeu. Cela permet de simplifier la gestion du responsive et d’assurer une meilleure cohérence entre les différents éléments du jeu.

src/ : Code source du projet

Le dossier src contient tous les fichiers JavaScript qui composent la logique. C’est là que l’on organise le cœur du projet, avec des sous-dossiers pour les différentes parties du jeu.

• scenes/ : Ce sous-dossier contient les différentes scènes du jeu. Une scène dans Phaser est une partie spécifique du jeu, comme l’écran de menu, l’écran de jeu, ou l’écran de fin de partie.

  • BootScene.js: La scène de pré-chargement qui est lancée avant le début du jeu. Elle est responsable du chargement des ressources.

  • MenuScene.js: La scène représentant l’écran de menu où les joueurs peuvent démarrer le jeu ou modifier les options.

  • GameScene.js: La scène principale du jeu, où se déroule l’action (l’interaction avec les objets, le gameplay).

• objects/: Contient des classes représentant les objets du jeu. Chaque fichier ici correspond généralement à un objet ou un personnage spécifique du jeu.

  • Player.js: La classe représentant le joueur, avec des méthodes et des propriétés comme la position, les mouvements, etc.

  • Enemy.js: La classe représentant un ennemi, avec ses propres propriétés et comportements.

• systems/: Regroupe des systèmes réutilisables qui peuvent être utilisés dans plusieurs scènes ou objets. Par exemple, un système de gestion des collisions ou des interactions spécifiques dans le jeu.

  • PhysicsSystem.js: Gère la physique du jeu, comme la détection des collisions ou les forces appliquées aux objets.

• utils/: Contient des fonctions utilitaires réutilisables à travers le projet. Ces fonctions ne sont pas directement liées aux scènes ou objets, mais elles apportent des fonctionnalités pratiques.

  • mathHelpers.js: Contient des fonctions mathématiques utilisées dans tout le projet (calculs de distances, générateurs de nombres aléatoires, etc.).

• config.js: Contient la configuration globale du jeu. Il peut contenir des paramètres comme la taille de la fenêtre du jeu, les options de la physique, et les paramètres de scène.

• main.js: Le point d’entrée principal du jeu. Il initialise Phaser, configure le jeu, et lance la première scène.

dist/ : Dossier contenant les fichiers compilés pour la production

Le dossier dist (pour « distribution ») contient les fichiers qui seront utilisés pour déployer ton jeu en production. Ces fichiers sont généralement compilés ou minimisés afin d’optimiser les performances. C’est dans ce dossier que des outils comme Webpack ou Vite (selon la configuration) placent les fichiers après la construction du projet.

Tu y trouveras notamment :

• Le fichier JavaScript compilé après la minification.

• Les fichiers HTML optimisés.

• Les ressources compressées, etc.

package.json : Dépendances et scripts npm

Le fichier package.json est essentiel pour gérer les dépendances de ton projet ainsi que les scripts npm. Il contient des informations sur les packages utilisés (comme Phaser, des outils de développement, etc.), ainsi que des scripts pour automatiser certaines tâches (comme la production, les tests ou le démarrage du serveur de développement).

Il comprend généralement :

• « dependencies » : Liste des dépendances principales utilisées en production, telles que Phaser.

• « devDependencies » : Liste des outils de développement comme Webpack, Babel, etc.

• « scripts » : Des commandes comme « dev » pour démarrer un serveur local ou « build » pour construire le jeu pour la production.

webpack.config.js, vite.config.js, etc. : Configuration Webpack, Vite, etc.

Ce fichier de configuration est utilisé pour configurer l’outil de bundling (Webpack, Vite, etc.), qui permet d’assembler tous les fichiers JavaScript, CSS et autres ressources du projet en un ou plusieurs fichiers optimisés pour la production.

Il permet notamment de :

• Définir les règles de compilation pour les fichiers JavaScript.

• Configurer les plugins pour la minification du code.

• Spécifier les chemins d’entrée et de sortie des fichiers.

README.md : Documentation du projet

Le fichier README.md est utilisé pour documenter ton projet. Il contient des informations essentielles, telles que l’objectif du projet, les instructions d’installation, les modalités d’exécution du jeu, ainsi que d’autres informations utiles pour les développeurs ou les joueurs.

Il comprend généralement :

• Introduction au projet.

• Prérequis pour le développement et l’exécution du jeu.

• Instructions pour contribuer au projet.
  

index.html : Fichier HTML principal pour charger le jeu

Le fichier index.html est le fichier de base qui charge ton jeu dans le navigateur. Il inclut les références à tes fichiers JavaScript et CSS, ainsi que la configuration de la page HTML (par exemple, la taille du canvas, la disposition des éléments, etc.).

Dans ce fichier, tu trouveras généralement :

• L’insertion du fichier Phaser via une balise <script>.

• La définition des métadonnées du jeu et des liens vers les fichiers CSS.

La structure d’un projet Phaser est essentielle pour maintenir une organisation claire et une gestion optimale des ressources, du code et des fichiers de production. Voici les points clés à retenir :

• assets/ : Contient toutes les ressources (images, audio, polices, vidéos) utilisées dans le jeu. Bien organiser ce dossier te permettra de retrouver facilement les éléments nécessaires au développement.

• css/ : Contient les fichiers de style utilisés principalement pour la mise en forme de la page web.

• src/ : Le cœur du projet, où se trouve le code JavaScript du jeu. Les fichiers sont organisés par types de logique : scènes, objets, systèmes et utilitaires. C’est dans ce dossier que toute la logique du jeu prend forme.

• dist/ : Ce dossier contient les fichiers compilés pour la production. Après la construction du projet, il inclut les fichiers minifiés et optimisés pour le déploiement sur un serveur.

• package.json : Il est essentiel pour gérer les dépendances du projet et les scripts npm. Ce fichier définit les bibliothèques nécessaires et te permet d’automatiser diverses tâches via des commandes npm.

• webpack.config.js, vite.config.js : Configure l’outil de bundling pour assembler et optimiser les fichiers du projet, ce qui permet d’améliorer les performances et la gestion des fichiers pour la production.

• README.md : Ce fichier est utilisé pour documenter ton projet. Il contient des informations sur le projet, des instructions pour l’installation et la contribution, ainsi que des détails sur son fonctionnement.

• index.html : Le point d’entrée du jeu dans le navigateur. Il inclut les scripts nécessaires, configure la présentation de la page, et contient les métadonnées ainsi que les liens vers les ressources externes.

Une structure bien pensée rend ton projet plus évolutif et facile à maintenir, tout en facilitant la collaboration avec d’autres développeurs. Elle t’aidera également à garder un code propre et organisé à mesure que ton jeu se développe.

Pour l’instant, nous n’utiliserons que la structure de base que nous ferons évoluer petit à petit. Tu pourras revenir à la structure avancée quand ton projet commencera à grandir. Pas de pression ! 🔥