Tilemaps

Construis des niveaux et des motifs répétitifs à partir de tuiles : calques tilemap, tilesets, les trois modes de tuile, tilesets partagés, et export vers Tiled et les moteurs de jeu.

Un calque tilemap se peint avec des tuiles : de petites images, toutes de la même taille, conservées dans le tileset du calque. Le calque lui-même enregistre seulement quelle tuile occupe chaque cellule de sa grille (et si elle est retournée ou pivotée). Repeins une tuile et chaque cellule qui l'utilise change, ce qui rend les tuiles idéales pour les murs, les sols et le terrain.

Créer un calque tilemap

  • Nouveau : Calque > Nouveau calque tilemap... demande un nom et une largeur et hauteur de tuile (16×16 sauf si tu les changes). Il démarre avec un tileset vide. Si le sprite a déjà un tileset, tu peux choisir Utiliser l'existant pour le partager (ci-dessous).
  • À partir d'un calque d'image : Calque > Tilemap > Convertir en tilemap... découpe l'illustration du calque, sur chaque image, en tuiles et la remplace par des placements de tuiles. Partager les tuiles identiques fait des carrés répétés une seule tuile ; Partager aussi les tuiles retournées et pivotées repère aussi les copies en miroir. La grille commence au coin supérieur gauche du canevas, et l'illustration qui dépasse des bords du canevas est conservée aussi sous forme de tuiles. Chaque cel garde son opacité, son z-index et ses données utilisateur, que tu peux modifier dans les Propriétés du cel (clic droit sur le cel), comme sur n'importe quel calque.
  • Retour aux pixels : Calque > Tilemap > Convertir en calque normal transforme les tuiles en pixels ordinaires sur chaque image, y compris les tuiles en dehors du canevas.

Les trois modes

Quand un calque tilemap est actif, la barre d'options de l'outil affiche Tuiles, Pixels: Auto et Pixels: Edit, et une case Grille de tuiles qui dessine les limites des tuiles. Appuie sur Alt+T pour basculer entre Tuiles et le dernier mode pixel que tu as utilisé. (Aseprite utilise Tab pour cela ; ici Tab ne fait que passer d'une commande à l'autre.)

ModeCe que fait la peinture
TuilesPlace des tuiles entières avec le Tampon de tuiles. Les outils de pixels ne peignent pas dans ce mode.
Pixels: AutoPeins des pixels comme sur n'importe quel calque ; seules les cellules que tu touches changent. Une cellule qui finit identique à une tuile existante la réutilise ; une nouvelle image devient une nouvelle tuile ; une tuile utilisée ailleurs est copiée pour cette cellule, pour que les autres cellules gardent la leur. Une cellule que tu effaces complètement redevient vide. Les tuiles que ta modification laisse inutilisées sont supprimées.
Pixels: EditPeins directement dans les tuiles elles-mêmes : chaque cellule, sur chaque image, qui utilise une tuile change avec elle. Les cellules vides restent vides.

Choisir Tuiles passe au Tampon de tuile, et choisir un outil de dessin revient à un mode pixel, si bien que l'outil et le mode correspondent toujours.

Le panneau Tileset

Le panneau Tileset montre les tuiles du calque tilemap actif, avec le nombre de cellules qui utilisent chacune. Clique sur une tuile pour la sélectionner : la tuile sélectionnée est celle que le Tampon de tuile place. La tuile 0 est la tuile vide et elle est toujours là.

  • Les boutons ajoutent une tuile vide, dupliquent la tuile sélectionnée (la copie va à la fin), l'effacent pour la rendre transparente, ou la suppriment (si des cellules l'utilisent, une confirmation t'est d'abord demandée, et ces cellules sont vidées). Chaque changement peut être annulé.
  • Fais glisser une tuile, ou appuie sur Alt avec une touche fléchée, pour réordonner le tileset. Les cellules continuent d'afficher les mêmes images.
  • Correspondance auto (Retourner H, Retourner V, Pivoter) permet à Pixels: Auto de réutiliser une tuile quand la nouvelle image lui correspond retournée ou pivotée.
  • Tampon (Retourner H, Retourner V, Pivoter de 90°) retourne ou fait pivoter la tuile que le Tampon de tuile place. Seules les tuiles carrées peuvent être pivotées.
  • Calque > Tilemap > Propriétés du tileset... nomme le tileset et définit son Indice de base : le nombre affiché pour la première tuile (1, comme dans Aseprite ; de -32768 à 32767). Il ne change que la numérotation. Sa section Données utilisateur contient une couleur, une note et des propriétés personnalisées pour le tileset (Données utilisateur et propriétés personnalisées).

Tamponner des tuiles

Avec le Tampon de tuiles, clique ou fais glisser sur le calque pour placer la tuile sélectionnée dans chaque cellule que tu survoles. Maintiens Alt au début pour retirer des tuiles à la place. Un glissement entier est une seule étape d'annulation. Le calque doit être visible et déverrouillé.

Placer des tuiles avec d'autres outils

Quand un calque tilemap est actif, le crayon, la gomme, la ligne, le rectangle, l'ellipse, le triangle, l'hexagone, l'étoile et le seau ont une case Placer des tuiles. Quand elle est cochée, ils placent la tuile sélectionnée (avec ses réglages de retournement et de rotation, tels que définis pour le Tampon de tuile) sur les cellules du tilemap au lieu de peindre des pixels, quel que soit le mode Tuiles / Pixels :

  • Une cellule est couverte quand un pixel que l'outil peindrait se trouve à l'intérieur : un point de crayon d'un pixel place une tuile, un rectangle en contour les cellules que son contour traverse, un rectangle plein chaque cellule qu'il remplit. La taille du pinceau compte. La gomme vide les cellules qu'elle touche.
  • Le seau remplit avec la tuile sélectionnée les cellules connexes (haut et bas, gauche et droite) qui contiennent la même tuile que celle sur laquelle tu cliques. Une cellule vide compte comme la tuile 0. Global remplit à la place toutes les cellules contenant cette tuile. Il reste dans la grille de cellules du canevas, donc sur un calque vide il remplit la grille visible et pas au-delà.
  • La symétrie reflète le placement. Une cellule va à la cellule qui contient le miroir de son centre, et la tuile est retournée en conséquence : un axe vertical bascule Retourner H, un axe horizontal Retourner V, et un axe diagonal fait pivoter la tuile (Pivoter de 90° plus un retournement, tuiles carrées uniquement). Une cellule sur un axe garde la tuile telle que tu l'as placée. Le seau remplit de nouveau à partir de chaque clic en miroir.
  • Une sélection limite le placement aux cellules qui ont au moins un pixel sélectionné (le seau s'arrête aussi aux autres).
  • Chaque trait ou remplissage est une seule étape d'annulation, et un qui ne change rien n'en laisse aucune.

Le Tampon de tuile suit aussi la symétrie et la sélection.

Partager un tileset

Plusieurs calques tilemap peuvent utiliser le même tileset : choisis Utiliser l'existant dans Calque > Nouveau calque tilemap.... Modifier, ajouter, retirer ou réordonner des tuiles touche alors chaque calque qui le partage, ce qui te permet de garder un calque d'arrière-plan et un calque de premier plan synchronisés. L'en-tête du panneau indique combien de calques partagent le tileset. Verrouiller l'un d'eux le protège : une tuile qu'il affiche ne peut pas être repeinte, effacée ni supprimée (ni modifiée avec Pixels: Edit) via un autre calque tant que tu ne le déverrouilles pas.

Importer des tuiles

Calque > Tilemap > Importer des tuiles depuis une image... découpe une image en tuiles de la taille du tileset et les ajoute. L'image peut être un fichier image, l'image active, ou la sélection qu'elle contient. Tu peux ignorer les tuiles en double (y compris retournées et pivotées), ignorer les tuiles vides, et placer les tuiles aussi sur l'image active.

Tilemaps animés

Chaque image a ses propres placements de tuiles, donc un tilemap peut s'animer. Les images peuvent aussi être liées sur un calque tilemap (Image > Nouvelle image liée, Édition > Cel > Lier les cels) : les images liées partagent leurs placements. Rappelle-toi que Pixels: Edit modifie les tuiles elles-mêmes, donc cela se voit sur chaque image qui les utilise, liée ou non.

Exporter

Fichier > Exporter... avec le type Tilemap (JSON / Tiled) écrit une image PNG de chaque tileset plus l'un des deux :

  • Tiled (carte .tmj avec tilesets .tsj), pour l'éditeur Tiled et les moteurs qui lisent son format. Les cartes Tiled n'ont pas d'images, donc seule l'image sélectionnée est exportée.
  • JSON (toutes les images), un fichier simple avec les numéros de tuiles et les durées de chaque image.

Dans les deux cas, une cellule à 0 est vide, et les retournements et la rotation sont stockés dans les bits de poids fort du nombre, comme le fait Tiled. Les tilemaps sont aussi conservés dans les fichiers Aseprite, tilesets partagés compris.