https://github.com/tolmen/phaser_starterpack
Starter pack for creating web games with Phaser, ready to use.
https://github.com/tolmen/phaser_starterpack
game-2d javascript phaser starter-kit
Last synced: about 2 months ago
JSON representation
Starter pack for creating web games with Phaser, ready to use.
- Host: GitHub
- URL: https://github.com/tolmen/phaser_starterpack
- Owner: TolMen
- License: mit
- Created: 2024-11-07T14:42:35.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2025-02-20T14:52:52.000Z (3 months ago)
- Last Synced: 2025-02-20T15:38:02.248Z (3 months ago)
- Topics: game-2d, javascript, phaser, starter-kit
- Language: JavaScript
- Homepage:
- Size: 332 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README_fr.md
- License: LICENSE
Awesome Lists containing this project
README
# đź Phaser Starter Pack
> **Un projet personnel pour expérimenter Phaser et le développement de jeux 2D.**
> --> *Version : [English](README.md)* đ## Description
Ce dépÎt fournit une base solide pour démarrer rapidement le développement de jeux 2D avec [Phaser](https://phaser.io/), un framework JavaScript populaire pour les jeux.
Ce StarterPack est destinĂ© aux dĂ©veloppeurs de tous niveaux, leur permettant de se concentrer directement sur la crĂ©ation du jeu sans se soucier des configurations de base.## đŻ Objectifs
Ce StarterPack vise Ă offrir :
- Un **point de départ** pour les projets Phaser 3 avec une structure de fichier organisée.
- Des **paramĂštres de configuration Phaser** standard prĂȘts Ă l'emploi.
- Une **adaptation automatique de la fenĂȘtre de jeu** pour une expĂ©rience utilisateur optimale.
- Des **bonnes pratiques** en matiĂšre de modularitĂ© et de lisibilitĂ© du code.## âïž FonctionnalitĂ©s
#### 1. **Configuration Phaser prĂȘte Ă l'emploi**
Le fichier `setting.js` contient la configuration du jeu, notamment le moteur de rendu, la taille de la fenĂȘtre et les paramĂštres physiques.#### 2. **SystĂšme de redimensionnement automatique**
Le fichier `resize.js` permet au jeu de s'adapter dynamiquement Ă la taille de la fenĂȘtre du navigateur, en redimensionnant l'arriĂšre-plan pour correspondre Ă l'affichage.#### 3. **Structure modulaire du code**
Les diffĂ©rents aspects de la configuration, des scĂšnes et des styles sont sĂ©parĂ©s dans des dossiers dĂ©diĂ©s pour une meilleure organisation.## đ ïž Installation
### Prérequis
Avant de commencer, installez **Node.js** et **npm** si vous souhaitez ajouter des dĂ©pendances.### Ătapes d'installation
1. **Clonez le dépÎt** :
```bash
git clone https://github.com/votre-utilisateur/Phaser_StarterPack.git
cd Phaser_StarterPack
```
2. **Initialisez un projet npm (facultatif)** pour gérer des dépendances supplémentaires :
```bash
npm init -y
```3. **Lancez le projet** :
Ouvrez `index.html` directement ou utilisez "Live Server" sous VS Code pour lancer un serveur local et voir le jeu en action.## đ Structure du Projet
Voici la structure des fichiers dans le dépÎt pour une vue d'ensemble rapide :
```plaintext
Phaser_StarterPack/
â
âââ assets/ # Contient les ressources (images, CSS, etc.)
â âââ img/ # Images (arriĂšre-plan, logo, etc.)
â âââ reset.css # Fichier CSS pour supprimer les marges par dĂ©faut et centrer le jeu
â
âââ src/ # Dossier contenant le code JavaScript
â âââ config/ # Fichiers de configuration (paramĂštres et redimensionnement)
â âââ scene/ # ScĂšnes du jeu (par exemple, baseScene.js)
â âââ main.js # Fichier principal qui dĂ©marre le jeu
â
âââ index.html # Fichier HTML de base
âââ README.md # Documentation du projet
```--
## đ Explication des fichiers
#### `index.html`
Le fichier HTML de base. Il inclut Phaser via un CDN et charge le fichier `main.js`. Ce dernier instancie le jeu et lance la scÚne par défaut.#### `assets/reset.css`
Ce fichier CSS supprime les marges et remplit l'écran pour le canvas Phaser, centré horizontalement et verticalement. Il garantit que le jeu s'affiche correctement sur divers appareils.#### `src/main.js`
Ce fichier initialise le jeu en important :
1. **La configuration** du jeu depuis `setting.js`.
2. **La fonction de redimensionnement** de `resize.js` pour ajuster le jeu lorsque la fenĂȘtre est redimensionnĂ©e.#### `src/config/setting.js`
Contient la configuration du jeu, incluant :
- **Moteur de rendu** : Phaser choisit automatiquement WebGL ou Canvas.
- **Dimensions** : BasĂ©es sur la taille de la fenĂȘtre (`window.innerWidth` et `window.innerHeight`) pour un plein Ă©cran.
- **Physique Arcade** : Utilisation d'une gravité simple pour les jeux 2D.
- **ScĂšnes** : Les scĂšnes Ă inclure, comme `baseScene`.#### `src/config/resize.js`
Ce module ajuste la taille du jeu et de ses Ă©lĂ©ments lorsque la fenĂȘtre change de dimension. Il redimensionne automatiquement l'arriĂšre-plan pour remplir l'Ă©cran et se centre dynamiquement.#### `src/scene/baseScene.js`
La scÚne par défaut :
1. **Précharge des images** (`imgBackground` et `logoPhaser`).
2. **Affiche l'arriÚre-plan et le logo** centrés et redimensionnés pour s'ajuster à l'écran.
3. **Possibilité d'animations** en ajoutant du code dans `update()`.## ⚠Ajouter une nouvelle scÚne
Pour ajouter une nouvelle scĂšne :
1. Créez un fichier dans `src/scene/` (ex. `newScene.js`).
2. Définissez la scÚne en héritant de `Phaser.Scene`.
3. Ajoutez la scĂšne dans `src/config/setting.js` :```javascript
import newScene from "../scene/newScene.js";
const config = {
// Autres configurations...
scene: [baseScene, newScene], // Ajoutez la nouvelle scĂšne ici
};
```## đ€ Contribution
Les contributions sont bienvenues ! Si vous souhaitez améliorer ce projet, ajouter des fonctionnalités ou corriger des bugs, voici comment contribuer :
1. **Fork le dépÎt**.
2. **Clonez votre fork** :
```bash
git clone https://github.com/votre-utilisateur/Phaser_StarterPack.git
```
3. **Créez une branche** pour chaque nouvelle fonctionnalité :
```bash
git checkout -b nouvelle-fonctionnalite
```
4. **Apportez vos modifications** :
- Documentez vos changements.
- Assurez-vous que le code est bien structuré et suit les conventions du projet.
5. **Commit et push** vos modifications :
```bash
git commit -m "Ajout d'une nouvelle fonctionnalité"
git push origin nouvelle-fonctionnalite
```
6. **Ouvrez une pull request** pour proposer vos modifications.---
Merci dâavoir pris le temps de dĂ©couvrir ce projet.
NâhĂ©sitez pas Ă lâexplorer, lâapprendre et le modifier ! âš**Pour toute question ou collaboration, nâhĂ©sitez pas Ă me contacter ! đ©**
[TolMen](https://github.com/TolMen) - [LinkedIn](https://www.linkedin.com/in/jessyfrachisse/)
**Bon dĂ©veloppement avec Phaser !** đźâš