Share
In diesem Tutorial gebe ich Ihnen einen umfassenden Überblick darüber, was Sie wissen müssen, um isometrische Welten zu erstellen. Sie erfahren, was die isometrische Projektion ist und wie isometrische Ebenen als 2D-Arrays dargestellt werden. Wir werden Beziehungen zwischen der Ansicht und der Logik formulieren, so dass wir Objekte auf dem Bildschirm problemlos bearbeiten und kachelbasierte Kollisionserkennung durchführen können. Wir werden uns auch mit der Sortierung nach Tiefe und der Charakteranimation befassen.
Um die Entwicklung Ihres Spiels zu beschleunigen, finden Sie auf Envato Market eine Reihe isometrischer Spielelemente, die Sie in Ihrem Spiel verwenden können.
Isometrische Game Assets auf dem Envato Market zusammenhängende Posts Möchten Sie noch mehr Tipps zum Erstellen von isometrischen Welten? Schauen Sie sich den folgenden Beitrag an: Erstellen von isometrischen Welten: Eine Einführung in Gamedevs, Fortsetzung, und Juwals Buch, Starling Game Development Essentials.
Isometrische Ansicht ist eine Anzeigemethode, die verwendet wird, um eine Illusion von 3D für ein ansonsten 2D-Spiel zu erzeugen - manchmal auch als bezeichnet Pseudo 3D oder 2.5D. Diese Bilder (aus Diablo 2 und Age of Empires) zeigen, was ich meine:
Diablo 2 
Zeitalter der Imperien Die Implementierung einer isometrischen Ansicht kann auf verschiedene Arten erfolgen, aber der Einfachheit halber konzentriere ich mich auf eine Fliesenbasiert Dies ist die effizienteste und am weitesten verbreitete Methode. Ich habe jeden Screenshot oben mit einem Diamantgitter überlagert, das zeigt, wie das Gelände in Kacheln aufgeteilt ist.
Bei dem auf Kacheln basierenden Ansatz wird jedes visuelle Element in kleinere Teile, die als Kacheln bezeichnet werden, in Standardgröße zerlegt. Diese Kacheln werden so arrangiert, dass sie die Spielwelt gemäß den festgelegten Pegeldaten bilden - normalerweise ein 2D-Array.
zusammenhängende PostsBetrachten wir zum Beispiel eine Standard-2D-Ansicht von oben nach unten mit zwei Kacheln - einer Gras- und einer Wandfliese - wie hier gezeigt:
Einige einfache Fliesen Diese Kacheln haben jeweils die gleiche Größe und sind jeweils quadratisch, sodass die Kachelhöhe und die Kachelbreite gleich sind.
Für eine Ebene mit Wiesen, die an allen Seiten von Wänden umgeben ist, sieht das 2D-Array der Ebenendaten folgendermaßen aus:
[[1,1,1,1,1,1], [1,0,0,0,0,1], [1,0,0,0,0,1], [1,0,0, 0,0,1], [1,0,0,0,0,1], [1,1,1,1,1,1]]
Hier, 0 bezeichnet ein Grasplättchen und 1 bezeichnet eine Wandfliese. Wenn Sie die Kacheln entsprechend den Ebenendaten anordnen, wird das Bild unterhalb der Ebene erzeugt:
Eine einfache Ebene, die in einer Ansicht von oben nach unten angezeigt wird. Wir können dies verbessern, indem Sie Eckfliesen und separate vertikale und horizontale Wandfliesen hinzufügen, wodurch fünf zusätzliche Fliesen erforderlich sind:
[[3,1,1,1,1,4], [2,0,0,0,0,2], [2,0,0,0,0,2], [2,0,0, 0,0,2], [2,0,0,0,0,2], [6,1,1,1,1,5]]
Verbesserte Ebene mit Fliesennummern Ich hoffe, dass das Konzept des Kachelansatzes jetzt klar ist. Dies ist eine unkomplizierte 2D-Raster-Implementierung, die wir wie folgt codieren könnten:
for (i, Schleife durch Zeilen) for (j, Schleife durch Spalten) x = j * Kachelbreite y = i * Kachelhöhe tileType = levelData [i] [j] placetile (tileType, x, y)
Hier gehen wir davon aus, dass die Kachelbreite und die Kachelhöhe gleich sind (und für alle Kacheln gleich sind) und den Abmessungen der Kachelbilder entsprechen. Daher sind die Kachelbreite und die Kachelhöhe für dieses Beispiel beide 50px, was die Gesamtpegelgröße von 300x300px ausmacht, d. H. Sechs Reihen und sechs Kachelsäulen mit jeweils 50x50px.
Bei einem normalen Kachelansatz implementieren wir entweder eine Ansicht von oben oder eine Seitenansicht. Für eine isometrische Ansicht müssen wir das implementieren isometrische Projektion.
Die beste technische Erklärung für das, was "isometrische Projektion" bedeutet, ist meines Wissens aus diesem Artikel von Clint Bellanger:
Wir neigen unsere Kamera um zwei Achsen (schwenken Sie die Kamera um 45 Grad zur Seite und dann um 30 Grad nach unten). Dadurch entsteht ein rautenförmiges Gitter (Raute), bei dem die Rasterfelder doppelt so breit wie groß sind. Dieser Stil wurde durch Strategiespiele und Action-RPGs populär gemacht. Wenn wir einen Würfel in dieser Ansicht betrachten, sind drei Seiten sichtbar (obere und zwei gegenüberliegende Seiten)..
Obwohl es sich etwas kompliziert anhört, ist die Umsetzung dieser Ansicht unkompliziert. Was wir verstehen müssen, ist die Beziehung zwischen dem 2D-Raum und dem isometrischen Raum, dh die Beziehung zwischen den Pegeldaten und der Ansicht. die Umwandlung von "kartesischen" Koordinaten von oben nach unten in isometrische Koordinaten.
Kartesisches Gitter vs. isometrisches Gitter. (Wir betrachten keine hexagonalen Fliesentechniken, was eine andere Möglichkeit ist, isometrische Welten zu implementieren.)
Lassen Sie mich versuchen, die Beziehung zwischen den als 2D-Array gespeicherten Pegeldaten und der isometrischen Ansicht zu vereinfachen, d. H. Wie wir kartesische Koordinaten in isometrische Koordinaten umwandeln.
Wir werden versuchen, die isometrische Ansicht für unsere Daten auf der Ebene der Wiesen auf Wiesenebene zu erstellen:
[[1,1,1,1,1,1], [1,0,0,0,0,1], [1,0,0,0,0,1], [1,0,0, 0,0,1], [1,0,0,0,0,1], [1,1,1,1,1,1]]
In diesem Szenario können wir einen begehbaren Bereich ermitteln, indem Sie prüfen, ob das Array-Element vorhanden ist 0 an dieser Koordinate, wodurch Gras angezeigt wird. Die 2D-Ansichtsimplementierung der obigen Ebene war eine einfache Iteration mit zwei Schleifen, wobei quadratische Kacheln angeordnet wurden, die jeweils die festen Kachelhöhen- und Kachelbreitenwerte versetzten.
for (i, Schleife durch Zeilen) for (j, Schleife durch Spalten) x = j * Kachelbreite y = i * Kachelhöhe tileType = levelData [i] [j] placetile (tileType, x, y)
Für die isometrische Ansicht bleibt der Code derselbe, jedoch der placeTile () Funktionsänderungen.
Für eine isometrische Ansicht müssen wir die entsprechenden isometrischen Koordinaten in den Schleifen berechnen.
Die Gleichungen dafür sind wie folgt, wo isoX und isoY isometrische X- und Y-Koordinaten darstellen und cartX und cartY repräsentieren kartesische X- und Y-Koordinaten:
// kartesisch zu isometrisch: isoX = cartX - cartY; isoY = (cartX + cartY) / 2;
// Isometrisch zu Kartesisch: cartX = (2 * isoY + isoX) / 2; cartY = (2 * isoY - isoX) / 2;
Diese Funktionen zeigen, wie Sie von einem System auf ein anderes umstellen können:
Funktion isoTo2D (pt: Point): Point var tempPt: Point = neuer Punkt (0, 0); tempPt.x = (2 · pt.y + pt.x) / 2; tempPt.y = (2 * pt.y - pt.x) / 2; return (tempPt);
Funktion twoDToIso (pt: Point): Point var tempPt: Point = neuer Punkt (0,0); tempPt.x = pt.x - pt.y; tempPt.y = (pt.x + pt.y) / 2; return (tempPt);
Der Pseudocode für die Schleife sieht dann so aus:
for (i, Schleife durch Zeilen) for (j, Schleife durch Spalten) x = j * Kachelbreite y = i * Kachelhöhe tileType = levelData [i] [j] placetile (tileType, twoDToIso (neuer Punkt (x, y)) ))
Unser ummauertes Grasland in einer isometrischen Ansicht. Als Beispiel wollen wir sehen, wie eine typische 2D-Position in eine isometrische Position umgewandelt wird:
2D-Punkt = [100, 100]; // twoDToIso (2D-Punkt) wird wie folgt berechnet: isoX = 100 - 100; // = 0 isoY = (100 + 100) / 2; // = 100 Iso-Punkt == [0, 100];
Ebenso eine Eingabe von [0, 0] wird darin enden, dass [0, 0], und [10, 5] wird geben [5, 7.5].
Das obige Verfahren ermöglicht es uns, eine direkte Korrelation zwischen den 2D-Ebenendaten und den isometrischen Koordinaten herzustellen. Wir können die Koordinaten der Kachel in den Ebenendaten anhand ihrer kartesischen Koordinaten mithilfe dieser Funktion ermitteln:
Funktion getTileCoordinates (pt: Point, tileHeight: Number): Point var tempPt: Point = neuer Punkt (0, 0); tempPt.x = Math.floor (pt.x / tileHeight); tempPt.y = Math.floor (pt.y / tileHeight); return (tempPt);
(Hier gehen wir im Wesentlichen davon aus, dass Fliesenhöhe und -breite wie in den meisten Fällen gleich sind.)
Daher können wir aus einem Paar von (isometrischen) Bildschirmkoordinaten Kachelkoordinaten finden, indem Sie Folgendes aufrufen:
getTileCoordinates (isoTo2D (Bildschirmpunkt), Kachelhöhe);
Dieser Bildschirmpunkt kann beispielsweise eine Mausklickposition oder eine Abholposition sein.
Spitze: Eine andere Platzierungsmethode ist das Zickzack-Modell, das insgesamt einen anderen Ansatz verfolgt.
Die Bewegung ist sehr einfach: Sie manipulieren Ihre Spielweltdaten in kartesischen Koordinaten und verwenden einfach die oben genannten Funktionen, um sie auf dem Bildschirm zu aktualisieren. Wenn Sie beispielsweise ein Zeichen in positiver Y-Richtung vorwärts bewegen möchten, können Sie dessen Zeichen einfach erhöhen y Eigenschaft und konvertieren Sie dann seine Position in isometrische Koordinaten:
y = y + Geschwindigkeit; placetile (twoDToIso (neuer Punkt (x, y)))
Zusätzlich zur normalen Platzierung müssen wir uns darum kümmern Tiefensortierung zum Zeichnen der isometrischen Welt. Dadurch wird sichergestellt, dass Objekte, die sich näher am Player befinden, auf Objekte in größerer Entfernung gezeichnet werden.
Die einfachste Tiefensortiermethode besteht einfach darin, den kartesischen Y-Koordinatenwert zu verwenden, wie in diesem Schnelltipp erwähnt: Je weiter oben auf dem Bildschirm das Objekt ist, desto früher sollte es gezeichnet werden. Dies funktioniert gut, solange wir keine Sprites haben, die mehr als einen einzelnen Kachelraum beanspruchen.
Die effizienteste Art der Tiefensortierung für isometrische Welten besteht darin, alle Kacheln in standardmäßige Einzelkacheldimensionen aufzuteilen und keine größeren Bilder zuzulassen. Hier ist zum Beispiel eine Kachel, die nicht in die Standardkachelgröße passt - sehen Sie, wie wir sie in mehrere Kacheln aufteilen können, die jeweils zu den Kachelabmessungen passen:
Ein großes Bild wird in mehrere Kacheln mit isometrischen Standardabmessungen aufgeteilt Isometrische Kunst kann Pixelkunst sein, muss aber nicht sein. Wenn Sie sich mit isometrischer Pixelkunst beschäftigen, enthält der RhysD-Leitfaden fast alles, was Sie wissen müssen. Einige Theorien sind auch auf Wikipedia zu finden.
Beim Erstellen von isometrischer Kunst gelten die allgemeinen Regeln
Isometrische Kacheln, die größer als die einzelnen Kacheldimensionen sind, führen zu Problemen bei der Tiefensortierung. Einige der Probleme werden in diesen Links behandelt:
zusammenhängende PostsDas Implementieren von Zeichen in der isometrischen Ansicht ist nicht kompliziert, da es sich anhört. Charakterkunst muss nach bestimmten Standards erstellt werden. Zuerst müssen wir festlegen, wie viele Bewegungsrichtungen in unserem Spiel zulässig sind. Normalerweise bieten Spiele eine Vier-Wege-Bewegung oder eine Acht-Wege-Bewegung.
Acht-Wege-Navigationsanweisungen in Draufsicht und isometrischer Ansicht. Für eine Ansicht von oben nach unten könnten wir eine Reihe von Zeichenanimationen erstellen, die in eine Richtung zeigen, und sie einfach für alle anderen drehen. Bei der isometrischen Zeichenkunst müssen wir jede Animation in jeder der zulässigen Richtungen erneut rendern. Für eine Bewegung in acht Richtungen müssen wir acht Animationen für jede Aktion erstellen. Zum leichteren Verständnis bezeichnen wir die Richtungen normalerweise als Nord, Nordwesten, Westen, Südwesten, Süden, Südosten, Osten und Nordosten in dieser Reihenfolge entgegen dem Uhrzeigersinn.
Ein isometrisches Zeichen, das in verschiedene Richtungen zeigt. Wir platzieren Charaktere genauso, wie wir Kacheln legen. Die Bewegung eines Zeichens wird erreicht, indem die Bewegung in kartesischen Koordinaten berechnet und anschließend in isometrische Koordinaten umgewandelt wird. Nehmen wir an, wir verwenden die Tastatur, um den Charakter zu steuern.
Wir werden zwei Variablen einstellen, dX und dY, basierend auf den gedrückten Richtungstasten. Standardmäßig sind diese Variablen 0, und wird gemäß der nachstehenden Tabelle aktualisiert U, D, R und L bezeichnen das Oben, Nieder, Recht und Links Pfeiltasten. Ein Wert von 1 Unter einer Taste steht die Taste, die gedrückt wird. 0 bedeutet, dass die Taste nicht gedrückt wird.
Schlüsselposition UDRL dX dY ================= 0 0 0 0 0 0 0 0 0 0 0 0 1 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -1 0 1 0 1 0 1 1 1 0 0 1 -1 1 0 1 1 0 1 -1 0 1 0 1 -1 -1
Jetzt mit den Werten von dX und dY, Wir können die kartesischen Koordinaten so aktualisieren:
newX = currentX + (dX * Geschwindigkeit); newY = currentY + (dY * Geschwindigkeit);
So dX und dY steht für die Änderung der x- und y-Position des Zeichens, basierend auf den gedrückten Tasten.
Wir können die neuen isometrischen Koordinaten leicht berechnen, wie wir bereits besprochen haben:
Iso = twoDToIso (neuer Punkt (newX, newY))
Sobald wir die neue isometrische Position haben, müssen wir Bewegung der Charakter an dieser Position. Basierend auf den Werten, die wir für haben dX und dY, Wir können entscheiden, in welche Richtung der Charakter schaut und die entsprechende Zeichenkunst verwenden.
Die Kollisionserkennung wird durchgeführt, indem geprüft wird, ob die Kachel an der berechneten neuen Position eine nicht begehbare Kachel ist. Sobald wir die neue Position gefunden haben, bewegen wir den Charakter nicht sofort dorthin, sondern prüfen zuerst, welche Kachel diesen Platz belegt.
Tile Coordinate = getTileCoordinates (IsoTo2D (Iso-Punkt), Kachelhöhe); if (isWalkable (Fliesenkoordinate)) moveCharacter (); else // nichts tun;
In der Funktion isWalkable (), Wir prüfen, ob der Wert des Level-Datenfelds an der angegebenen Koordinate eine begehbare Kachel ist oder nicht. Wir müssen darauf achten, die Richtung zu ändern, in die die Figur zeigt - auch wenn er sich nicht bewegt, wie im Fall, dass er auf einen nicht begehbaren Stein fällt.
Betrachten Sie einen Charakter und eine Baumkachel in der isometrischen Welt.
Um das Sortieren der Tiefe richtig zu verstehen, müssen wir verstehen, dass, wenn die X- und Y-Koordinaten des Zeichens niedriger als die des Baums sind, der Baum den Charakter überlappt. Wenn die X- und Y-Koordinaten des Zeichens größer als die des Baums sind, überlappt der Charakter den Baum.
Wenn sie die gleiche x-Koordinate haben, entscheiden wir allein aufgrund der y-Koordinate: Wer immer die höhere y-Koordinate hat, überlappt die andere. Wenn sie die gleiche y-Koordinate haben, entscheiden wir allein aufgrund der x-Koordinate: Wer immer die höhere x-Koordinate hat, überlappt die andere.
Eine vereinfachte Version davon besteht darin, die Ebenen ausgehend von der am weitesten entfernten Kachel sequenziell zu zeichnen - das heißt, Kachel [0] [0] - Zeichne dann alle Kacheln in jeder Reihe nacheinander. Wenn ein Zeichen eine Kachel belegt, zeichnen wir zuerst die Bodenkachel und rendern dann die Zeichenkachel. Dies funktioniert gut, weil der Charakter keine Wandfliese belegen kann.
Die Tiefensortierung muss jedes Mal durchgeführt werden, wenn sich eine Kachelposition ändert. Zum Beispiel müssen wir es tun, wenn sich Charaktere bewegen. Anschließend aktualisieren wir die angezeigte Szene, nachdem die Tiefensortierung durchgeführt wurde, um die Tiefenänderungen wiederzugeben.
Nutzen Sie jetzt Ihr neues Wissen, indem Sie einen funktionsfähigen Prototyp erstellen, mit Tastatursteuerelementen und der richtigen Sortierung nach Tiefe und Kollisionserkennung. Hier ist meine Demo:
Klicken Sie, um den SWF-Fokus festzulegen, und verwenden Sie dann die Pfeiltasten. Klicken Sie hier für die Vollversion.
Sie finden diese Utility-Klasse möglicherweise hilfreich (ich habe sie in AS3 geschrieben, sollte sie jedoch in jeder anderen Programmiersprache verstehen können):
Paket com.csharks.juwalbose import flash.display.Sprite; import flash.geom.Point; public class IsoHelper / ** * konvertiert einen isometrischen Punkt in 2D * * / öffentliche statische Funktion isoTo2D (pt: Point): Point // gx = (2 * isoy + isox) / 2; // gy = (2 * isoy-isox) / 2 var tempPt: Point = new Point (0,0); tempPt.x = (2 · pt.y + pt.x) / 2; tempPt.y = (2 * pt.y-pt.x) / 2; return (tempPt); / ** * Konvertieren eines 2d-Punkts in eine isometrische * * / öffentliche statische Funktion twoDToIso (pt: Point): Point // gx = (isox-isoxy; // gy = (isoy + isox) / 2 var tempPt: Point = neuer Punkt (0,0); tempPt.x = pt.x-pt.y; tempPt.y = (pt.x + pt.y) / 2; return (tempPt); / ** * konvertiere ein 2d zeige auf eine bestimmte Kachelzeile / -spalte * * / public statische Funktion getTileCoordinates (pt: Point, tileHeight: Number): Point var tempPt: Point = neuer Point (0,0); tempPt.x = Math.floor (pt.x) / tileHeight); tempPt.y = Math.floor (pt.y / tileHeight); return (tempPt); / ** * Bestimmte Kachelzeile / Spalte in 2d-Punkt konvertieren * * / öffentliche statische Funktion get2dFromTileCoordinates (pt: Point, tileHeight: Number): Point var tempPt: Point = new Point (0,0); tempPt.x = pt.x * tileHeight; tempPt.y = pt.y * tileHeight; return (tempPt);
Wenn Sie wirklich nicht weiterkommen, finden Sie hier den vollständigen Code aus meiner Demo (in Flash- und AS3-Timeline-Code):
Accentsconagua
