Créer une carte sur Tiled et l’intégrer en Phaser 3

L’association de Tiled avec Phaser est la combinaison gagnante pour créer des jeux de plate-forme ou des RPG avec un maximum d’efficacité et un gain de temps. Les cartes créées peuvent être complexe mais faciliter grandement le développement. 

Ce que contient ce tutoriel :  

  • Création via Tiled d’une première carte simple multi-calques  utilisant un jeu de tuiles issu d’une seule image
  • Ajout de propriétés supplémentaires pour la gestion des collisions sur les tuiles 
  • Intégration complète de la carte et du jeu de tuiles dans Phaser 3
Ce que NE contient PAS ce tutoriel :   (mais qui fera l’objet d’autres tutos) :
  • Ajout d’un calque d’objets, de spawning points
  • Ajout de calques dynamiques
  • Utilisation de tuiles inclinées ou avec modèle hitbox personnalisé pour  un rendu physique plus poussé.
  • Des effets de profondeur, parallax, ou de superposition de calques avec le joueur  

Le résultat est un jeu dans lequel un personnage peut simplement se mouvoir dans l’espace, mais ne peut pas sortir de l’écran. Il n’y a pas de but en soi, si ce n’est parcourir toute la carte.

Le code et les fichiers résultats de ce tutoriel sont disponibles à l’adresse suivante :

https://github.com/bdarties/Phaser3_insert_single_map_from_tiled

Test du résultat de ce tutoriel

Base de départ pour ce tutoriel

Nous partons d’une base constituée d’un jeu dans lequel un personnage est présent sur un monde de taille fixe avec une gravité prédéfinie, qui contient un fond en ciel bleu, un sol et 3 plates-forme. Ce personnage peut aller à gauche, à droite, et sauter avec la flèche du haut s’il touche le sol (voir Figure 1). Ce code est donc une suite du tutoriel “making your first phaser 3 game” disponible ici : https://phaser.io/tutorials/making-your-first-phaser-3-game  

base_plateforme
Figure 1 : un personnage pouvant bouger dans un monde simple

Dans la suite, nous supprimerons les plate-formes pour les remplacer par une carte générée par Tiled, mais garderons les mouvements et animations du personnage.

Lancement de Tiled et chargement d'un jeu de tuiles

Création d'une nouvelle carte​

Nous téléchargeons Tiled à l’adresse suivante :

https://www.mapeditor.org

Puis nous l’installons. Nous lançons ensuite Tiled. Une fenêtre nous invite à créer une nouvelle carte ou à ouvrir une carte existante (Figure 2). Nous choisissons “New Map”.

Figure 2 : boite d'accueil
Paramètres de la nouvelle carte

la boite ci-contre s’ouvre (Figure 3) dans laquelle vont être définis les différents paramètres de notre carte. Ces paramètres pourront être modifiés par la suite (mais il est conseillé de minimiser ces changements).

  • Pour l’orientation nous choisissons “orthogonal” (défaut)
  • Le format de couches (Tiles layer) sera mis en CSV
  •  La taille des tuiles est ici de 32 x 32 pixels. Cette dimension importante et doit être adaptée au jeu de tuiles utilisé.
  • Nous définirons une carte de 100 x 20 tuiles, ce qui correspondra à une taille de carte de 3200 x 640 pixels.
Figure 3 : nouvelle carte

Nous cliquons sur le bouton “save as” et enregistrons la carte au format tmx, sous le nom map.tmx

Les dimensions 3200×640 correspondent ici aux dimensions du monde. plus tard, il conviendra dans notre code, non seulement de définir le monde de jeu avec des dimensions similaires, mais également les bornes de la caméra afin de pouvoir opérer un tracking efficace sans que la caméra ne déborde hors champ.

fenêtre d'édition de la carte

La fenêtre d’édition principale de map.tmx s’ouvre (Figure 4). Il s’agit de la fenêtre que nous aurions eu si nous avions fermé l’application puis réouvert cette dernière, et ouvert le fichier map.tmx .

Figure 4 : Fenêtre d'édition principale de Tiled

La fenêtre d’édition se décompose comme suit :

  • La colonne de gauche reprend les propriétés de la carte, et permet de modifier ces derniers, notamment la taille des tuiles (mais pas leur nombre)
  • La fenêtre centrale est la représentation de la carte sous forme de tuiles (pour l’instant vide)
  • La barre d’outils supérieure présente les différents outils pour remplir les cases de la carte avec les tuiles.
  • Le bloc supérieur de la colonne de droite permet de définir des calques pour superposer des couches de tuiles. On pourra par exemple définir un calque de fond, un calque de blocs solides, un calque de décors …
  •  Le bloc inférieur de la colonne de droite permet de gérer le jeu de tuiles

En manipulant l’application, vous pourriez par inadvertance fermer une fenêtre. Il est toujours possible de rouvrir une fenêtre malencontreusement fermée en la sélectionnant dans View -> View and toolbar, ou en sélectionnant View -> View and toolbar -> Reset to default layout 

Création d'un jeu de tuiles

On va tout d’abord ajouter un premier jeu de tuiles. Les jeux de tuiles peuvent être créés : 

  1. depuis une collections d’images dans laquelle chaque tuile doit provenir d’une image différente, 
  2. ou depuis une image globale (un jeu de tuile = tileset) regroupant toutes les tuiles sur une image, comme présenté en Figure 5.
Figure 5 - Un exemple de fichier tileset

La première méthode est la plus flexible – rajout de tuiles à la volée – . Mais elle implique de traiter plusieurs fichiers, ce qui est fastidieux lors de l’intégration avec Phaser. Nous privilégions ici  la seconde méthode ici. Nous disposons d’un fichier tileset bien défini, contenant l’ensemble des images du jeu sous forme de mozaique. De nombreux exemples sont disponibles sur le net, notamment sur opengameart.org .

 Dans ce tutoriel, nous utiliserons le fichier mes_tuiles.png disponible via ce lien : tuilesJeu.png (bouton droit / enregistrer la cible du lien sous …)

 Ce fichier de tuiles possède des propriétés propres : les tuiles sont de taille 32×32 pixels, il n’y a pas de marge ou d’espace entre les tuiles, et pas de couleur de fond. ces paramètres sont bien évidemment à  adapter si vous utilisez un fichier tileset différent ou si vous créez votre tileset. Nous intégrons ce fichier à Tiled.

Depuis le bloc inférieur de la colonne de droite, cliquez sur le bouton new tileset. Vous pouvez également passer par File -> new -> new tileset pour un résultat identique.La fenêtre de la Figure 6 apparait :

  • Nous choisissons un nom pour le tileset, ici tuiles_de_jeu
  • Le type sera ici “Based on a tileset image” (méthode 2)
  • important : le tileset sera embarqué avec la carte : il faut cocher la case “embed in map (cette option pourra être cochée  par la suite si vous avez oublié  de la cocher à cette étape)
  • On précise la source du fichier de tuiles.
  • On entre les paramètres propres (taille des tuiles, espacement…). Sur notre exemple on est sur 32×32 pixels, et 0 marge. On valide.
Figure 6 - nouveau jeu de tuiles

Notre jeu de tuile apparait dans le bloc inférieur droit. Nous sommes prêts à créer un carte.

Création d'une carte multi-calques (layers)

Une carte peut se décomposer en plusieurs calques, appelées layer, qui vont faciliter aussi bien la création que l’interaction avec le personnage dans la phase d’intégration. Par exemple : on peut avoir un calque “background”, un calque “plate-formes” qui aura des propriété de collision avec nos sprites, un calque “décor” pour ajouter des éléments de décoration, un calque “objets” pour positionner des objets de jeu … avant de commencer à créer notre carte multi-calques, il faut retenir les propriétés suivantes :

  • Le l’éditeur de calques se situe usuellement dans la partie supérieure de la colonne de droite de l’interface, via l’onglet ‘Layer’ si ce dernier était masqué.
  • Les calques se superposent et l’ordre importe.
  • Quand on place une tuile, on la place sur un seul calque : le calque en cours de sélection
  • Au niveau de l’éditeur on peut créer, sélectionner, cacher/montrer, ou réordonner les calques. Ceci se fait dans l’éditeur – icônes de la barre inférieure – , ou via les items du menu “layer”
Création du background

c’est parti pour la création d’un premier calque, qui ne contiendra que des éléments de décor de fond. On part ici sur un environnement à l’intérieur d’une grotte.

  • Ajoutez un nouveau calque (bouton “new layer -> tile layer” de l’éditeur de calques, ou menu “layer -> new -> tile layer” ) et nommez le calque_background.
  • La zone d’édition dispose désormais d’un nouveau calque, qui est sélectionné. Notre affichage doit correspondre à ce qui est présenté sur la Figure 7. Notez la présence des tuiles en bas à droite, et la présence d’un calque calque_background en haut à droite; ce calque est sélectionné (focus sur la seule ligne de la liste des calques) visible (oeil ouvert à droite du nom) et déverrouillé (cadenas ouvert)  
Figure 7 : tout est prêt pour remplir le calque de fond

On peut désormais poser des tuiles en les sélectionnant et en les faisant glisser dans la zone du calque.

  • Les principaux outils de dessins sont présentés dans la zone supérieure de la fenêtre centrale :
    A ce niveau, seul le tampon (tout à gauche, stamp brush), la gomme et éventuellement le pot (bucket fill mode) sont vraiment utiles. Les 3 icônes de droite permettent de faire de la sélection de tuiles.
  • Les outils suivants sont dédiés aux tuiles (apparaissent quand au moins une tuile est
  •  Il est possible de poser des blocs de tuiles d’un coup, en en sélectionnant plusieurs d’un coup
  •  d’autres outils permettent de jouer sur l’orientation des tuiles, pour appliquer des effets de retournements :

 A vous de jouer : en sélectionnant les tuiles et les outils appropriés, dessinez un fond de grotte par simple glissement de motifs. Le fond ne nécessite généralement pas de gros travail. Il peut être très grossier,  car de nombreux éléments viendront ensuite se superposer dans les calques supérieurs. Apres un peu de travail, on obtient un résultat qui peut s’apparenter à ce qui est présenté en Figure 8. 

Figure 8 : un premier fond sommaire

Nous allons améliore un peu ce fond… en ajoutant un second calque sur lequel on pourra utiliser des tuiles ayant de la transparence. Ceci va nous permettre, par exemple, d’arrondir les bords et éviter l’effet carré.

  • Ajoutez un nouveau calque (bouton “new layer -> tile layer” de l’éditeur de calques, ou menu “layer -> new -> tile layer” ) et nommez le calque_background_2.
  • Veillez à ce que ce calque soit au dessus de calque_background. 
  • Vous avez à présent 2 calques, et pouvez positionner de nouvelles tuiles (avec ou sans effet de transparence) sur le nouveau calque pour créer quelque chose de visuellement plus joli.
  • Vous pouvez jongler entre les calques, leur affichage, gérer l’opacité pour faciliter le placement des tuiles.
A vous de jouer : placez quelques tuiles additionnelles sur le nouveau calque pour adoucir les bords. N’hésitez pas à reprendre en parallèle le précédent calque pour ajouter des blocs supplémentaires au besoin. On obtient un résultat qui peut s’apparenter à ce qui est présenté en Figure 9. Nos calques de fond sont désormais prêts. 
Figure 9 : deux calques permettent d'avoir des effets arrondis
Création des plates-formes

De manière similaire, nous ajoutons un nouveau calque, qui contiendra les plate-formes du jeu :

  • Ajoutez un nouveau calque (bouton “new layer -> tile layer” de l’éditeur de calques, ou menu “layer -> new -> tile layer” ) et nommez le calque_plateformes.

A vous de jouer : créez les plateformes de votre jeu en utilisant les tuiles de votre choix, comme en Figure 10.

Figure 10 : le design final de notre niveau
Préparer l'intégration avec Phaser pour la gestion des collisions

Nous n’avons jusqu’à présent que du design. Afin de préparer efficacement l’intégration des mécanismes de collision avec Tiled, nous allons ajouter aux tuiles une propriété que nous allons appeler “estSolide” qui sera un booléen positionné à vrai  si notre personnage peut se heurter à la tuile, et faux sinon. Il va de soi que seuls les blocs de place-forme, sol ou roche  auront la propriété estSolide positionnée à vrai.

  • Editez les propriétés du jeu de tuiles “tuiles_de_jeu” en cliquant sur l’icône “edit tileset” . L’onglet map.tmx#tuiles_de_jeu s’ouvre. Quand vous êtes sur cet onglet, la barre de menus change et fait apparaître le menu Tileset
  • Si ce n’était pas déjà la cas, affichez le volet des propriétés du jeu de tuiles (menu Tileset -> TilesetProperties … ). Le volet Properties (à gauche sur la Figure 12) doit être visible.
  • Sélectionnez l’ensemble des tuiles de la fenêtre. Il est important que toutes les tuiles soient couvertes par la sélection
  • Cliquez sur l’icône “add property. La boite de dialogue de la Figure s’ouvre
  • Saisissez comme nom “estSolide” de type bool et validez.
  • Désormais, chaque tuile possède une propriété supplémentaire “estSolide” qui est une checkbox dans la partie CustomProperties
  • Sélectionnez les tuiles qui doivent pouvoir rentrer en collision avec le joueur et activez la case “estSolide”.
Figure 11 - ajout d'une nouvelle propriété aux tuiles

Le résultat doit être semblable à ce qui est présenté en Figure . Notez la présence de la case “estSolide”, qui ici est cochée pour toutes les tuiles sélectionnées de l’image. 

Figure 12 : la fenêtre d'édition des tuiles et des propriétés

Notre carte est désormais prête. Sauvegardez le fichier, puis exportez la carte au format json en faisant File -> export as  et en choisissant “JSON map file“. Vous obtenez un fichier map.json. Nous allons ensuite intégrer map.json dans phaser.

Intégration de la carte dans Phaser

Afin d’intégrer facilement la carte dans Phaser, faisons un point sur les éléments dont nous disposons, et leur organisation. Reprenant les noms utilisés dans ce tutoriel, nous avons deux fichiers importants :

  1. un fichier tuilesJeu.png qui contient toutes les images du jeu
  2. un fichier map.json qui est la carte codée. Cette carte est composée des éléments suivants :
    •  un jeu de tuiles “tuiles_de_jeu“, utilisant des numéros qui font référence aux tuiles de tuileJeu.png ; la propriété supplémentaire “estSolide” par tuile est également définie dans “tuiles_de_jeu
    • . trois calques respectivement appelés calque_plateformes, calque_background et calque_background_2

Nous copions ces deux fichiers dans le répertoire assets de notre projet Phaser. 

Modification de la fonction preload : chargement des fichiers

Nous ajoutons dans la fonction preload les deux lignes suivantes :

// chargement tuiles de jeu
this.load.image("Phaser_tuilesdejeu", "assets/tuilesJeu.png");

// chargement de la carte
this.load.tilemapTiledJSON("carte", "assets/map.json"); 

Phaser_tuilesdejeu désigne désormais l’image contenant les tuiles, tandis que carte désigne la carte créée par Tiled, et contient tous les calques de jeu. Nous utiliserons ces identifiants dans la fonction create.

Modification de la fonction create : ajout des calques et du tileset

Nous ajoutons dans la fonction create les lignes suivantes permettant respectivement de créer la carte du niveau, et de charger dans la constante tileset le jeu de tuile nommé tuiles_de_jeu  de la carte, défini à partir de l’image pointée par Phaser_tuiledejeu :

// chargement de la carte
const carteDuNiveau = this.add.tilemap("carte");

// chargement du jeu de tuiles
const tileset = carteDuNiveau.addTilesetImage(
          "tuiles_de_jeu",
          "Phaser_tuilesdejeu"
        ); 

Nous chargeons les trois calques dans trois variables grace à la méthode createStaticLayer de la carte, en leur associant le jeu de tuile associé. Grace au code ci-dessous, nos calques sont désormais identifiés par les constantes brackgroundLayer, backgroundLayer2 et plateformes. Il est important de les définir avant de créer le personnage, sinon ce dernier se retrouvera derrière le décors.

// chargement du calque calque_background
const backgroundLayer = carteDuNiveau.createStaticLayer(
          "calque_background",
          tileset
        );

// chargement du calque calque_background_2
const backgroundLayer2 = carteDuNiveau.createStaticLayer(
          "calque_background_2",
          tileset
        );

// chargement du calque calque_plateformes
const plateformes = carteDuNiveau.createStaticLayer(
          "calque_plateformes",
          tileset
        ); 
Ajout du modèle de collisions dans la fonction create

Apres avoir créé le calque plateformes, nous indiquons quelles tuiles du calque sont solides  : pour rappel, on a mis la propriété estSolide à vrai pour tuiles. Nous utilisons donc la ligne suivante  :

// définition des tuiles de plateformes qui sont solides
// utilisation de la propriété estSolide
plateformes.setCollisionByProperty({ estSolide: true }); 

Il ne reste plus qu’à ajouter une collision entre le joueur et le calque plateformes. Toujours dans create, mais après avoir défini player et plateformes, nous ajoutons la ligne suivante :

// ajout d'une collision entre le joueur et le calque plateformes
this.physics.add.collider(player, plateformes);
 
Ajout du scrolling

Conformément au tutoriel sur l’ajout d’un scrolling (voir tuto pour les détails), nous ajoutons simplement les lignes suivantes pour redimensionner le monde et faire un tracking de la caméra sur le joueur :

 

// redimentionnement du monde avec les dimensions calculées via tiled
this.physics.world.setBounds(0, 0, 3200, 640);
//  ajout du champs de la caméra de taille identique à celle du monde
this.cameras.main.setBounds(0, 0, 3200, 640);
// ancrage de la caméra sur le joueur
this.cameras.main.startFollow(player); 
Correction des mouvements du personnage

Par rapport au jeu de base, il est important de modifier la ligne suivante pour que le personnage puisse sauter, en remplaçant touching par blocking. On peut également réduire la hauteur de saut pour la carte créée. Ainsi :

        if (cursors.up.isDown && player.body.touching.down) {
          player.setVelocityY(-300);
        } 

doit etre corrigé en : 

 

        if (cursors.up.isDown && player.body.blocked.down) {
          player.setVelocityY(-200);
        } 

Notre jeu est prêt, il ne reste plus qu’à tester et à admirer le résultat :

 

Figure 13 : et voila le résultat

Laisser un commentaire

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