Charger une carte Tiled constituée de plusieurs jeux de tuiles (ou tileset)

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.jsonet 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, deux méthodes s’offrent à nous

Méthode 1 : un calque par jeu de tuiles : facile mais lourd et peu élégant (déconseillé)

la solution simple, et peu élégante,  consiste à créer plusieurs calques, et n’utiliser dans Tiled que les tuiles d’un même jeu de tuiles pour un même calque. Ainsi on pourra écrire une code dans ce style dans la fonction preload() (exemple avec 3 jeux de tuiles isssus de 3 fichiers tuilesJeu1.png, tuilesJeu2.png et tuilesJeu3.png) :

       // chargement tuiles de jeu
        this.load.image("tuiles_de_jeu_1", "tuilesJeu1.png");
        this.load.image("tuiles_de_jeu_2", "tuilesJeu2.png");
        this.load.image("tuiles_de_jeu_3", "tuilesJeu3.png");
        // chargement de la carte
        this.load.tilemapTiledJSON("carte", "carte.json"); 

Suivi dans la fonction create() de :

    // chargement de la carte du niveau
    const map = this.add.tilemap("carte");
    // chargement des jeux de tuiles
    const tileset1 = map.addTilesetImage( "tiled_tuiles1", "tuiles_de_jeu_1");
    const tileset2 = map.addTilesetImage( "tiled_tuiles2", "tuiles_de_jeu_2");
    const tileset3 = map.addTilesetImage( "tiled_tuiles3", "tuiles_de_jeu_3");
    // chargement des calques
    const calque1 = map.createStaticLayer( "tiled_calque1", tileset1);
    const calque2 = map.createStaticLayer( "tiled_calque2", tileset2);
    const calque3 = map.createStaticLayer( "tiled_calque3", tileset3); 

Même si la solution fonctionne, on est limité à une restriction inhérente à l’utilisation des calques statiques (staticLayer ). Nous allons pour cela passer au niveau supérieur : les dynamicLayer

 

Méthode 2 : 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]); 

Laisser un commentaire

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