Phaser est un framework open-source puissant pour développer des jeux vidéo 2D. Il s'appuie sur HTML5 Canvas pour le rendu et JavaScript pour la logique du jeu. Contrairement au JavaScript pur, Phaser offre une bibliothèque riche en fonctionnalités physiques prêtes à l'emploi, vous permettant de vous concentrer sur la conception et la créativité de votre jeu.
Phaser accélère le développement et optimise le workflow. Découvrez comment créer un jeu basique étape par étape avec Phaser.
Phaser repose sur un boucle de mise à jour similaire à d'autres moteurs de jeu. Il se décompose en trois phases principales : preload (préchargement), create (création) et update (mise à jour).
La phase de preload charge les ressources (images, sons, etc.) avant le démarrage.
La phase de create initialise le jeu et ses éléments initiaux. Ces deux fonctions s'exécutent une seule fois au lancement.
La phase update, quant à elle, s'exécute en boucle continue pour rendre le jeu interactif et fluide.
Phaser fonctionne avec HTML et JavaScript, mais les jeux doivent être servis via un serveur local (pas en ouvrant directement le fichier HTML). Cela permet d'accéder à des ressources externes. Utilisez XAMPP, MAMP ou un simple serveur Node.js comme live-server si vous n'en avez pas.
Voici un code de base pour démarrer :
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.70.0/dist/phaser.js"></script>
</head>
<body>
<script>
var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
var gamePiece;
function preload() {
this.load.image('gamePiece', 'img/gamePiece.png');
}
function create() {
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}
</script>
</body>
</html>Placez une image PNG nommée gamePiece.png (ex. : un carré orange 60x60 px) dans un dossier img/ sur votre serveur local. Votre jeu affichera alors un sprite statique :
En cas d'erreur, consultez la console de débogage du navigateur (F12). Une simple faute de syntaxe peut tout bloquer.
Pour l'instant, le jeu est statique, mais la base est solide. Importez Phaser via CDN (ligne 4). La variable config définit l'environnement : fond bleu clair (0xCCFFFF), dimensions 600x600 px, physique arcade.
La propriété scene lie les fonctions preload et create. L'objet game lance le tout.
Dans preload, chargez les assets (ici, l'image gamePiece). Dans create, ajoutez le sprite physique à la position (270, 450).
Ajoutons du mouvement avec les flèches du clavier. Incluez update dans la config :
scene: {
preload: preload,
create: create,
update: update
}Déclarez une variable globale pour les inputs :
var gamePiece;
var cursors;Initialisez dans create :
function create() {
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
cursors = this.input.keyboard.createCursorKeys();
}Dans update, gérez les déplacements (2 px par frame pour fluidité) :
function update() {
if (cursors.left.isDown) {
gamePiece.x -= 2;
} else if (cursors.right.isDown) {
gamePiece.x += 2;
}
if (cursors.up.isDown) {
gamePiece.y -= 2;
} else if (cursors.down.isDown) {
gamePiece.y += 2;
}
}Votre personnage est maintenant contrôlable ! Ajoutons des obstacles pour un vrai défi.
Préchargez deux images d'obstacles (carrés bleu et vert) :
function preload() {
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}Créez-les dans create :
var obstacle1, obstacle2;
function create() {
// ... code précédent
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');
}Dans update, déplacez-les et recyclez-les aléatoirement :
obstacle1.y += 4;
if (obstacle1.y > 600) {
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}
obstacle2.x += 4;
if (obstacle2.x > 600) {
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}
Activez les collisions dans create :
this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1) {
gamePiece.destroy();
obstacle1.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2) {
gamePiece.destroy();
obstacle1.destroy();
obstacle2.destroy();
});À la collision, tous les sprites sont détruits, fin du jeu.
Améliorez-le : ajoutez un second joueur (touches WASD), plus d'obstacles, scoring, vitesse variable. Phaser gère la physique pour vous – idéal pour débuter en jeux 2D.
Explorez la documentation officielle. En cas d'erreur, le débogueur navigateur est votre allié.
[]