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: 3 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 (7 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 !** đźâš