Dans notre premier tutoriel de création de cartes sur Tiled, nous avons regardé comment créer des cartes simple ou multi-calques utilisant un jeu de tuiles unique – toutes les tuiles étaient contenues dans le même fichier – . Mais les choses peuvent se compliquer un peu dès que l’on souhaite récupérer des tuiles appartenant à plusieurs fichiers. Nous voyons ici comment charger un calque dont les tuiles proviendraient de plusieurs fichiers.
Rappel sur le chargement d'un calque dans phaser
Lorsqu’on souhaite charger une carte créée sous tiled et dont les calques ont été construits à partir du même jeu de tuile, le code peut se résumer ainsi :
Dans la fonction preload() on charge les fichiers de tuiles de jeu (ici tuilesJeu.png) et de la carte (ici carte.json) et les identifions par des clés (ici tuiles_de_jeu et carte )
// chargement tuiles de jeu
this.load.image("tuiles_de_jeu", "tuilesJeu.png");
// chargement de la carte
this.load.tilemapTiledJSON("carte", "carte.json"); Dans la fonction create() :
- on crée une variable (ici map) depuis la clé faisant référence à la carte Tiled (ici carte),
- on crée une variable (ici tileset) contenant le jeu de tuiles de la carte, en précisant l’identifiant utilisé sous Tiled et la clé du fichier tileset associé (ici tiled_tuiles et tuiles_de_jeu)
- Enfin on charge chacun des calques sous la forme d’un calque statique (staticLayer) en précisant son nom dans la carte, et le jeu de tuiles à lui appliquer. (On pourra répète l’opération pour tous les calques si la carte en comporte plusieurs).
par simplicité, tous les noms précédés du préfixe tiled_ sont des noms qu’on a du définir dans l’éditeur Tiled
// chargement de la carte du niveau
const map = this.add.tilemap("carte");
// chargement du jeu de tuiles
const tileset = map.addTilesetImage( "tiled_tuiles", "tuiles_de_jeu");
// chargement d'un calque
const calque = map.createStaticLayer( "tiled_calque", tileset); Charger des cartes multi-jeu de tuiles
Si maintenant on veut charger plusieurs jeux de tuiles, nous allons passer par un dynamic layer
charger plusieurs tileset dans un dynamicLayer
Un dynamicLayer, c’est comme un staticLayer, mais en mieux. Mêmes fonctions que les calques statiques (par exemple on peut interroger le layer pour savoir s’il y a une tuile à une coordonnée donnée), mais surtout on peut le modifier en cours de jeu! et ajouter / supprimer des tuiles à la volée. Ce n’est pas ce qui nous intéresse ici, mais il possède une autre propriété sympathique : on peut charger plusieurs jeux de tuiles en les passant dans un tableau!
Ainsi après avoir créé un seul calque utilisant plusieurs jeux de tuiles, dans la fonction create()on écrira tout simplement les instructions suivantes, et le calque sera créé correctement :
// chargement de la carte du niveau
const map = this.add.tilemap("carte");
// chargement des jeux de tuiles
const ts1 = map.addTilesetImage( "tiled_tuiles1", "tuiles_de_jeu_1");
const ts2 = map.addTilesetImage( "tiled_tuiles2", "tuiles_de_jeu_2");
const ts3 = map.addTilesetImage( "tiled_tuiles3", "tuiles_de_jeu_3");
// chargement des calques
const calque = map.createDynamicLayer( "tiled_calque", [ts1, ts2, ts3]); 
