Pixel Art Tiles, Tilesets und Tilemaps

Ein Tile ist ein kleines Sprite, wie ein Puzzleteil. Ein Tileset ist eine Gruppe von Tiles, die zusammen ein Objekt zeigen, zum Beispiel einen Gehweg mit Gitter. Eine Tilemap ist die ganze Szene, gebaut aus Tilesets. Zeichne unten mein 9-teiliges Tileset, einen Schritt nach dem anderen.

Dieses Sprite ist breit. Am Computer zeichnet es sich leichter, oder mit dem Handy quer.

Schritt 1

Farben für diesen Schritt
Tools
Vorlage

Fertigen Schritt zeigen

Tile, Tileset, Tilemap

Romans Folie: ein einzelnes Tile, ein Tileset aus neun Tiles mit Gitter und eine daraus gebaute Tilemap
  • Tile: ein kleines Sprite, ein Teil des Puzzles. Hier ist jedes Tile 16 mal 16 Pixel groß.
  • Tileset: eine Sammlung von Tiles, die ein ganzes Objekt oder einen Teil davon zeigt: das Gitter, ein Stück Gehweg, ein Stück Straße.
  • Tilemap: die größere Komposition aus Tilesets: der Boden, das Gelände, das ganze Level.

Wozu wir sie brauchen

Kannst du dir vorstellen, jedes Tile eines Levels von Hand zu zeichnen? Tiles beschleunigen und automatisieren die Arbeit. Du zeichnest ein kleines Bild und verwendest es überall wieder. Und wenn du ein Tile im Set änderst, zeigt sich die Änderung überall, wo es verwendet wird, ohne dass du jede Kopie anfassen musst.

Ein Tileset, viele Tilemaps

Eine Tilemap: ein breiter Gehweg mit einem Gitter an der Bordsteinkante
Ein Gehweg mit Gitter
Eine Variante der Tilemap: dieselben Tiles, angeordnet als vertiefte Straße zwischen zwei Gehwegen
Dieselben 9 Tiles, eine andere Straße

Beide Maps verwenden genau die neun Tiles, die du gerade gezeichnet hast. In Aseprite: Füg das Tileset auf einer Leinwand ein, die zum Raster passt, klick mit der rechten Maustaste auf die Ebene und wähl Convert to Tilemap. Dann malst du mit ganzen Tiles. Im manuellen Modus ändert die Bearbeitung eines Tiles jede Kopie davon. Im Auto-Modus erzeugt die Bearbeitung eines platzierten Tiles ein neues und lässt die anderen in Ruhe.

Mach Tiles, die nahtlos aneinanderpassen

Die Tiles müssen genau ins Raster passen, in Größe und Anordnung, sonst kann der Editor sie nicht zerschneiden. Und die Ränder müssen zusammenpassen: Die Pixel am rechten Rand eines Tiles gehen am linken Rand des nächsten weiter. Leg vier Kopien nebeneinander und such nach einer Naht. Wenn du eine siehst, korrigier diese Randpixel. Dann probier dein eigenes Set: Färb die Steine um, füg ein zweites Gitter hinzu oder mach es neu mit den Ziegeln aus der Lektion zur Ziegelmauer.