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 tutoriel contient les éléments suivants :
- 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
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. Ce personnage peut aller à gauche, à droite, et sauter avec la flèche du haut s’il touche le sol. Les animations sur ce personnage ont été définies. Cette base a été créée à partir du tutoriel Créer son premier jeu de plate-forme en découvrant Phaser sur lequel on a enlevé toute la partie “génération des étoiles”, “génération du score”, “génération des bombes”.
Cette base est directement accessible sur codesandbox sous forme de template: lorsque vous créez une nouvelle sandbox, choisissez « explore templates » et et recherchez dans la barre de recherche « phaser-base-plateforme »
Nous allons dans ce tutoriel supprimer les plate-formes pour les remplacer par celles d’une carte générée par Tiled.
Sur ce tutoriel, il est important d’utiliser au moins la version, 3.20 de Phaser, autrement on pourrait avoir des soucis d’absence de détection de collision entre le personnage et les plate-formes. Ceci ne devrait pas poser de probl
Lancement de Tiled et chargement d'un jeu de tuiles
Création d'une nouvelle carte
Nous téléchargeons Tiled à l’adresse suivante :
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”.
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.
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 .
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 :
- depuis une collections d’images dans laquelle chaque tuile doit provenir d’une image différente,
- ou depuis une image globale (un jeu de tuile = tileset) regroupant toutes les tuiles sur une image, comme présenté en Figure 5.
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é à 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.
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)
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.
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.
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
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”.
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 :
- un fichier tuilesJeu.png qui contient toutes les images du jeu
- 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 src/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", "src/assets/tuilesJeu.png");
// chargement de la carte
this.load.tilemapTiledJSON("carte", "src/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 calque_background = carteDuNiveau.createLayer(
"calque_background",
tileset
);
// chargement du calque calque_background_2
const calque_background_2 = carteDuNiveau.createLayer(
"calque_background_2",
tileset
);
// chargement du calque calque_plateformes
const calque_plateformes = carteDuNiveau.createLayer(
"calque_plateformes",
tileset
); Ajout du modèle de collisions dans la fonction create
Apres avoir créé le calque 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
calque_plateformes.setCollisionByProperty({ estSolide: true }); Il ne reste plus qu’à ajouter une collision entre le joueur player et le calque calque_plateformes. Toujours dans create, mais après avoir défini player et calque_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
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 (clavier.up.isDown && player.body.touching.down) {
player.setVelocityY(-300);
} doit etre corrigé en :
if (clavier.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.
