Catégories
Développement Javascript Jeux

Phaser, un framework Javascript de jeu vidéo

Il y a un moment de cela ( quatre ans environ…), j’ai fait un petit article sur PIXI.js un framework de jeu vidéo en Javascript.
Depuis l’époque où j’ai fais cet article, PIXI.js a évolué et a changé de nom : Phaser.
Je voulais en parler un peu car en ce moment, pour passer le temps, je bricole (rien de concret quoi…) un petit jeu en Javascript qui utilise socket.io.

Un des grands avantages de développer avec Phaser, c’est qu’il y a un grand nombre de tutoriel pour vous aider à commencer des projets comme des jeux de plateformes , des mmorpg. Mais il faudra s’y connaitre un minimum en anglais.

Pour voir ce qu’à Phaser dans le ventre, nous allons faire un petit projet. Le code source se trouvera en bas de page. Nous allons ajouter un personnage et le faire se déplacer avec le clavier.

Installer le framework

Phaser est actuellement à sa version 3. Pour l’installer, vous avez plusieurs solutions. Vous pouvez le télécharger directement sur le site à cette adresse : https://phaser.io/download/stable
ou bien utiliser le CDN dans votre page html :

<script src="//cdn.jsdelivr.net/npm/phaser@3.20.1/dist/phaser.min.js"></script> 

Voici un exemple de page html simple pour notre futur jeu :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Phaser 3</title>
        <script src="js/phaser.min.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body>
        <div id="game"></div>
        <p>Flêche gauche/droite pour déplacer le personnage</p>
    </body>
    <footer>
        Tutoriel par Benjamin 'Shinochi' François - <a href="https://blog.bfrancois.com" target="_blank"></a>Poulpicorp</a>
    </footer>
</html>

La structure de Phaser

J’ai créé un fichier app.js qui contiendra toute la logique de notre « jeu ». La structure d’un jeu Phaser est généralement la suivante :

var config = {
    type: Phaser.AUTO,
    width:800,
    height: 600,
    scene: {
        preload:preload,
        create:create,
        update:update
    }
};

var game = new Phaser.Game(config);

var preload = () => {

};

var create = () => {

};

var update = () => {

};

Un jeu possède trois fonctions principales.

La fonction preload est appelé au lancement de Phaser. Elle sert à charger les diverses ressources (images, sons, etc…) de votre jeu.

La fonction create, comme son nom l’indique, est l’endroit où l’on va créer les divers éléments du jeu (joueurs, ennemis, décors, …).

La dernière, update, permets de coder la logique du jeu.

Charger les ressources

Dans la fonction preload, nous allons ajouter les lignes suivantes :

this.load.image('bg', 'assets/bg/bg.png');
this.load.image('player', 'assets/player.png');

assets/bg/bg.png et assets/player.png correspondent au chemin vers les fichiers à charger. Le premier paramètre est le nom que nous donnons à cette ressource.

Créer les élèments du jeu

Nous pouvons maintenant commencer à créer les différents élèments de notre « jeu ».
Ces élèments sont à créer dans la fonction create :

this.add.image(0, 0, 'bg').setOrigin(0,0);
touches = this.input.keyboard.createCursorKeys();
player = this.add.image(400, 500, 'player');

Au niveau de var game = new Phaser.Game(config); nous allons ajouter les lignes suivantes :

var touches;
var player;

Nous ajoutons le fond, nous enregistrons les touches du clavier, puis nous ajoutons le joueur à la scène du jeu.

Déplacer le joueur

La dernière étape avant de lancer notre jeu est de détecter les touches appuyées. Dans la fonction update, ajouter les lignes suivantes :

if(this.input.keyboard.checkDown(touches.left, 0)){
        player.x -=5;
}else if(this.input.keyboard.checkDown(touches.right, 0)){
        player.x +=5;
}

Tester le jeu

Pour tester le jeu, il vous faudra un serveur HTTP (WAMP, LAMP, Node.js, etc…).
Dans mon cas, pour cet exemple, j’utilise un serveur WAMP, mais sur un autre projet j’utilise un serveur Node.js.

Conclusion

Ce moteur de jeu a fait pas mal de chemin et a gagné en puissance. Si vous développez souvent en Javascript, c’est un framework qui peut être fait pour vous. D’ailleurs, il sert de base au moteur de jeu RPG Maker MV.
Pour aller plus loin, vous pouvez regarder dans la documentation pour faire sauter le joueur avec de la physique.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *