Game Dev,Phaser

Créer un jeu avec Phaser – partie 2

15 May , 2015  

capture d'écran de Tiled

Après avoir mis en place les différents ‘états’ de notre mini jeu, et préchargé nos ressources (voir partie 1), passons  à la création du tableau  et à notre état Game.js qui contiendra la logique de code du jeu.

Article précédent: Créer un jeu avec Phaser – partie 1

Création du monde/tableau du jeu avec Tiled

Dans un premier temps créons l’univers dans lequel notre joueur va pouvoir évoluer, ici un tableau de plateformes simples.

Quelques notions de bases pour ceux qui ne seraient pas familiers avec les tilemap
  • Une tuile ou tile : est une image qui représente une fraction d’un tableau. Ex :tile_img
  • Un set de tuiles ou tileset : une image qui contient différentes tuiles (toutes au même format). Ex: tileset_ex
  • Un tilemap: un tableau à 2 dimensions qui contient le tableau/monde et où chaque valeur correspond à une tuile.

Phaser permet d’importer et de manipuler très simplement des tilemaps.

Et grâce à Tiled, créer/modifier ses tilemaps est une tâche facile et intuitive.(le lien de téléchargement pour ceux qui ne l’auraient pas fait : ICI)

Ouvrons Tiled et créons notre carte

capture_tiled2

capture 1 – création d’un tilemap

La taille des éléments est celle d’une tuile, soit 40 x 40 px. Nous créons une carte de 1000 pixels – 25 tuiles x 40 px –  de largeur et 280 pixels – 7 tuiles x 40px-  de hauteur (notre écran de jeu fait 320 px de hauteur, nous gardons un espace de 40 px pour mettre notre HUD qui contiendra diverses informations relative au gameplay, le nombre de vie, etc). Via ‘Calque’ > ‘Nouveau Tileset’ nous ajoutons notre tileset. Nos sprites sont maintenant disponibles sous l’onglet ‘Tilesets’. (il est possible d’avoir plusieurs tilesets différents)

Tiled permet de créer différents calques, nous allons en créer 2 : un qui contiendra les tuiles sur lesquels des collisions devront se produire (murs, sols) et que nous appelons ‘collision’ et un contenant les tuiles purement décoratives (ciel, herbe, etc) que nous appelons ‘arriere-plan’. Très simplement il nous reste maintenant à peupler chaque calque avec les sprites du tileset importé, en le sélectionnant.

tiled_capture3

Capture 2 – population d’un calque avec un tileset

Il ne nous reste plus qu’exporter notre carte pour qu’elle puisse être importée dans Phaser. Phaser permet l’importation de tilemaps au format CSV et JSON. Nous utiliserons le format JSON (via Fichier/exporter en tant que )

Afficher notre tableau dans Phaser

Revenons maintenant à notre code. Il faut tout d’abord importer ces nouvelles ressources, notre tilemap au format JSON et la feuille de sprite qui lui correspond et cela se passe dans notre état Preloader.js, dans la fonction startLoad() que nous avons crée et qui indique les fichiers à charger (voir Partie 1)

Passons maintenant à l’affichage proprement dit, dansle fichier Game.js

gérons aussi les collisions pour le calque ‘collision’ en donnant les index des tuiles concernées (dans notre tileset les tiles 1 à 9), et  délimitons aussi les limites de notre tableau en terme de physique.

Infos – Dans Phaser on peut aussi désigner les tuiles d’un calque affectées par la collision par plusieurs méthodes :

  • par exclusion : par exemple avec this.map.setCollisionByExclusion([1,3,5],true, ‘collision’) toutes les tuiles de notre calque ‘collision’ répondraient à la collision sauf les tuiles ayant pour index 1,3 et 5 dans notre tileset.
  • par index, pour ne designer qu’une seule tuile: par exemple this.map.setCollisionByIndex(1, true, ‘collision’) signifie que seule la tuile ayant l’index 1 dans le tileset répondra à la collision (alternativement cette méthode peut également servir à supprimer la collision sur une tuile en passant false comme deuxième paramètre. Elle sera utile par exemple pour passer une tuile d’ouverte à fermée lors d’un gameplay, etc).

 

Si nous lançons notre jeu, ça y est notre tableau apparait exactement comme nous l’avons crée dans Tiled.

jeu_capture_1

Ajoutons le joueur

Là encore il faut tout d’abord ajouter la ressource graphique, c’est à dire la feuille de sprite contenant le joueur et ses différentes animations (marcher, sauter, etc) dans notre state Preload.js.

Pour notre joueur nous allons étendre l’objet Sprite de Phaser que nous sauvegardons dans un fichier que nous appelons logiquement player.js. (tous les fichiers que nous créons doivent bien sûr être appelés dans la page HTML contenant le jeu, et il va de soit que dans la version en ligne il faudra concaténer ces fichiers pour de meilleures performances, avec Gruntjs ou autre)

Puis nous l’instancions dans notre jeu à la suite de la création de notre tilemap

Si nous lançons notre application maintenant, le joueur apparait bien, il tombe en bas de l’écran, et il ne s’arrête pas sur les tuiles de collision. Il faut en effet tester les collisions entre le joueur et la tilemap lors de la fonction update

 

Déplacement du joueur

Toujours dans la fonction update de Game.js, nous allons tester si les touches droite , gauche et up du clavier sont appuyées, et appeler en conséquence les fonctions de notre sprite pour le faire se déplacer ou le faire sauter, ainsi que déclencher l’animation qui correspond au mouvement (droite, gauche, sauter, sur place).

Et dans notre fichier player.js nous définissons donc les fonctions move(), jump() et stand()

Voila notre joueur se déplace maintenant dans notre tableau, avance et saute sur les plateformes.

Notre tableau est plus grand que l’écran même de jeu. Nous rajoutons donc le code suivant dans logique de jeu pour que la caméra suive le joueur et que donc il puisse se déplacer de long en large sur 1300px de large de notre tilemap.

Notre joueur se déplace maintenant dans la totalité de notre tableau. (utilisez les flèches droite et gauche pour se déplacer et flèche vers le haut pour sauter)

 


Dans la partie suivante nous rajouterons des ennemies ainsi que des fruits à collecter, et verrons la notion de groupes.
Ci-dessous le code des fichiers Game.js et player.js  en entier.

et notre fichier game.js


Leave a Reply

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

*