Unity Tilemap – Wie man ein minimales Tileset für den Unity Tilemap Editor erstellt

Dank des Unity Tilemap Editors ist Leveldesign sehr bequem direkt in der Engine möglich. Die Vorbereitung ist jedoch nicht so ganz intuitiv. Wir zeigen, wie es geht.

In diesem HowTo wollen wir uns anschauen, wie man den 2D Tilemap Editor von Unity verwendet, um Tiles direkt per Pinsel in die Szene zu malen. Wir werden uns anschauen, was man dafür alles einrichten muss, wie man Regeln für die zu zeichnenden Tiles erstellt und wie ein minimales Tileset für einen Platformer aufgebaut sein könnte.

Minimales Tileset zeichnen

Wir beginnen mit dem Tileset.
Für ein minimales Tileset benötigen wir 6 Tiles.

• 1 Tile mit 4 Borders – für 1×1 große Tiles.
  
• 1 Tile ohne Border – für Zwischenräume
  
• 1 Tile mit 1 Border – für alle Grenzbereiche ohne Ecken, wird später entsprechend rotiert
  
• 1 Tile mit 2 Border an der Kante – für Bereiche an Ecken
  
• 1 Tile mit 2 Border für den Mittelteil „Linien“
  
• 1 Tile mit 3 Border Anfang / Ende von „Linien“
  

Ein solches Tileset haben wir nun hier in Aseprite vorliegen. Jede Kachel 16×16 Pixel.
Die Kacheln wurden mit kleinen Zahlenmustern markiert, damit wir später in Unity besser erkennen können, ob die Kacheln an der richtigen Stelle angewendet werden. Zusätzlich findet man noch 3 weitere Kacheln, mit denen wir später die Funktion des Tilemap Editors zeigen, zufällige Tiles zu rendern.

Dieses Tileset exportieren wir als PNG und importieren die Grafik in unser Unity Projekt.

2D Tilemap Editor installieren

Bevor wir so richtig in Unity beginnen, installieren wir den 2D Tilemap Editor über den Package Manager.

Tileset als Sprite importieren

Nun können wir die Grafik unseres Tilsets in Unity importieren.

Die Import-Settings sollten etwa so aussehen. Pixel Per Unit setzen wir auf die Größe der Tiles. Je nach Projekt oder Grafikstil kann man hier variieren.
Den Sprite Mode setzen wir auf Multiple, da es sich um ein Tileset handelt, wir also mehrere Einzelsprites in unserer Datei gespeichert haben.
Für Pixel-Spiele hat es sich bewährt, den Filter Mode auf Point (no filter) und Compression auf None zu setzen.

Jetzt können wir den Sprite Editor aufrufen.

Aufteilen in Einzelsprites im Sprite Editor

Für unser Beispiel genügt es, dem Sprite Editor unter Slice mitzuteilen, dass unsere Tilegröße 16×16 Pixel beträgt.
Für andere Tilesets kann es notwendig sein, Offset oder Padding festzulegen (siehe Hinweis zu Minimales Tileset).

Zum Bestätigen klicken wir auf Apply.

Das Sprite ist nun aufgeteilt in Einzelspites, die man separat selektieren kann.

Regeln für die Tiles erstellen mit Rule Tile

Im Projektfenster können wir jetzt ein neues Rule Tile Asset anlegen und einen Namen geben.

Im Inspector werden uns die Eigenschaften des Rule Tile angezeigt. Hier können wir nun die Regeln festlegen, wann welches Tile gemalt werden soll.

Zuerst ändern wir den Default Collider auf Grid.

Jetzt legen wir das Default Sprite fest. Dieser wird gemalt, wenn keine Regel greift.

Im Projektfenster wird uns das Rule Tile Asset nun ebenfalls mit diesem Default Sprite dargestellt.

Als nächstes können wir die Liste der Regeln erzeugen. Dazu klicken wir unter Tiling Rules auf das Plus-Symbol.
Wir benötigen zunächst 5 Regeln.

Da wir die Tiles jeweils nur für eine Richtung gezeichnet haben, wollen wir sie hier rotieren.
Dazu stellen wir Rule auf Rotated.

Nun beginnen wir mit der ersten Regel.
Wir haben hier das Tile, das gemalt werden soll, wenn die Plattform nur aus einer „Linie“ besteht und oben und unten weitergeht (vertikale Linie) bzw. links und rechts, wenn es rotiert wird (horizontale Linie).
Die roten Kreuze zeigen an, an welcher Kante keine weiteren Tiles anschließen dürfen.
Die grünen Pfeile zeigen an, an welchen Kanten weitere Tiles anschließen dürfen.

So erstellt man sich die Regeln für alle zu rotierenden Tiles.

Der letzte Slot ist für die Zwischenraum-Kachel reserviert, die dargestellt wird, wenn in alle Richtungen weitere Kacheln folgen.
Diese wollen wir zufällig malen lassen aus einer Auswahl an Sprites.

Dazu stellen wir Output von Single auf Random.
Da wir 4 unterschiedliche Kacheln für diese Regel gemalt haben, stellen wir Size auf 4 und füllen die Slots mit den entsprechenden Sprites.
Zusätzlich kann man diese noch rotieren lassen, in dem wir Shuffle auf Rotated stellen.

 

So, damit hätten wir unsere Regeln für die minimale Tilemap festgelegt.
Im nächsten Schritt wollen wir diese in eine Szene malen, um zu schauen, ob die Regeln funktionieren wie erwartet.
Dazu müssen wir zunächst unsere Szene vorbereiten.

Scene vorbereiten

Erstellen wir eine neue Szene, ist diese zunächst recht leer. Ein GameObject für die MainCamera ist jedoch bereits vorhanden.

Da wir es in diesem Beispielprojekt mit Pixeln zu tun haben, fügen wir dieser die Component Pixel Perfect Camera hinzu.
Assets Pixels Per Unit setzen wir auf den Wert, den wir beim Import unserer Sprites festgelegt haben. In diesem Fall: 16.

Mehr Informationen dazu, wie man Unity für Pixel-Art einrichtet, findest Du in folgendem Beitrag:

Pixel to Unity – Wie man ein Unity Projekt für Pixel-Art erstellt

Jetzt können wir eine Hintergrundgrafik zur Szene hinzufügen, über die wir dann die Tiles malen wollen, um Plattformen zu erstellen.

Weiter geht es mit der Vorbereitung des Grid-Systems der Tilemap.

Scene für Tilemap vorbereiten

Jetzt fügen wir im Hierarchy-Fenster eine Tilemap zur Szene hinzu.

Dabei wird automatisch ein Grid und eine Tilemap mit den notwendigen Components daran erstellt.

Grid Component:
Ein Grid kann mehrere Tilmaps als Childs haben.

Tilemap Component und Tilmap Renderer:
Hier kann man z.B. Order in Layer festlegen, um mehrere sich überlagernde Tilemaps zu definieren.

Tile Palette erstellen

Jetzt können wir eine Tile Palette anlegen, der wir unser Rule Tile Asset hinzufügen können, um daraus einen Pinsel zu erstellen, mit dem wir in die Tilemap der Szene malen können.
Das Tile Platette Fenster kann unter Window -> 2D -> Tile Palette aktiviert werden.

In der Tile Palette können wir ein neues Palette-Asset erzeugen.
Dazu klicken wir auf Create New Palette.

Hier geben wir einen Namen an und klicken auf Create.

Im nächsten Schritt wählen wir den Ordner für das neue Asset.

In dem Ordner ist es dann vorhanden.

Im Tile Palette Fenster können wir nun unser Rule Tile Asset hineinziehen.

Ein Slot der Palette ist nun befüllt und kann selektiert werden.

Im Inspector sieht man das verknüpfte Asset.

Leveldesign – Tiles in die Szene malen

Im Tile Palette Fenster selektieren wir nun unser hinzugefügtes Rule Tile und aktivieren den Pinsel in der Toolbar.
Wir haben damit das Tile gewählt, dass in die Szene gemalt wird.

In der Szene selektieren wir die Tilemap und können nun die Kacheln malen. Wir sehen, dass diese sich dynamisch verändern, je nach gemalter Form.
Da werden unsere Regeln angewendet.

Falls das Ergebnis nicht wie gewünscht aussieht, liegt das meist an den Regeln.
Für unser Beispiel passt hier aber alles.
Selbst die zufälligen Kacheln in der Mitte. Man sieht, dass sie wie festgelegt zwischen 3 Tiles wechseln.

Fazit

Großartig! 2D Leveldesign in Unity geht mittels Tilemap Editor flott von der Hand.
Hat man erst mal alles eingerichtet und die kleinen Fallen kennengelernt und überwunden hat, kann man einen Level recht schnell malen.

Das schwierigste und zeitaufwendigste ist das nahtlose Zeichnen des Tilesets im Grafikprogramm Deiner Wahl und das Festlegen der Regeln für die Rule Tiles in Unity.

In einem späteren HowTo schauen wir uns noch an, wie die Sache mit den automatischen Collidern an der Tilemap funktioniert.
Bis dahin hoffe ich, diese erstbeste Anleitung war hilfreich.

 

---

Quellen:

• Unity-Doku – Tilemap
• Unity-Doku – Tilemap Workflow
• Rule Tile Doku