Phaser.js est l’un des frameworks JavaScript les plus populaires pour créer des jeux 2D en HTML5. Il est riche en fonctionnalités, facile à apprendre et parfaitement adapté pour développer des jeux qui fonctionnent dans n’importe quel navigateur moderne. Ce guide vous aidera à créer un jeu simple en HTML5 à l’aide de Phaser.js.
Étapes pour Créer un Jeu Simple avec Phaser.js
1. Prérequis
Avant de commencer à développer un jeu avec Phaser.js, vous devez avoir les éléments suivants installés :
- Un éditeur de texte (Visual Studio Code, Sublime Text, etc.)
- Un navigateur web moderne (Google Chrome, Firefox, etc.)
- Connaissances de base en HTML, CSS, et JavaScript.
2. Installer Phaser.js
Phaser.js est une bibliothèque JavaScript, donc la première étape consiste à l’ajouter à votre projet. Vous pouvez le faire de deux manières :
- Via un CDN : Ajoutez simplement le lien vers Phaser dans le fichier HTML.
htmlCopierModifier<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Jeu Phaser</title>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
</head>
<body>
<script src="game.js"></script>
</body>
</html>
- Télécharger Phaser.js : Vous pouvez aussi télécharger Phaser.js depuis son site web et l’intégrer localement dans votre projet.
3. Créer la Structure de Dossier du Projet
Organisez votre projet avec la structure suivante :
bashCopierModifier/mon-jeu-phaser
/assets
/images
/sounds
index.html
game.js
style.css
Dans ce cas, le dossier assets contiendra toutes vos ressources comme les images et les sons, et le fichier game.js contiendra votre code de jeu.
4. Configurer le Jeu avec Phaser.js
Dans le fichier game.js, vous devez d’abord configurer Phaser. La configuration de base comprend la création d’une scène, la définition de la taille du jeu et la gestion des éléments de jeu.
javascriptCopierModifier// Créer la configuration du jeu
var config = {
type: Phaser.AUTO, // Utilisation du rendu WebGL ou Canvas selon le navigateur
width: 800, // Largeur du jeu
height: 600, // Hauteur du jeu
scene: {
preload: preload, // Charger les ressources
create: create, // Initialisation du jeu
update: update // Mettre à jour chaque frame
}
};
// Initialiser le jeu avec Phaser
var game = new Phaser.Game(config);
// Fonction preload pour charger les ressources
function preload() {
this.load.image('player', 'assets/images/player.png'); // Charger l'image du joueur
}
// Fonction create pour initialiser les objets de jeu
function create() {
this.player = this.physics.add.sprite(100, 100, 'player'); // Créer un sprite du joueur
this.player.setCollideWorldBounds(true); // Empêcher le joueur de sortir des limites
}
// Fonction update pour les animations et la logique de mise à jour
function update() {
if (this.input.keyboard.isDown(Phaser.Input.Keyboard.KeyCodes.LEFT)) {
this.player.x -= 5; // Déplacer le joueur à gauche
} else if (this.input.keyboard.isDown(Phaser.Input.Keyboard.KeyCodes.RIGHT)) {
this.player.x += 5; // Déplacer le joueur à droite
}
if (this.input.keyboard.isDown(Phaser.Input.Keyboard.KeyCodes.UP)) {
this.player.y -= 5; // Déplacer le joueur en haut
} else if (this.input.keyboard.isDown(Phaser.Input.Keyboard.KeyCodes.DOWN)) {
this.player.y += 5; // Déplacer le joueur en bas
}
}
5. Ajouter des Graphismes et des Sons
Dans le dossier assets, vous pouvez ajouter des images et des sons pour enrichir l’expérience du joueur. Par exemple, vous pouvez ajouter un sprite pour le joueur et une musique de fond.
- Ajouter une image pour le joueur dans
assets/images/player.png. - Ajouter un son de fond dans
assets/sounds/background.mp3.
Vous pouvez charger ces ressources dans la fonction preload comme suit :
javascriptCopierModifier// Fonction preload pour charger les ressources
function preload() {
this.load.image('player', 'assets/images/player.png');
this.load.audio('backgroundMusic', 'assets/sounds/background.mp3'); // Charger la musique de fond
}
Puis, dans la fonction create, vous pouvez démarrer la musique :
javascriptCopierModifier// Fonction create pour initialiser les objets de jeu
function create() {
this.player = this.physics.add.sprite(100, 100, 'player');
this.player.setCollideWorldBounds(true);
// Démarrer la musique de fond en boucle
this.backgroundMusic = this.sound.add('backgroundMusic');
this.backgroundMusic.play({ loop: true });
}
6. Ajouter des Mécaniques de Jeu Simples
Voici un exemple d’ajout de quelques fonctionnalités simples, comme la collision avec des murs ou la collecte d’objets.
javascriptCopierModifierfunction create() {
this.player = this.physics.add.sprite(100, 100, 'player');
this.player.setCollideWorldBounds(true);
// Ajouter un objet à collecter
this.coin = this.physics.add.sprite(400, 300, 'coin');
this.physics.add.overlap(this.player, this.coin, collectCoin, null, this);
}
function collectCoin(player, coin) {
coin.setVisible(false); // Cacher l'objet après la collecte
console.log('Monnaie collectée !');
}
7. Ajouter de l’Animation
Vous pouvez ajouter des animations simples pour rendre votre jeu plus dynamique. Par exemple, vous pouvez animer le joueur en fonction de ses déplacements.
javascriptCopierModifierfunction preload() {
this.load.spritesheet('player', 'assets/images/player-sprite.png', { frameWidth: 32, frameHeight: 32 });
}
function create() {
this.player = this.physics.add.sprite(100, 100, 'player');
this.player.setCollideWorldBounds(true);
// Créer une animation pour le joueur
this.anims.create({
key: 'walk',
frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
}
function update() {
if (this.input.keyboard.isDown(Phaser.Input.Keyboard.KeyCodes.LEFT)) {
this.player.x -= 5;
this.player.anims.play('walk', true); // Jouer l'animation de marche
} else if (this.input.keyboard.isDown(Phaser.Input.Keyboard.KeyCodes.RIGHT)) {
this.player.x += 5;
this.player.anims.play('walk', true);
} else {
this.player.anims.stop();
}
}
8. Tester et Déployer le Jeu
Une fois que vous avez créé votre jeu, vous pouvez le tester dans le navigateur en ouvrant votre fichier index.html. Si tout fonctionne comme prévu, vous pouvez déployer votre jeu sur une plateforme web comme GitHub Pages, Netlify, ou Vercel.
Conclusion
Phaser.js offre un excellent cadre pour créer des jeux en 2D dans le navigateur avec des fonctionnalités avancées, tout en restant facile à apprendre et à utiliser. Ce guide vous a montré les bases pour créer un jeu simple, mais vous pouvez enrichir cette base en ajoutant des niveaux, des ennemis, des animations complexes, et bien plus encore. Expérimentez avec les différentes fonctionnalités de Phaser pour créer des jeux captivants et performants.
