Phaser: Créer son propre jeu vidéo

Phaser

Bonjour à vous chers lecteurs !
Savez vous que le développement de jeu vidéo n’est pas réservé aux langages Java, C, C++ … ?
Vous êtes développeur web et vous aimeriez bien concevoir votre propre jeu vidéo ?
Ça tombe bien ! Voici une librairie JS (parmi tant d’autre) qui peut vous le permettre !
Voici donc Phaser !

Introduction

Phaser est une librairie JS opensource développé par l’entreprise Photon Storm depuis septembre 2014.
Il utilise les technologies de Canvas et WebGl pour afficher les éléments graphiques.
Je vous laisser aller voir le site officiel de Phaser si vous souhaitez vous documenter davantage, place à la pratique !

Démonstration de Phaser

Pour cette démonstration, je vais tout simplement reprendre l’exemple fourni sur leur site officiel et je vais tenter de vous expliquer au mieux les bases.
Voici le code fourni:

<!DOCTYPE html>
<html lang="fr-FR">
<head>
    <title>PhaserJs</title>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.24.1/dist/phaser.min.js"></script>
</head>
<body>

<script>
    const config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: {y: 200}
            }
        },
        scene: {
            preload: preload,
            create: create
        }
    };

    const game = new Phaser.Game(config);

    function preload() {
        this.load.setBaseURL('http://labs.phaser.io');

        this.load.image('sky', 'assets/skies/space3.png');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
        this.load.image('red', 'assets/particles/red.png');
    }

    function create() {
        this.add.image(400, 300, 'sky');

        const particles = this.add.particles('red');

        const emitter = particles.createEmitter({
            speed: 100,
            scale: {start: 1, end: 0},
            blendMode: 'ADD'
        });

        const logo = this.physics.add.image(400, 100, 'logo');

        logo.setVelocity(100, 200);
        logo.setBounce(1, 1);
        logo.setCollideWorldBounds(true);

        emitter.startFollow(logo);
    }
</script>

</body>
</html>

Inclusion de la librairie Phaser

<head>
    <title>PhaserJs</title>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.24.1/dist/phaser.min.js"></script>
</head>

Tout d’abord dans le head de notre page, nous importons la librairie à l’aide d’un cdn.
Mais vous pouvez également télécharger le fichier js et l’inclure localement ou bien l’installer avec le gestionnaire de paquet node de votre choix.

Configuration

const config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: {y: 200}
            }
        },
        scene: {
            preload: preload,
            create: create
        }
    };

Nous voilà maintenant dans notre script JS principal.
Dans un premier temps, nous avons besoin d’écrire une configuration pour créer un jeu avec Phaser.
Détaillons celle fourni en exemple:

  • type: Définie si phaser utilise WebGL ou canvas, auto sélectionnera WebGl en priorité si disponible
  • width: La largeur de la zone de jeu
  • height: La hauteur de la zone de jeu
  • physics: La configuration de la physique
    • default: Type de système de physique, il existe arcade, impact et matter
    • arcade: Les configurations de la physique du jeu, voici la documentation associée
  • scene: La configuration des différentes fonctions de jeu

Si vous souhaitez aller plus loin, voici la documentation de la configuration.

Création du jeu

const game = new Phaser.Game(config);

Une ligne simple, on initialise le jeu avec les configurations précédentes !

Fonction de préchargement du jeu

function preload() {
        this.load.setBaseURL('http://labs.phaser.io');

        this.load.image('sky', 'assets/skies/space3.png');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
        this.load.image('red', 'assets/particles/red.png');
    }

Voici l’une des 3 fonctions du cycle de vie d’un jeu Phaser.
La fonction preload est appelée une seule fois avant la fonction create.
Elle permet de charger toutes les images utilisées dans votre jeu.

Dans l’exemple de base de Phaser, toutes les images sont récupérées depuis labs.phaser.io.
On voit ensuite que trois images sont chargées et seront accessible en utilisant le mot clé associé (ici sky, logo et red).

Fonction de création du jeu

function create() {
        this.add.image(400, 300, 'sky');

        const particles = this.add.particles('red');

        const emitter = particles.createEmitter({
            speed: 100,
            scale: {start: 1, end: 0},
            blendMode: 'ADD'
        });

        const logo = this.physics.add.image(400, 100, 'logo');

        logo.setVelocity(100, 200);
        logo.setBounce(1, 1);
        logo.setCollideWorldBounds(true);

        emitter.startFollow(logo);
    }

Voici la seconde fonction du cycle de vie de Phaser.
La fonction create est appelée après la fonction preload.
Elle est appelée une fois au lancement du jeu et permet d’initialiser la base du jeu.

La première ligne de la fonction permet d’ajouter une image (ici sky) aux coordonnées 400 (pour x) et 300 (pour y).
Un objet particule est ensuite créée à partir de l’image chargée avec l’identifiant ‘red’.
Sur la ligne d’après on créer un ’emitter’, c’est un peu ce qui va controller nos particules.

On affiche ensuite le logo aux coordonnées 400 (en x) et 100 (en y) à partir de l’image avec l’identifiant ‘logo’.

Ensuite, on affecte à ce logo une vélocité de 100 sur l’axe des x et 200 sur l’axe des y.
Puis, on lui ajoute un rebond (1,1 désignant sans perte de vélocité au rebond sur x et y).
Et enfin on lui permet de rebondir sur les limites du jeu.

Le meilleur pour la fin, on affiche l’emitter de nos particules et on lui dit de suivre notre logo !


Bon ce morceaux était assez lourd je vous l’accord, mais au final voici le rendu que ça nous donne:
Ps: Chez certaines personnes les images ne s’affiche pas, je n’ai pas trouvé de solution désolé …

Voilà, vous êtes fin prêt à développer les jeux les plus fous avec Phaser !


Note de fin: Je n’ai pas abordé la 3ème fonction de cycle de vie de Phaser qui se nomme update. Je vous laisse le soin d’aller découvrir par vous même tout cet univers de développement qui peut vous permettre de faire de grandes choses !

Sources


Articles récents

Phaser: Créer son propre jeu vidéo

Laisser un commentaire

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

Retour en haut