Phaser.js est un framework de jeu écrit en JavaScript qui permet de créer des jeux vidéo directement pour le web, sans repartir de zéro à chaque projet. Il regroupe tout ce dont on a besoin — rendu, sons, animations, gestion des entrées — dans une seule bibliothèque légère que l’on charge dans une page HTML.
Pourquoi commencer avec Phaser ?
Phaser s’occupe des parties les plus fastidieuses du développement d’un jeu : la boucle de jeu, l’affichage sur le canvas, le chargement des images et des sons, les collisions. On peut ainsi se concentrer sur l’idée du jeu plutôt que sur la plomberie technique. Le résultat tourne dans n’importe quel navigateur moderne et se partage avec un simple lien.
Au fil de cette série, nous verrons comment dessiner des formes et des images, jouer des sons et de la musique, ajouter du réalisme grâce aux animations et introduire l’interactivité à la souris. Nous commencerons par un projet de base, puis nous ajouterons petit à petit une logique plus riche.
Nous nous concentrons sur la troisième version du framework. Les versions précédentes (Phaser 2 et CE) ne sont pas compatibles avec le code présenté ici.
Mettre en place le projet
Pas besoin d’outils compliqués pour démarrer : un simple fichier HTML qui charge Phaser depuis un CDN suffit. On y ajoute une balise script avec la configuration du jeu, puis on ouvre le fichier dans le navigateur. Voici un exemple complet qui affiche « Hello World » à l’écran.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.min.js"></script>
</head>
<body>
<script>
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: "#1d1d2b",
scene: { create: create }
};
const game = new Phaser.Game(config);
function create() {
this.add.text(400, 300, "Hello World", {
fontFamily: "Arial",
fontSize: "48px",
color: "#ffffff"
}).setOrigin(0.5);
}
</script>
</body>
</html>Décortiquons ce code. L’objet config indique à Phaser le type de rendu (Phaser.AUTO choisit WebGL ou Canvas selon le navigateur), la taille de la zone de jeu et la scène à exécuter. Une scène est un écran du jeu ; ici, sa fonction create() ajoute un texte centré à la position (400, 300). La ligne new Phaser.Game(config) démarre tout. En ouvrant la page, vous obtenez votre premier rendu Phaser : un canvas sombre avec « Hello World » au centre.
À partir de cette base, il suffit d’enrichir la fonction create() — charger une image, afficher un sprite, réagir au clavier — pour transformer ce squelette en véritable jeu.
Les développeurs JavaScript expérimentés remarqueront le mot-clé function employé à la place de la syntaxe fléchée plus récente : ce choix garde le code lisible et compatible avec la conception du framework.
Le développement d’un jeu vidéo est avant tout une forme d’art.
Pour rester informé des actualités Phaser, abonnez-vous à la newsletter officielle Phaser World, gérée par le créateur et mainteneur d’origine du framework.
Pour aller plus loin, découvrez notre guide complet pour créer un jeu en JavaScript, notre article sur la gestion des assets dans Phaser et l’ensemble de nos cours en ligne.
Côté lecture, vous trouverez de bons ouvrages sur le développement de jeux en JavaScript pour approfondir.
0 commentaire