Erstellen Sie mit dem Tilemap-System isometrische 2D-Ebenen

In Unity 2018.3 wurde die Unterstützung für isometrische Kachelkarten eingeführt, die den in Version 2018.2 hinzugefügten Sechseckkachelkarten sehr ähnlich sind. Mit den neuen Tilemap-Funktionen können Sie schnell und effizient 2D-Umgebungen erstellen, die auf den isometrischen und hexagonalen Gittern basieren, die in vielen klassischen Spielen verwendet wurden, einschließlich der ersten Teile von Diablo und Fallout, Civilization, Age of Empires und vielen anderen.

Beide Systeme basieren auf dem bereits vorhandenen Tilemap-System, das in Unity 2017.2 veröffentlicht wurde, und heute ist es genauso einfach, mit ihnen zu arbeiten! Darüber hinaus sind sie nativ in den Editor integriert. In zukünftigen Versionen von Unity können sie auf den Paketmanager portiert werden.

Wenn Sie mit diesen Systemen experimentieren möchten, haben wir ein vorbereitetes Isometric Starter Kit-Projekt mit einem animierten Charakter und mehreren Umgebungskachelsätzen erstellt. Sie können es hier herunterladen.

Projekteinstellungen für isometrische Tilemap

Bevor wir mit Tilemap beginnen, ist es wichtig, das Projekt korrekt einzurichten. Isometrische Tilemap arbeitet mit zweidimensionalen Sprites und verwendet die richtige Sortierung des Renderings, um die Illusion einer isometrischen Karte mit einer Draufsicht zu erzeugen. Wir müssen dafür sorgen, dass die Kacheln weiter vom Betrachter entfernt sind und zuerst die Kacheln darüber liegen.

Mit der Unity-Funktion Custom Custom Axis Sort können Sie die Renderreihenfolge von 2D-Objekten auf dem Bildschirm anpassen. Dieser Parameter kann entweder für die Kamera (derzeit ist diese Methode Standard für Scriptable Render Pipelines, einschließlich LWRP und HDRP) oder global auf Projektebene festgelegt werden.

Um die benutzerdefinierte Achsensortierung auf Projektebene festzulegen, gehen Sie zu Bearbeiten> Projekteinstellungen> Grafiken . Im Abschnitt Kameraeinstellungen sehen Sie das Dropdown-Menü Transparenz-Sortiermodus sowie die X-, YZ-Wertoptionen für die Transparenz-Sortierachse.

Standardmäßig setzt die Transparenz-Sortierachse die XYZ-Achsen auf (0, 0, 1). Alle unsere 2D-Kacheln befinden sich jedoch tatsächlich in derselben Z-Ebene. Um festzustellen, welche Kacheln sich vorne oder hinten befinden, müssen Sie nicht die Tiefe, sondern die Höhe verwenden. Kacheln, die sich höher auf dem Bildschirm befinden, werden nach niedrigeren Kacheln sortiert. Um Kacheln nach Höhe zu sortieren, ändern Sie den Wert für den Transparenz-Sortiermodus in Benutzerdefiniert und setzen Sie die Transparenz-Sortierachse auf (0, 1, 0).


Weitere Informationen zur Funktionsweise finden Sie auf der entsprechenden Seite zur 2D-Sortierung in der Unity-Dokumentation.

In einigen Fällen müssen Sie möglicherweise auch den Wert für die Transparenzsortierachse in Z ändern. Wir werden weiter unten darauf eingehen.

Kachelkartentypen

Das Tilemap-System besteht aus mehreren interagierenden Komponenten. Die ersten beiden sind die Grid- und Tilemap-Spielobjekte. Um ein Raster zu erstellen, klicken Sie einfach mit der rechten Maustaste auf eine beliebige Stelle in der Hierarchie, wechseln Sie zum 2D-Objekt und wählen Sie den Typ der Tilemap aus, den Sie verwenden möchten. Standardmäßig wird jedes neue Raster mit einem untergeordneten Tilemap-Spielobjekt des entsprechenden Typs erstellt. Derzeit gibt es folgende Arten von Tilemaps:

Tilemap - Erstellt ein rechteckiges Raster und eine Tilemap. Ein Beispiel für die Verwendung dieser Tilemap finden Sie im 2D Game Kit der Unity-Engine.

Top-Tilemap mit sechseckigem Punkt - Erstellt ein Gitter und eine Tilemap aus Sechsecken, in denen einer der Eckpunkte jedes Sechsecks nach oben gerichtet ist.

Hexagonal Flat Top Tilemap ist eine andere Art von Sechseckgitter, bei dem sich am oberen Rand des Sechsecks eine Fläche parallel zur Oberkante des Bildschirms befindet.

Die letzten beiden Typen, Isometrisch und Isometrisch Z als Y , erstellen zwei verschiedene Implementierungen des isometrischen Gitters. Der Unterschied zwischen ihnen tritt auf, wenn verschiedene Ebenen von Fliesenhöhen simuliert werden, beispielsweise wenn sich auf isometrischer Ebene eine hohe Plattform befindet.

Wenn Sie separate Tilemap-Spielobjekte für jede Ebene der Kachelhöhen erstellen möchten, ist es besser, den üblichen isometrischen Tilemap- Typ zu verwenden. Dies vereinfacht das Erstellen automatischer Kollisionsformen, ist jedoch weniger flexibel, wenn mit Höhen zwischen Kacheln gearbeitet wird, da sich alle Kacheln auf derselben Ebene auf derselben „Ebene“ befinden sollten.

Im Fall von isometrischem Z als Y-Tilemap arbeitet der Z-Positionswert jeder Kachel in Verbindung mit dem Parameter Transparenzachsensortierung, sodass die Kacheln übereinander gestapelt erscheinen. Beim Zeichnen auf einem Z als Y-Tilemap ändern wir dynamisch den Pinselparameter Z, um zwischen verschiedenen Höhen zu wechseln. Um Z korrekt als Y-Tilemap zu rendern, ist ein zusätzlicher Z-Wert in der Transparenz-Sortierachse mit benutzerdefiniertem Modus erforderlich.


Hinweis: Die in den Screenshots gezeigten Elemente stammen aus der Tempelkachel des Isometric Starter Kit- Projekts. Sie sind völlig kostenlos, sodass Sie damit Ihre eigenen Umgebungen erstellen können!

Stellen Sie sich das Raster als eine „Staffelei“ vor, auf der sich alle Tilemap-Spielobjekte befinden. Und sie wiederum sind im Wesentlichen eine Leinwand, auf die wir Fliesen zeichnen werden. Um mit dem Zeichnen auf Tilemap zu beginnen, benötigen wir außerdem einen Pinsel und eine Palette. Alle Kachelelemente befinden sich in der Kachelpalette, aus der sie mit dem Pinselwerkzeug ausgewählt und mit dem Zeichnen begonnen werden können.

Um eine Kachelpalette zu erstellen, wählen Sie Fenster> 2D> Kachelpalette. Wählen Sie im Dropdown-Menü oben links "Neue Palette erstellen". Stellen Sie sicher, dass der entsprechende Maschentyp ausgewählt ist. In diesem Beispiel verwende ich die übliche isometrische Tilemap sowie Assets aus dem Isometric Starter Kit- Projekt. Wir geben Manual als Zellengröße der Palette (Zellengröße) an, um die Größe isometrischer Kacheln ändern zu können. In diesem Fall weiß ich, dass die Größen meiner Kacheln einem Raster mit einer Zellengröße von 1 x X und 0,5 x Y entsprechen. Sie hängen jedoch von der Auflösung ab, die beim Importieren der Pixelwerte pro Einheit und der Größe der Assets ausgewählt wurde - tatsächlich vom isometrischen Winkel, um den die Kacheln gedreht werden.

Hinweis zum Importieren von Assets

Möglicherweise wissen Sie nicht, welche Importoptionen und Kachelkartengröße für Ihr Vermögen am besten geeignet sind. Es gibt eine allgemeine Regel, die Sie befolgen können: Zuerst müssen Sie die Auflösung der Kacheln betrachten. In der Regel sind isometrische Kachelblöcke größer als breit. "Flache" Kacheln (die eher einer Ebene als einem Würfel ähneln) sind breiter als hoch. Die Breite zwischen ihnen ist jedoch immer gleich. Wenn Sie also möchten, dass die Kacheln genau eine Maßeinheit für Unity belegen, setzen Sie die Pixel pro Einheit in den Kachelimporteinstellungen auf einen Wert, der ihrer Breite in Pixel entspricht. In einigen Fällen muss dieser Wert geändert werden, normalerweise in Richtung einer Verringerung (oder Erhöhung der Auflösung von Vermögenswerten). Dies kann nützlich sein, wenn Sie einen Effekt wiederherstellen möchten, bei dem einige Kacheln mehr als eine Gitterzelle zu belegen scheinen und benachbarte Kacheln überlappen.


Um den korrekten Rasterwert für Kacheln durch Y zu bestimmen, nehmen Sie die Höhe der Basis (oder des Scheitelpunkts) einer Kachel und dividieren Sie sie durch die Breite. Dies gibt Ihnen einen Wert von Y relativ zu X, vorausgesetzt, X ist 1. Schauen wir uns einige Beispiele an:


In den für dieses Projekt verwendeten Pixel-Art-Assets sind alle Basiskacheln 32 Pixel hoch und 64 Pixel breit. Daher ist die Gittergröße in Y gleich 0,5. Der zweite Block im Bild stammt aus dem Asset-Paket der Golden Skull Studios. Sie können es hier sehen . Die Beispielkachel wurde reduziert, aber die ursprünglichen Elemente sind 128 Pixel breit. Die Basis der Kachel ist ungefähr 66 Pixel, was eine Gittergröße Y von 66/128 ergibt, d. H. Ungefähr 0,515 Einheiten.

Der grundlegende Prozess der Arbeit mit Tilemap

Nachdem Sie sich für die richtige Größe des Gitters entschieden haben, fügen Sie unserer Palette einige Kacheln hinzu. Nehmen Sie einfach einen der Kachel-Sprites und ziehen Sie ihn in das Fenster Kachelpalette. Dadurch wird das Kachel-Asset erstellt. Es enthält Informationen über die Kachel selbst, z. B. die verwendeten Sprites, den Farbton und den Typ des generierten Colliders. Wenn Sie detaillierte Informationen zur Palettenkachel benötigen, wählen Sie das Auswahlwerkzeug (S) oben im Kachelpalettenfenster und klicken Sie auf diese Kachel. Beachten Sie, dass der Inspektor sehen kann, auf welches Kachel-Asset er sich bezieht.

Um eine neue Kachel mit Tilemap zu zeichnen, wählen Sie das Pinselwerkzeug (B) und klicken Sie auf die Kachel in der Palette. Danach können Sie mit der ausgewählten Kachel im Szenenfenster zeichnen. Es gibt andere Zeichenwerkzeuge wie Radiergummi (D), Kastenfüllung (U), Hochwasserfüllung (G) und Fliesenauswahl (I).

Manchmal müssen Sie die Position der Kacheln auf der Palette selbst ändern. Direkt unter der Symbolleiste befindet sich eine Schaltfläche Bearbeiten. Wenn Sie darauf klicken, wird der Palettenbearbeitungsmodus aktiviert, in dem die Werkzeuge die Kachelpalette selbst beeinflussen. Vergessen Sie nicht, diesen Modus zu verlassen, nachdem Sie die erforderlichen Änderungen vorgenommen haben.

Tilemap-Renderer-Modi

In einigen Fällen werden Kacheln verschiedener Typen möglicherweise nicht richtig sortiert, obwohl sie sich auf derselben Tilemap befinden, wie in diesem Beispiel:


Dies wird durch den Parameter Mode der Tilemap Renderer-Komponente bestimmt. Standardmäßig ist Mode Chunk.

Der Chunk- Modus reduziert effektiv den Verbrauch von Tilemap-Assets. Anstatt jede Kachel einzeln zu rendern, werden sie in einem Durchgang als großer Block gerendert. Dieser Modus hat jedoch zwei Hauptnachteile. Erstens wird die dynamische Sortierung mit anderen 2D-Objekten in der Szene nicht unterstützt. Dies bedeutet, dass die Tilemap im Chunk-Modus nicht dynamisch vor oder hinter anderen Objekten sortiert werden kann, z. B. Zeichen. Es ist jeweils nur das eine oder das andere sichtbar. Dies hängt vom Parameter Reihenfolge in Ebene ab. Es ist jedoch immer noch äußerst effektiv bei der Optimierung des Spiels und kann zum Batch-Rendern großer Geländeflächen verwendet werden.

Dies erspart uns jedoch nicht das Problem der falschen Sortierung verschiedener Kacheln. Für das Batch-Rendering von Kacheln aus zwei oder mehr verschiedenen Sprites (z. B. Texturen) müssen die Sprites zu einem einzigen Sprite Atlas-Asset kombiniert werden.

Um einen Sprite-Atlas zu erstellen, wählen Sie Assets> Erstellen> Sprite-Atlas . Sprite Atlas enthält eine Liste der zu verpackenden Objekte . Ziehen Sie einfach alle Kacheln, die in Stapeln gerendert werden müssen, per Drag & Drop hinein und geben Sie die entsprechenden Importparameter an, die normalerweise mit den Parametern der einzelnen Sprites übereinstimmen.

Danach werden die Kacheln korrekt sortiert. Sie sind jedoch nur im Spielmodus oder während der Spielausführung sichtbar.

Daher ist es während des Bearbeitungsprozesses besser, den individuellen Modus für Tilemap Renderer auszuwählen. In diesem Modus wird jedes Sprite separat sortiert. Dies bedeutet, dass sie auch außerhalb des Wiedergabemodus korrekt gerendert werden, was beim Bearbeiten eines Levels sehr nützlich ist. Nach Abschluss der Erstellung der Ebenenstruktur können Sie den Tilemap-Renderer-Modus jederzeit wieder auf Chunk umschalten.


Der individuelle Rendermodus ist auch nützlich, wenn Sie Objekte wie Bäume, Objekte und höhere Grundstücke hinzufügen müssen, die dynamisch nach Zeichen oder untereinander sortiert werden sollen. In diesem Beitrag aktivieren wir den Einzelmodus für alle Tilemap.

Verwenden mehrerer Tilemap

Manchmal ist es erforderlich, mehrere Tilemap in einem Raster zu verwenden. Bei isometrischer und hexagonaler Tilemap ist es hilfreich, die Ebene des Elements, das auf dem Raster oder den Kacheln ausgerichtet ist, die höher als die erste Ebene erscheinen, zu erhöhen.

Um eine weitere Tilemap mit dem Raster zu verbinden, klicken Sie mit der rechten Maustaste auf das Raster-Spielobjekt und erstellen Sie eine neue Tilemap des entsprechenden Typs.

Um mit dem Zeichnen auf der neuen Tilemap zu beginnen, kehren Sie zum Fenster Kachelpalette zurück und ändern Sie die aktive Tilemap unter der Hauptsymbolleiste.

Erhöhte Bereiche hinzufügen

Es gibt zwei Möglichkeiten, den Ebenen erhöhte Bereiche hinzuzufügen. Die Auswahl der richtigen hängt normalerweise von der Art der ausgewählten Tilemap ab. Wir werden jeden Fall betrachten.

Darüber hinaus haben wir ein kurzes Video zu diesem Thema vorbereitet, das diese Ansätze anhand der üblichen isometrischen Tilemap demonstriert und Kacheln Kollisionsbereiche hinzufügt. Sehen Sie sich das Video an, wenn Sie beide Möglichkeiten kurz verstehen möchten:

Verwenden einer regulären isometrischen Tilemap

Für die reguläre isometrische Tilemap können Sie einfach eine neue Tilemap mit demselben Raster erstellen und der Reihenfolge in der Ebene einen höheren Wert zuweisen. Anschließend können Sie den Parameter Kachelanker so ändern, dass die neue Ebene an einem höheren Punkt im selben Raster verankert wird.

In meiner Tilemap für X und Y der unteren Ebene ist der Kachelanker auf (0, 0) gesetzt. Ich möchte, dass die neue Ebene eine Einheit höher gezeichnet wird, daher ändere ich den Ankerpunkt der neuen Tilemap auf (1, 1). Ich werde auch die Reihenfolge in Ebene auf 1 setzen - eine mehr als die Basisebene.

Jetzt können Sie die aktive Tilemap auf eine zweite Höhenstufe ändern und mit dem Zeichnen beginnen.

Verwenden von Z als isometrische Y-Tilemap

Es kann manchmal nützlich sein, unterschiedliche Höhen mit einer einzigen Tilemap zu simulieren. In einem solchen Fall können Z als Y Isometric Tilemap und Grid verwendet werden.

Im Fall von Z als Y-Tilemap wirkt sich der Z-Wert jeder Kachel zusätzlich auf die Reihenfolge aus, in der die Kacheln gerendert werden. Sie können den Wert von Z-Kacheln beim Zeichnen mit dem Pinselparameter Z-Position am unteren Rand der Kachelpalette (sowie mit den Tastenkombinationen "+" und "-") ändern:


Damit der Z-Wert korrekt beeinflusst und die Kacheln korrekt sortiert werden, müssen Sie zum Wert für die benutzerdefinierte Achsensortierung zurückkehren und den Z-Einfluss hinzufügen. Die hier verwendete Zahl steht in direktem Zusammenhang damit, wie Unity die Positionen der isometrischen Gitterzellen in Werte im Weltraum konvertiert.

Beispielsweise hat ein Gitter mit Abmessungen gemäß XYZ von (1, 0,5, 1) - Standard für Isometrie - einen Sortierwert entlang der Z-Achse von -0,26. Wenn Sie daran interessiert sind, wie diese Zahl berechnet wird, oder wenn Sie ein Raster mit einer anderen Zellengröße verwenden, lesen Sie weiter, um herauszufinden, wie Sie den richtigen Z-Wert für Ihren Fall finden.

Durch Festlegen des richtigen Werts für die benutzerdefinierte Achsensortierung können Sie mit dem Zeichnen von Kacheln mit unterschiedlichen Z-Werten beginnen. Sie können auch die Inkremente konfigurieren, mit denen der Z-Wert die erhöhten Kacheln nach oben oder unten verschiebt, indem Sie die Z-Größe des Gitters ändern, die standardmäßig 1 ist.

Z-Wert-Berechnung

Es gibt eine allgemeine Formel, mit der der Z-Wert der Achsensortierung bestimmt werden kann. Nehmen Sie zuerst die Größe Y des Gitters. Wenn Sie sich noch nicht für die Größe von Y entschieden haben, lesen Sie den Hinweis zum Importieren von Assets oben. Multiplizieren Sie diesen Wert mit -0,5 und subtrahieren Sie weitere 0,01.

Nach dieser Formel ergibt ein Gitter mit einer Größe von (1, 0,5, 1) einen Sortierwert nach Z von -0,26. Mit diesem Sortierwert werden die Kacheln eines beliebigen Gitters (1, 0,5, 1) korrekt sortiert.

Wenn Sie mehr über diesen Wert und über Berechnungen erfahren möchten, lesen Sie die Dokumentation . Es erklärt ausführlich die Arbeit von 2D-Renderern und was passiert, wenn isometrische Zellen in Weltraumwerte konvertiert werden.

Kollisionen hinzufügen

Nachdem wir einige der Kacheln über die anderen gelegt haben, können wir mithilfe von Kollisionen die Bereiche steuern, die der Spieler erreichen kann, und die Übergänge zwischen ihnen.

Es gibt viele Möglichkeiten, Kollisionen hinzuzufügen, aber in unserem Fall ist es erforderlich, dass der Spieler entlang des Abhangs steigt und fällt, sodass es nicht so offensichtlich ist, welche Objekte Kollider haben sollten. Mit der optionalen Tilemap können Konflikte manuell festgelegt werden.

In diesem Projekt haben wir mehrere Sprites erstellt, die verschiedenen Formen entsprechen und Kollisionsbereiche definieren. Wir können diese Formen auf der dritten Tilemap an Stellen zeichnen, an denen der Spieler nicht passen kann. Zum Beispiel möchten wir, dass ein Spieler einen Felsen nur entlang eines Abhangs besteigen kann und nicht direkt darauf.

Wir können Tilemap Renderer auch einzigartiges Material hinzufügen, um Fliesen einen anderen Farbton zu verleihen und sie vom Rest des Levels zu unterscheiden.

Durch Platzieren von Kollisionskacheln können Sie Tilemap-Kollisionen die Tilemap Collider-Komponente hinzufügen. In diesem Fall werden für jede einzelne Kachel automatisch Kollider erstellt, die durch die Form des Sprites bestimmt werden.

Um die Leistung zu optimieren, können Sie auch die Composite Collider 2D-Komponente hinzufügen und das Kontrollkästchen Verwendet von Composite für Tilemap Collider aktivieren. Dadurch werden alle einzelnen Collider zu einer großen Form zusammengefasst.

Elemente hinzufügen

Das Hinzufügen von Elementen zu einer Ebene ist ganz einfach. Sie können Element-Sprites entweder manuell an einem beliebigen Punkt in der Szene platzieren oder Elemente an das Tilemap-Raster anhängen und sie in separate Kacheln verwandeln. Wählen Sie die für Sie am besten geeignete Lösung.

In diesem Projekt haben wir mehrere Bäume manuell auf der Ebene platziert. Bäume und Charaktere haben in der Ebene dieselbe Reihenfolge, sodass Sie den Charakter vor und hinter den Bäumen dynamisch sortieren können.

Mit dem Collider können Sie den Punkt angeben, an dem sich der Spieler dem Baum nähern kann. Dies kann auch auf verschiedene Arten erfolgen.

Der erste wird im Video gezeigt - befestigen Sie einfach einen untergeordneten Collider am Objekt und ändern Sie seine Form nach Bedarf.

Die zweite Möglichkeit besteht darin, die benutzerdefinierte Physikform für das Objekt im Sprite-Editor festzulegen. Um den Sprite-Editor zu öffnen, wählen Sie das Sprite-Objekt aus und suchen Sie die Schaltfläche Sprite-Editor im Inspektor. Wechseln Sie im Dropdown-Menü oben links zum Editor für benutzerdefinierte Physikform. Hier können Sie polygonale Formen erstellen, die die Ränder des Colliders definieren. Nachdem Sie das physische Formular festgelegt haben, können Sie die Polygon Collider-Komponente an das Objekt anhängen. Diese entspricht diesem Formular.

Wenn Sie in Tilemap Objekte als Kacheln verwenden, können Sie auch den Raster-Collider verwenden. Wählen Sie das Kachel-Asset aus, das mit der Elementkachel übereinstimmt (wenn Sie sich nicht erinnern, wo Sie es finden können, lesen Sie den Abschnitt "Grundlegender Tilemap-Prozess"). Sie sehen das Menü Collider Type. Standardmäßig ist ein Sprite als Typ festgelegt, dh der automatisch generierte Collider verwendet die oben erwähnte Physikform. Wenn der Typ auf Raster eingestellt ist. dann stimmt es immer genau mit der Form der Netzzelle überein, an die das Element angehängt ist. Vielleicht ist dies nicht der genaueste Weg, um Collider zu implementieren, aber für einige Arten von Spielen kann es nützlich sein.

Um Collider für diese Kacheln zu verwenden, wählen Sie die Tilemap mit Objekten aus und fügen Sie die Tilemap Collider-Komponente hinzu.

Verwenden von Regelkacheln

Regelkacheln sind äußerst nützlich, um den Zeichenprozess mit Kacheln zu automatisieren. Regelkachel funktioniert wie eine normale Kachel, verfügt jedoch über eine zusätzliche Liste von Kacheloptionen. () , .

Rule Tiles , , , . , , .

Rule Tiles 2D Extras Unity GitHub. Tilemap, .

Isometric Starter Kit Rule Tiles . , :

, Unity, Isometric Starter kit ! , Tilemap , .

, , , , Isometric Tilemap:


Unity @castpixel ; . 2D- Unity, - Learn . , Unity Asset Store .

Tilemap? Unity Learn.