Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Isometric

Isometrische Tiefensortierung für bewegende Plattformen

by
Read Time:11 minsLanguages:

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Die Tiefensortierung kann in einfachen Worten erklärt werden, um herauszufinden, welches Element näher an der Kamera und welches weiter entfernt ist, und dabei die Reihenfolge zu bestimmen, in der sie angeordnet werden müssen, um die richtige Tiefe in der Szene zu vermitteln.

In diesem Tutorial werden wir uns eingehender mit der Tiefensortierung nach isometrischen Ebenen befassen, wenn wir versuchen, bewegliche Plattformen hinzuzufügen. Dies ist kein Anfänger-Tutorial zur isometrischen Theorie und es geht nicht um den Code. Der Fokus liegt darauf, die Logik und Theorie zu verstehen, anstatt den Code zu zerlegen. Das Werkzeug der Wahl für das Lernprogramm ist Unity, und daher ändert die Tiefensortierung im Wesentlichen die sortingOrder der beteiligten Sprites. Bei anderen Frameworks kann es sich um eine Änderung der z-Reihenfolge oder der Reihenfolge der Zeichenreihenfolge handeln.

Um mit der isometrischen Theorie zu beginnen, lesen Sie bitte diese Tutorial-Reihe. Der Code und die Szenenstruktur folgen meinem vorherigen isometrischen Tutorial. Bitte beziehen Sie sich auf diese, wenn Sie Schwierigkeiten haben, dem Tutorial zu folgen, da ich mich in diesem Tutorial nur auf die Logik konzentrieren werde.

1. Ebenen ohne Bewegung

Wenn Ihre isometrische Ebene keine beweglichen Elemente enthält oder nur wenige Zeichen über die Ebene laufen, ist die Tiefensortierung unkompliziert. In solchen Fällen wären die Zeichen, die die isometrischen Kacheln belegen, kleiner als die Kacheln selbst und können einfach dieselbe Zeichnungsreihenfolge/-tiefe wie die Kacheln verwenden, die sie belegen.

Lassen Sie uns solche bewegungslosen Ebenen als statische Ebenen bezeichnen. Es gibt einige Möglichkeiten, wie solche Ebenen gezeichnet werden können, damit die richtige Tiefe vermittelt wird. In der Regel handelt es sich bei den Ebenendaten um ein zweidimensionales Array, bei dem die Zeilen und Spalten den Zeilen und Spalten der Ebene entsprechen.

Betrachten Sie die folgende isometrische Ebene mit nur zwei Zeilen und sieben Spalten.

Isometric level with 2 rows and numbered z orderIsometric level with 2 rows and numbered z orderIsometric level with 2 rows and numbered z order

Die Zahlen auf den Kacheln geben ihre sortingOrder oder Tiefe oder z-Reihenfolge an, d. H. Die Reihenfolge, in der sie gezeichnet werden müssen. Bei dieser Methode zeichnen wir alle Spalten in der ersten Zeile, beginnend mit der ersten Spalte mit einer sortingOrder von 1.

Sobald alle Spalten in der ersten Zeile gezeichnet sind, hat die der Kamera am nächsten gelegene Spalte eine sortingOrder von 7, und wir fahren mit der nächsten Zeile fort. Jedes Element in der zweiten Zeile hat also eine höhere sortingOrder als jedes Element in der ersten Zeile.

Genau so müssen die Kacheln angeordnet werden, um die richtige Tiefe zu vermitteln, da ein Sprite mit einer höheren sortingOrder alle anderen Sprites mit einer niedrigeren sortingOrder überlagert.

Der Code besteht lediglich darin, die Zeilen und Spalten des Ebenenarrays zu durchlaufen und sortingOrder nacheinander in aufsteigender Reihenfolge zuzuweisen. Es würde nicht brechen, selbst wenn wir Zeilen und Spalten vertauschen, wie im Bild unten zu sehen ist.

Isometric level with 2 columns and numbered z orderIsometric level with 2 columns and numbered z orderIsometric level with 2 columns and numbered z order

Hier zeichnen wir zuerst eine vollständige Spalte, bevor wir zur nächsten Zeile übergehen. Die Tiefenwahrnehmung bleibt erhalten. Die Logik für eine statische Ebene besteht also darin, entweder eine vollständige Zeile oder eine vollständige Spalte zu zeichnen und dann mit der nächsten fortzufahren, während sortingOrder nacheinander in aufsteigender Reihenfolge zugewiesen wird.

Höhe hinzufügen

Wenn wir die Ebene als Gebäude betrachten, zeichnen wir derzeit das Erdgeschoss. Wenn wir unserem Gebäude eine neue Etage hinzufügen müssen, müssen wir nur warten, bis wir zuerst das gesamte Erdgeschoss gezeichnet haben, und die gleiche Methode für die nächste Etage anwenden.

Für die richtige Tiefe haben wir gewartet, bis die gesamte Reihe vollständig war, bevor wir zur nächsten Reihe übergegangen sind, und ebenso haben wir gewartet, bis alle Reihen vollständig sind, bevor wir zur nächsten Etage übergegangen sind. Für eine Ebene mit nur einer Reihe und zwei Etagen würde es also wie im Bild unten aussehen.

Isometric level with 2 floors and numbered z orderIsometric level with 2 floors and numbered z orderIsometric level with 2 floors and numbered z order

Im Wesentlichen hat jede Kachel in der oberen Etage eine höhere sortingOrder als jede Kachel in der unteren Etage. Für den Code zum Hinzufügen höherer Stockwerke müssen wir nur den y-Wert der Bildschirmkoordinaten für die Kachel versetzen, je nachdem, welches Stockwerk sie belegt.

Der Wert für floorHeight gibt die wahrgenommene Höhe des isometrischen Blockkachelbilds an, während floorLevel angibt, welchen Boden die Fliese einnimmt.

2. Verschieben von Kacheln auf der X-Achse

Die Tiefensortierung auf statischer isometrischer Ebene war nicht kompliziert, oder? Lassen Sie uns fortfahren, die Methode der ersten Zeile zu befolgen, bei der wir der ersten Zeile sortingOrder vollständig zuweisen und dann mit der nächsten fortfahren. Betrachten wir unsere erste bewegliche Kachel oder Plattform, die sich auf einer einzelnen Achse bewegt, der x-Achse.

Wenn ich sage, dass sich die Bewegung auf der x-Achse befindet, müssen Sie erkennen, dass es sich um das kartesische Koordinatensystem und nicht um das isometrische Koordinatensystem handelt. Betrachten wir eine Ebene mit nur einem Erdgeschoss aus drei Zeilen und sieben Spalten. Betrachten wir auch, dass die zweite Reihe nur eine einzige Kachel hat, die unsere bewegliche Kachel ist. Das Level sieht wie im Bild unten aus.

level with 3 rows and single tile moving in x axislevel with 3 rows and single tile moving in x axislevel with 3 rows and single tile moving in x axis

Die dunkle Kachel ist unsere sich bewegende Kachel, und die sortingOrder, die sie erhalten würde, ist 8, da die erste Reihe 7 Kacheln enthält. Wenn sich die Kachel auf der kartesischen x-Achse bewegt, bewegt sie sich entlang des Grabens zwischen den beiden Reihen. An allen Positionen, die es entlang dieses Pfades einnehmen kann, haben die Kacheln in Zeile 1 eine geringere sortingOrder.

In ähnlicher Weise haben alle Kacheln in Zeile 2 eine höhere sortingOrder, unabhängig von der Position der dunklen Kacheln entlang des Pfades. Da wir also der ersten Methode zum Zuweisen von sortingOrder folgen, müssen wir nichts für die Bewegung auf der x-Achse tun. Das war einfach.

3. Verschieben von Kacheln auf der Y-Achse

Probleme treten auf, wenn wir die y-Achse betrachten. Betrachten wir eine Ebene, in der sich unsere dunkle Kachel entlang eines rechteckigen Grabens bewegt, wie unten gezeigt. Sie können dasselbe in der MovingSortingProblem Unity-Szene in der Quelle sehen.

showing depth issues while moving in y axisshowing depth issues while moving in y axisshowing depth issues while moving in y axis

Mit unserem Ansatz für die erste Zeile können wir eine sortingOrder für unsere sich bewegende Kachel basierend auf der aktuell belegten Zeile bereitstellen. Wenn sich die Kachel zwischen zwei Zeilen befindet, wird ihr eine sortingOrder zugewiesen, die auf der Zeile basiert, aus der sie verschoben wird. In diesem Fall kann es nicht der sequentiellen sortingOrder in der Zeile folgen, in die es verschoben wird. Dies bricht im Wesentlichen unseren Ansatz der Tiefensortierung.

In Blöcken sortieren

Um dies zu lösen, müssen wir unsere Ebene in verschiedene Blöcke unterteilen, von denen einer der Problemblock ist, der unter unserem Ansatz der ersten Reihe bricht, und der Rest sind Blöcke, die dem Ansatz der ersten Reihe folgen können, ohne zu brechen. Betrachten Sie das Bild unten zum besseren Verständnis.

level divided into blocks of which one is the problem blocklevel divided into blocks of which one is the problem blocklevel divided into blocks of which one is the problem block

Der durch den blauen Bereich dargestellte 2x2-Kachelblock ist unser Problemblock. Alle anderen Blöcke können weiterhin dem ersten Ansatz der Zeile folgen. Bitte lassen Sie sich von dem Bild nicht verwirren, da es eine Ebene zeigt, die mit unserem Blockansatz bereits richtig sortiert ist. Der blaue Block besteht aus den beiden Spaltenkacheln in den Zeilen, zwischen denen sich unsere dunkle Kachel gerade bewegt, und den Kacheln unmittelbar links davon.

Um das Tiefenproblem für den Problemblock zu lösen, können wir den Ansatz der ersten Spalte nur für diesen Block verwenden. Für die grünen, rosa und gelben Blöcke verwenden wir also zuerst die Zeile und für den blauen Block den Ansatz "Spalte zuerst".

Beachten Sie, dass wir den sortingOrder noch nacheinander zuweisen müssen. Zuerst der grüne Block, dann der rosa Block links, dann der blaue Block, jetzt kommt der rosa Block rechts und schließlich der gelbe Block. Wir brechen die Reihenfolge nur, um im blauen Block zum ersten Ansatz der Spalte zu wechseln.

Alternativ können wir auch den 2x2-Block rechts von der sich bewegenden Kachelsäule betrachten. (Das Interessante ist, dass Sie nicht einmal den Ansatz wechseln müssen, da das Aufteilen in Blöcke selbst unser Problem in diesem Fall bereits gelöst hat.) Die Lösung kann in der BlockSort-Szene in Aktion gesehen werden.

depth issues solved using blocksdepth issues solved using blocksdepth issues solved using blocks

Dies bedeutet folgenden Code.

4. Verschieben von Kacheln auf der Z-Achse

Eine Bewegung in der z-Achse ist eine gefälschte Bewegung auf isometrischer Ebene. Es ist im Wesentlichen nur eine Bewegung auf der y-Achse des Bildschirms. Für eine einstöckige isometrische Ebene ist nichts mehr zu tun, um eine Bewegung auf der z-Achse hinzuzufügen, wenn Sie die oben beschriebene Blocksortierungsmethode bereits durchgeführt haben. Sie können dies in Aktion in der SingleLayerWave Unity-Szene sehen, in der ich zusammen mit der seitlichen Grabenbewegung eine zusätzliche Wellenbewegung auf der z-Achse hinzugefügt habe.

Z Bewegung auf Ebenen mit mehreren Etagen

Das Hinzufügen einer zusätzlichen Etage zu Ihrem Level ist nur eine Frage des Versatzes der y-Koordinate des Bildschirms, wie zuvor erläutert. Wenn sich die Kachel nicht auf der z-Achse bewegt, müssen Sie für die Tiefensortierung nichts Besonderes tun. Wir können das Sortieren des Erdgeschosses mit Bewegung blockieren und dann die Sortierung der ersten Reihe auf jedes aufeinanderfolgende Stockwerk anwenden. Sie können dies in Aktion in der BlockSortWithHeight Unity-Szene sehen.

level with multiple floors and lateral motionlevel with multiple floors and lateral motionlevel with multiple floors and lateral motion

Ein sehr ähnliches Tiefenproblem tritt auf, wenn sich die Fliese zwischen den Stockwerken bewegt. Es kann nur die sequentielle Reihenfolge eines Stockwerks mit unserem Ansatz erfüllen und würde die Tiefensortierung des anderen Stockwerks aufheben. Wir müssen unsere Blocksortierung auf drei Dimensionen erweitern oder ändern, um dieses Tiefenproblem bei Fußböden zu lösen.

Das Problem werden im Wesentlichen nur die zwei Stockwerke sein, zwischen denen sich die Fliese gerade bewegt. Für alle anderen Stockwerke können wir uns an unseren aktuellen Sortieransatz halten. Besondere Anforderungen gelten nur für diese beiden Stockwerke, unter denen wir zunächst das untere Stockwerk wie folgt bestimmen können, wobei tileZOffset die Bewegungsmenge auf der z-Achse für unser sich bewegendes Plättchen ist.

Dies bedeutet, dass immer niedriger + 1 die Böden sind, die einen besonderen Ansatz benötigen. Der Trick besteht darin, sortingOrder für beide Etagen zusammen zuzuweisen, wie im folgenden Code gezeigt. Dadurch wird die Reihenfolge so festgelegt, dass die Tiefenprobleme behoben werden.

Im Wesentlichen betrachten wir zwei Stockwerke als ein einziges Stockwerk und führen eine Blocksortierung auf diesem einzigen Stockwerk durch. Überprüfen Sie den Code und die Aktion in der Szene BlockSortWithHeightMovement. Mit diesem Ansatz kann sich unsere Kachel jetzt frei auf einer der beiden Achsen bewegen, ohne die Tiefe der Szene zu beeinträchtigen, wie unten gezeigt.

level with tile moving along all 3 axeslevel with tile moving along all 3 axeslevel with tile moving along all 3 axes

Abschluss

Die Idee dieses Tutorials war es, die Logik der Tiefensortierungsansätze zu verdeutlichen, und ich hoffe, Sie haben dies ziemlich verstanden. Es ist offensichtlich, dass wir vergleichsweise einfache Ebenen mit nur einer sich bewegenden Kachel betrachten.

Es gibt auch keine Pisten, da das Einbeziehen von Pisten dies zu einem viel längeren Tutorial gemacht hätte. Sobald Sie die Sortierlogik verstanden haben, können Sie versuchen, die zweidimensionale Steigungslogik auf die isometrische Ansicht zu erweitern.

Die Einheit hat eine aktive Wirtschaft. Es gibt viele andere Produkte, die Ihnen beim Aufbau Ihres Projekts helfen. Die Art der Plattform macht sie auch zu einer großartigen Option, mit der Sie Ihre Fähigkeiten verbessern können. In jedem Fall können Sie sehen, was wir auf dem Envato Market anbieten.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.