Game Dev,Phaser

Créer un jeu avec Phaser – partie 1

12 Mar , 2015  

Pour découvrir Phaser nous allons coder un petit jeu de plateforme simple, mais qui nous permettra d’explorer les fonctionnalités de bases de ce framework.

Dans un premier temps, nous allons poser l’architecture de notre projet. Pour comprendre cette architecture nous allons d’abords voir la notion de State, ou état, de Phaser.

Article précédent: introduction à Phaser

L’architecture de notre projet

Lorsque nous jouons à un jeu vidéo, même le plus simple, nous parcourons généralement différents écrans : un écran d’accueil, le jeu en tant que tel, un écran de fin de partie, un écran contenant les règles du jeu,  les meilleurs scores, etc.

Chaque état/écran contient son propre bloc de code et  est lié avec un ou plusieurs autres. Un des points très intéressant du framework Phaser est qu’il possède justement un gestionnaire d’état – le State manager – permettant de créer très facilement, et de maintenir, les blocs de codes de chaque écran/état d’un jeu.

Note : le but de ce tutorial étant d’apprendre les bases du framework Phaser, notre exemple est d’une simplicité extrême et aura un intérêt relativement limité d’un point de vue ludique.

Dans le dossier /js nous allons placer tous nos fichiers de code js, et nous les répartissons ainsi (ceci est ma façon de gérer mes projets, mais vous pouvez tout à fait décider de vous organiser autrement)

  • un dossier /states qui contiendra tous les états/states que nous allons créer pour notre jeu : un écran de chargement que nous appellerons Preloader, le menu que nous appellerons Menu, le jeu lui même que nous appellerons Game, et enfin un écran de fin de partie que nous appellerons GameOver.
  • un dossier /entites dans lequel nous allons placer les fichiers définissant le joueur et les différentes entités du jeu.
  • le framework Phaser lui même.

Dans le dossier /assets nous allons placer toutes nos ressources graphiques et/ou sonores.

Et enfin à la racine nous avons notre ficher index.html, qui appellera le jeu en tant que tel, ainsi que toutes les ressources.
photo de l'architecture de notre projet Phaser

 

Les différents Etat ou State

Créons maintenant nos différents états ou state.

Dans Phaser chaque état contient au minimum 3 fonctions de bases:

  • preload : dans laquelle on placera les fichiers à télécharger et que Phaser va aller chercher en premier.
  • create : dans laquelle nous allons pouvoir créer nos éléments de jeu et définir plusieurs propriétés propres au jeu
  • update : qui est appelé à chaque rendu de frame.

Puis, toutes les fonctions que nous définirons nous même pour chaque état. . Notez que “preload“, “create” et “update”  sont des noms de fonctions réservées et qu’il convient de ne pas les utiliser pour nommer vos fonctions.

Créons donc nos 5 états que nous compléterons au fur et à mesure.

Boot

Dans cet état nous allons définir le format de notre jeu, et sa mise à l’échelle en fonction des périphériques. Ici deux options sont possibles :  définir une taille assez grande et réduire pour les formats plus petits, ou l’inverse. Je dirai que cela dépend quelle plateforme vous souhaitez vraiment privilégier. Si ce sont les mobiles avec de petits écrans (donc non des tablettes), la 2ème option est la plus souhaitable pour un gain de performance , mais cela dépend du jeu également.

Pour cet exemple n ous partirons sur l’option 2, soit un format de 480×320, qui sera remis à l’échelle.

Explication : Dans cet état nous gérons la mise à l’échelle de notre jeu et le passage au chargement des données (cf code commenté)

Preloader

Dans cet état, nous allons précharger toutes les ressources dont nous allons avoir besoin dans notre jeu : toutes nos feuilles de sprites – pour le joueur, les ennemis et le tableau -, nos tableaux (en l’occurrence nous n’en aurons qu’un seul).

Pour finir nous allons créer nos états restants mais vide et nous les compléterons dans la suite de ce tutorial

Game

 Menu

GameOver

 

Le squelette de notre projet est prêt. Nous allons pouvoir passer à la suite avec et commencer à coder notre jeu à proprement parler. Nous verrons la logique de notre jeu, le joueur et le monde (le premier niveau) dans le tutorial suivant.

 

Le fichier index.html

Dans fichier index.html nous chargeons Phaser, nos propres fichiers (js, images, sons, etc). Puis il nous reste à créer un nouvel objet Phaser et instancier notre jeu, puis d’ajouter les différents états que nous venons de créer.

Enfin, nous lançons l’état qui lancera notre jeu (que nous avons appelé Boot)

Le fichier index.html de ce projet (disponible également dans le zip du squelette du jeu ci-dessous) :

Créer un jeu avec Phaser – Partie 2

Télécharger le squelette de notre jeu


3 Responses

  1. Cédrick dit :

    Bonjour Nathalie,

    J’ai trouvé ton tuto très intéressant, mais en suivant la partie 2, j’ai remarqué qu’il y avait quelques manques de précision quant au positionnement des bouts de code, dans quelles méthodes elles doivent être intégrée. De plus tu ne parles jamais du index.html et de son contenu. C’est peut être évident pour des dev JS confirmés mais ce n’est pas mon cas.

    Pourrais tu ajouté le zip du projet “fini” dans ta seconde partie, j’aimerai beaucoup voir la conception dans sa globalité.

    Pour finir, aurait tu un outils qui permette de créer ses propres tilesets à conseiller ? j’utilise Piskel qui est plutot intéressant comme outil mais je le trouve rigide pour les tilesets.

    Merci beaucoup pour ce tuto qui m’a semblé le plus intéressant de ceux que j’ai regardé en terme d’architecture projet !

    • Nathalie Wormser dit :

      Bonjour Cédrick,
      Merci de ton commentaire.
      Tu as le code complet de Game.js et de player.js en bas de page, ainsi si tu n’es pas sûr de l’ordre des éléments de code donnés au dessus tu peux prendre le code complet.
      Ceci étant dit j’ai commencé cette série de tuto sur Phaser il y a un bon moment et je n’ai jamais fini…. J’ai prévu de le refaire bientôt, les nouvelles versions de Phaser ayant pas mal de nouvelles méthodes qui simplifient pas mal de choses.

      Concernant le fichier index.html oui c’est vrai je vois que je ne dis rien dessus! Je viens donc de faire une petite mise à jour rapide dans ‘Créer un jeu avec Phaser – partie 1′ sur ce sujet.

      Pour les tilesets, personnellement j’aime beaucoup Pyxel Edit, il est payant (mais vraiment pas cher) mais très pratiques pour les tilesets. Sinon j’utilise Photoshop et j’utilise des scripts pour agencer les tilesets lorsque c’est possible.

      • Cédrick dit :

        Ahah oui en effet j’ai déterré un tuto plus tout jeune sans faire attention :p.

        Merci de tes réponses en tous cas, je repasserai pour voir ce que tu ajouteras :)

        Bonne continuation d’ici là !!

Leave a Reply

Your email address will not be published. Required fields are marked *

*