An open API service indexing awesome lists of open source software.

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.

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 !** 🎼✹