2D Tilemap-Asset-Workflow: Vom Bild zur Ebene
In Unity 2017.2 haben wir das 2D-Feature-Set um eine neue Funktion erweitert: Tilemaps! Mit Tilemaps können Sie schnell ein Layout erstellen und 2D-Levels mit einer Kombination aus Sprites und GameObjects erstellen, und Sie haben die Kontrolle über Eigenschaften wie die Reihenfolge der Ebenen, Tilemap-Kollider, animierte Kacheln und mehr! In diesem Blogpost erkläre ich euch den kompletten Workflow vom Importieren eurer Bilddatei in Unity bis hin zu einem fertigen Level für einen 2D-Plattformer!
Der Arbeitsablauf lässt sich wie folgt zusammenfassen, wobei sich jedes Element auf ein Asset oder eine Komponente im Unity-Editor bezieht:
Sprite -> Kachel -> Palette -> Pinsel -> Kachelkarte
Aus der Sicht einer Nicht-Unity könnten diese Begriffe ein wenig abstrakt erscheinen. Stellen Sie sich den Prozess für ein echtes Gemälde auf einer echten Leinwand vor:
Farbe -> Malen -> Kachelpalette -> Pinsel -> Leinwand
Es gibt eine ähnliche Logik für jeden Schritt des Prozesses und sogar ähnliche Namen für jeden Schritt!
In diesem Beitrag werde ich dieses 'GrassPlatform_TileSet'-Bild als Hauptbeispiel verwenden:
Das Endergebnis ist eine Ebene, die aus diesen Teilen besteht und auf der eine 2D-Figur als "Ebene" laufen kann:
Der Import eines Bildes in Unity kann auf verschiedene Weise erfolgen:
- Speichern Sie die gewünschte Bilddatei im Ordner "Assets" des Projekts.
- Wählen Sie im oberen Menü "Assets -> Neues Asset importieren" und wählen Sie dann die gewünschte Datei aus.
- Ziehen Sie die Bilddatei aus dem Dateibrowser in das Projektfenster des Unity-Editors (Dies ist wahrscheinlich der einfachste Weg!)
Sobald das Bild in Ihr Projekt importiert wurde, werden die Standardeinstellungen für den Texturtyp-Import dadurch definiert, auf welchen Verhaltensmodus Ihr Projekt derzeit eingestellt ist: 2D oder 3D.
Dieser Modus wird ursprünglich bei der Erstellung eines neuen Projekts eingestellt:
Oder kann in den Editoreinstellungen geändert werden:
Da mein Projekt bereits für den 2D-Verhaltensmodus eingerichtet ist, wird "GrassPlatform_TileSet" automatisch mit dem Texturtyp "Sprite (2D und UI)" importiert, was die Einstellung ist, die das Tile-Asset benötigt, um auf das Sprite zu verweisen.
Da es sich bei "GrassPlatform_TileSet" um eine Reihe von Sprites in einem Bild handelt, müssen wir es in einzelne Sprites aufteilen; dies kann geschehen, indem wir den Sprite-Modus von "Single" auf "Multiple" setzen und den Sprite-Editor öffnen:
Das Sprite-Editor-Fenster ermöglicht es Ihnen, ein Bild in mehrere Sprites zu zerlegen. So können Sie ein Spritesheet in Ihrer gewünschten Bildbearbeitungssoftware bearbeiten und festlegen, welche Bereiche des Bildes direkt in Unity als "einzelne" Sprites behandelt werden. Sie müssen nicht mehr mit Hunderten von einzelnen Bilddateien jonglieren und diese verwalten!
Da es sich bei "GrassPlatform_TileSet" um ein Bild handelt, das aus einer Reihe von Kacheln zusammengesetzt ist, können wir die Grid Slicing Settings des Sprite Editors verwenden, um das Bild automatisch in mehrere Sprites aufzuteilen. Die Abmessungen jeder "Zellkachel" in diesem Tileset sind 64 Pixel mal 64 Pixel, so dass wir diese Einstellung eingeben und den Sprite-Editor automatisch die erforderlichen Sprite-Slices generieren lassen können:
Und nachdem die Schaltfläche 'Slice' angeklickt wurde, haben wir jetzt eine Reihe von geschnittenen Sprites!
Im Sprite-Editor-Fenster kann dann jedes geschnittene Sprite ausgewählt und bearbeitet werden. So können Sie beispielsweise Namen für jedes Sprite festlegen und sogar Werte wie Position und Drehpunkte manuell verändern.
Anschließend müssen wir die Änderungen am Sprite-Asset "anwenden" (indem wir auf die treffend benannte Schaltfläche "Anwenden" in der oberen rechten Ecke des Sprite-Editors klicken), die es uns dann ermöglicht, jedes geschnittene Sprite einzeln im Projektfenster zu referenzieren:
Nachdem unser Sprite Sheet in einzelne Sprites zerlegt wurde, müssen wir diese nun in Kacheln "umwandeln".
Die Kachel ist ein brandneues Asset, das in Unity 2017.2 hinzugefügt wurde. Ihr Zweck ist es, Daten zu speichern, die die Tilemap in einer bestimmten Zelle des Rasters verwenden kann.
Das Basis-Standard-Kachel-Asset (das über "Erstellen -> Kachel" im Projektfenster generiert werden kann) ermöglicht die Zuweisung eines Sprites sowie weitere Anpassungen wie die Farbgebung des Sprites und die Art des Colliders, den es auf der Tilemap verwenden würde (was später erklärt wird).
Unity 2017.2 führt ein neues Fenster ein: die Kachelpalette! Dieses Fenster ist ein wesentlicher Bestandteil des neuen Kachelplansystems, da es als Schnittstelle dient, um die zu verwendenden Kacheln auszuwählen und zu bestimmen, wie der Kachelplan mit ihnen bearbeitet werden soll.
Bevor wir die Kachel "TopGrassTile" zum Fenster "Kachelpalette" hinzufügen können, müssen wir zunächst eine neue Palette erstellen. Paletten können verwendet werden, um Ihre Kachelsätze zu organisieren, anstatt alle Kacheln (es können Hunderte oder mehr sein!) auf einer Arbeitsfläche im Fenster zu "speichern".
Im Dropdown-Menü Palette gibt es die Möglichkeit, eine neue Palette zu erstellen:
Es ist so einfach wie Drag-and-Drop, um 'TopGrassTile' zu dieser neu erstellten Palette hinzuzufügen!
In manchen Situationen können wir jedoch mit Hunderten von Sprites arbeiten, die unsere 2D-Szene bilden. Es wäre sehr zeitaufwändig, für jedes dieser Sprites manuell ein Kachel-Asset zu erstellen und dann jedes einzelne auf die Palette zu ziehen.
Zum Glück gibt es einen Arbeitsablauf, mit dem automatisch eine Reihe von Kacheln (eine für jedes Sprite) erstellt und alle der gewünschten Palette zugewiesen werden können. Und es ist auch so einfach und leicht wie Drag-and-Drop! Anstatt ein Kachel-Asset auf die Palette zu ziehen, ziehen Sie das Quell-Spritesheet, das die geschnittenen Sprites enthält. In diesem Fall: "GrassPlatform_TileSet":
Nun, da unser 'GrassPlatform_TileSet' Spritesheet erfolgreich im Fenster 'Tile Palette' eingerichtet wurde, ist es an der Zeit, einen 2D-Level zu konstruieren!
Um zu beginnen, müssen wir eine brandneue "Tilemap" in unserer aktuellen Szene erstellen; dies kann über das Dropdown-Menü "GameObject -> 2D Objects -> Tilemap" geschehen. Dadurch wird jedoch nicht nur ein "Tilemap"-GameObject (mit zugehörigen Komponenten), sondern auch ein "Grid"-GameObject erstellt, das automatisch ein Kind des Tilemap-GameObjects ist.
Die dem 'Grid <-> Tilemap'-Setup ähnlichste GameObject-Struktur ist das UI-System von Unity, bei dem das übergeordnete Canvas GameObjects als Layout-Container für alle untergeordneten UI GameObjects (wie Text und Bilder) dient. Das GameObject 'Grid' verwendet die 'Grid'-Komponente, um die Abmessungen aller untergeordneten Tilemap GameObjects zu definieren. Es gibt Optionen, die eine gewisse Anpassung des Layouts ermöglichen:
Das untergeordnete Tilemap-GameObject wird dann sowohl von der Tilemap-Komponente als auch von der Tilemap-Renderer-Komponente konstruiert; erstere enthält die Daten der darauf gemalten Kacheln und letztere definiert die visuellen Einstellungen, wie es gerendert wird.
Das Tilemap-System wurde so konzipiert, dass mehrere Tilemap GameObjects Kinder desselben Gitters sein können, was bedeutet, dass das Endergebnis Ihres Levels leicht durch mehrere Schichten verschiedener Tiles zusammengesetzt werden kann:
Jeder Tilemap-Renderer gibt Ihnen die Kontrolle über das Material, das zum Rendern seiner Kacheln verwendet wird, über die Sortierschicht, die er verwendet (das ist das gleiche Schichtsystem, das auch Sprite-Renderer, UI-Leinwände und Partikelsysteme verwenden!) und auch darüber, wie er auf die Sprite-Maske reagiert.
Bevor Kacheln auf die Tilemap gemalt werden können, müssen zwei Dinge ausgewählt werden: welche Tilemap gerade fokussiert ist und welcher Pinsel gerade verwendet wird.
Die erste kann aus der Dropdown-Liste "Aktive Kachelkarte" im Fenster "Kachelpalette" unterhalb der Bearbeitungsoptionen ausgewählt werden:
In dieser Drop-Down-Liste werden alle Instanzen der Komponente "Tilemap" in der Szene angezeigt, und Sie können eine auswählen, die Sie bemalen und bearbeiten möchten. Der obige Screenshot zeigt nur eine "Tilemap"-Option, die nach dem Standard-Tilemap-GameObject benannt ist, während eine komplexere Szene mit mehreren Tilemaps eine Liste möglicher aktiver Tilemaps wie diese anzeigen könnte:
Im Beispiel "GrassPlatform_TileSet" wird durch die Umbenennung des GameObjects "Tilemap" auch der Name der aktiven Tilemap-Liste(n) aktualisiert, um die Genauigkeit zu erhöhen:
Als Nächstes müssen Sie den aktuellen Pinsel auswählen. Während das Kachel-Asset festlegt, welche Daten eine Zelle enthält (Bildmaterial, Collider-Typ usw.), definiert ein Pinsel-Asset, wie eine Kachel (oder Kacheln) auf einer Kachelkarte platziert wird. Derzeit gibt es in Unity nur einen Pinsel (den 'Default Brush'), der ausgewählt werden kann und der die erwarteten Funktionen wie Platzieren, Löschen, Verschieben und Füllen von Kacheln auf der Tilemap bietet. Auf dem GitHub des Unity Technologies Teams gibt es jedoch ein 2D Extras' Repository, das eine Vielzahl von Beispielen enthält, wie du deine eigenen benutzerdefinierten Brushes und Kacheln schreiben kannst! Sobald diese in Ihr Projekt importiert sind, können Sie im Menü "Aktueller Pinsel" (am unteren Rand des Fensters "Kachelpalette") den zu verwendenden Pinsel auswählen:
Dieser Artikel geht zwar nicht auf die Verwendung von skriptfähigen Pinseln und Kacheln ein, aber es handelt sich um ein sehr leistungsfähiges Gebiet, das Sie studieren und in Ihr Tilemap-basiertes Level-Design-Toolset integrieren sollten.
Mit der aktiven Tilemap und dem aktuellen Pinsel können wir dann eine bestimmte Kachel im Fenster "Kachelpalette" auswählen und sie dann auf die Tilemap in der Szene malen! Sie müssen auch sicherstellen, dass das Symbol "Pinsel" in den Bearbeitungswerkzeugen ausgewählt ist:
Erfolgreich! Auf der Tilemap werden Kacheln gemalt! Sie werden jedoch feststellen, dass die Kacheln etwas kleiner sind als die Zellen des Gitters. Dies ist kein Fehler, aber wir müssen einen Schritt zurückgehen, um zu erklären, warum das so ist - und wie Sie die Standardeinstellung ändern können.
Die Zellengröße der Grid-Komponente verwendet die Entfernungseinheiten des Unity-Weltraums (ein primitiver Unity-Würfel mit einer Standardskalierung von 1 für jede Achse hat beispielsweise die gleiche Größe wie eine Zelle im Standard-Grid). Jedes Sprite-Asset hat in seinen Importeinstellungen einen Wert für Pixel pro Einheit, wobei der Standardwert 100 ist:
