Tilemap

Une tilemap est un composant (component) qui vous permet d’assembler ou de peindre des tuiles issues d’une source de tuiles (Tile Source) sur une vaste grille. Les tilemaps sont couramment utilisées pour créer les environnements des niveaux d’un jeu. Vous pouvez également utiliser les formes de collision de la source de tuiles dans vos cartes pour la détection des collisions et la simulation physique (exemple).

Avant de pouvoir créer une tilemap, vous devez créer une source de tuiles. Consultez le manuel des sources de tuiles pour apprendre à en créer une.

Création d’une tilemap

Pour créer une tilemap :

• Faites un clic droit sur un emplacement dans le navigateur Assets, puis sélectionnez New... ▸ Tile Map.
• Nommez le fichier.

• La nouvelle tilemap s’ouvre automatiquement dans l’éditeur de tilemaps.

  

• Définissez la propriété Tile Source sur un fichier de source de tuiles que vous avez préparé.

Pour peindre des tuiles sur votre tilemap :

1. Sélectionnez ou créez un Layer sur lequel peindre dans la vue Outline.

2. Sélectionnez une tuile à utiliser comme pinceau (appuyez sur Space pour afficher la palette de tuiles) ou sélectionnez plusieurs tuiles en cliquant et en faisant glisser la souris dans la palette pour créer un pinceau rectangulaire composé de plusieurs tuiles.

   

3. Peignez avec le pinceau sélectionné. Pour effacer une tuile, choisissez une tuile vide et utilisez-la comme pinceau, ou sélectionnez la gomme (Edit ▸ Select Eraser).

   

Vous pouvez prélever des tuiles directement dans un calque et utiliser la sélection comme pinceau. Maintenez Shift enfoncée et cliquez sur une tuile pour en faire le pinceau actuel. Tout en maintenant Shift enfoncée, vous pouvez également cliquer et faire glisser la souris pour sélectionner un bloc de tuiles à utiliser comme pinceau plus grand. Vous pouvez aussi couper des tuiles de la même manière en maintenant Shift+Ctrl enfoncées, ou les effacer en maintenant Shift+Alt enfoncées.

Pour faire pivoter le pinceau dans le sens des aiguilles d’une montre, utilisez Z. Utilisez X pour retourner le pinceau horizontalement et Y pour le retourner verticalement.

Ajout d’une tilemap à votre jeu

Pour ajouter une tilemap à votre jeu :

1. Créez un objet de jeu (game object) pour y placer le composant tilemap. L’objet de jeu peut se trouver dans un fichier ou être créé directement dans une collection.
2. Faites un clic droit sur la racine de l’objet de jeu et sélectionnez Add Component File.
3. Sélectionnez le fichier de la tilemap.

Manipulation à l’exécution

Vous pouvez manipuler les tilemaps à l’exécution à l’aide de différentes fonctions et propriétés (consultez la documentation de l’API pour savoir comment les utiliser).

Modification des tuiles par script

Vous pouvez lire et modifier dynamiquement le contenu d’une tilemap pendant l’exécution de votre jeu. Pour cela, utilisez les fonctions tilemap.get_tile() et tilemap.set_tile() :

local tile = tilemap.get_tile("/level#map", "ground", x, y)

if tile == 2 then
    -- Replace grass-tile (2) with dangerous hole tile (number 4).
    tilemap.set_tile("/level#map", "ground", x, y, 4)
end

Propriétés des tilemaps

Outre les propriétés Id, Position, Rotation et Scale, les propriétés propres à ce composant sont les suivantes :

Tile Source

La ressource tilesource à utiliser pour la tilemap.

Material

Le matériau à utiliser pour le rendu de la tilemap.

Blend Mode

Le mode de fusion à utiliser lors du rendu de la tilemap.

Modes de fusion

La propriété Blend Mode définit la façon dont les éléments graphiques du composant (component) doivent être fusionnés avec ceux qui se trouvent derrière lui. Voici les modes de fusion disponibles et leur calcul :

Alpha

Fusion normale : src.a * src.rgb + (1 - src.a) * dst.rgb

Add

Éclaircit l’arrière-plan avec les valeurs de couleur des pixels correspondants du composant : src.rgb + dst.rgb

Multiply

Assombrit l’arrière-plan avec les valeurs des pixels correspondants du composant : src.rgb * dst.rgb

Screen

Inverse de Multiply. Éclaircit l’arrière-plan et les valeurs des pixels correspondants du composant : src.rgb - dst.rgb * dst.rgb

Modification des propriétés

Une tilemap possède plusieurs propriétés qui peuvent être manipulées à l’aide de go.get() et go.set() :

tile_source

La source de tuiles de la tilemap (hash). Vous pouvez la modifier à l’aide d’une propriété de ressource de source de tuiles et de go.set(). Consultez la référence de l’API pour un exemple.

material

Le matériau de la tilemap (hash). Vous pouvez le modifier à l’aide d’une propriété de ressource de matériau et de go.set(). Consultez la référence de l’API pour un exemple.

Constantes de matériau

Le matériau tilemap par défaut possède les constantes suivantes, que vous pouvez modifier avec go.set() ou go.animate() (consultez le manuel des matériaux pour plus de détails). Exemples :

go.set("#tilemap", "tint", vmath.vector4(1,0,0,1))
go.animate("#tilemap", "tint", go.PLAYBACK_LOOP_PINGPONG, vmath.vector4(1,0,0,1), go.EASING_LINEAR, 2)

tint

La teinte de la tilemap (vector4). Le vector4 représente la teinte, x, y, z et w correspondant respectivement à ses composantes rouge, verte, bleue et alpha.

Configuration du projet

Le fichier game.project contient quelques paramètres du projet relatifs aux tilemaps.

Outils externes

Il existe des éditeurs externes de cartes et de niveaux qui peuvent exporter directement au format tilemap de Defold :

Tiled

Tiled est un éditeur de cartes bien connu et largement utilisé pour les cartes orthogonales, isométriques et hexagonales. Tiled prend en charge un large éventail de fonctionnalités et peut exporter directement vers Defold. Pour en savoir plus sur l’exportation des données de tilemap et des métadonnées supplémentaires, consultez cet article de blog de l’utilisateur de Defold « goeshard »

Tilesetter

Tilesetter permet de créer automatiquement des jeux de tuiles complets à partir de tuiles de base simples et dispose d’un éditeur de cartes qui peut exporter directement vers Defold.