TileMaps verwenden

Einführung

Eine TileMap ist ein Raster aus Kacheln (Tiles), mit denen das Layout eines Spiels erstellt wird. Die Verwendung von TileMap-Nodes zum Entwerfen Ihrer Ebenen bietet mehrere Vorteile. Erstens ermöglichen sie das Zeichnen des Layouts, indem sie die Kacheln auf ein Raster "malen", was viel schneller ist als das Platzieren einzelner :ref: Sprite <class_Sprite>-Nodes nacheinander. Zweitens ermöglichen sie viel größere Ebenen, da sie für das Zeichnen einer großen Anzahl von Kacheln optimiert sind. Schließlich können Sie Kacheln Kollisions-, Verdeckungs- und Navigationsformen hinzufügen und der TileMap zusätzliche Funktionen hinzufügen.

../../_images/tileset_draw_atlas.png

Projektkonfiguration

In dieser Demo werden die folgenden Kacheln aus Kenneys Paket "Abstract Platformer" verwendet. Das komplette Set finden Sie hier, aber für diese Demo bleiben wir bei diesem kleinen Set.

../../_images/tilesheet.png

Erstellen Sie ein neues Projekt und legen Sie das obige Bild im Projektordner ab.

Bei Verwendung eines TileSets ist es wichtig, dass benachbarte Kacheln übereinstimmen. Godots Standard ist das Importieren von 2D-Bildern mithilfe eines interpolierten "Filter" -Modus, was zu hässlichen Rändern zwischen den Kacheln führt. Wählen Sie das Bild aus und klicken Sie auf die Registerkarte Importieren. Schalten Sie Filter aus und klicken Sie auf "Reimport". Siehe Importieren von Bildern für Details.

TileMap-Node

Fügen Sie der Szene einen neuen TileMap-Node hinzu. Standardmäßig verwendet eine TileMap ein quadratisches Kachelraster. Sie können auch einen perspektivischen "isometrischen" Modus verwenden oder Ihre eigene benutzerdefinierte Kachelform definieren.

../../_images/tilemap_mode.png

Im Abschnitt "Zelle" im Inspektor finden Sie viele veränderbare Eigenschaften, um das Verhalten Ihrer TileMap anzupassen:

../../_images/tilemap_size.png
  • Cell Size

    Dies definiert die Größe des Rasters. Dies sollte der Pixelgröße Ihrer Kacheln entsprechen. Der Standardwert ist (64, 64).

  • YSort

    Dies bewirkt, dass Kacheln in der Reihenfolge ihrer Y-Position gezeichnet werden, so dass "niedrigere" Kacheln über "höhere" Kacheln gezogen werden.

  • Half Offset und Tile Origin

    Diese Eigenschaften wirken sich auf die Position der Kachel relativ zur Rasterposition aus.

  • Quadrant

    Definiert die Blockgröße, die für das Stapelzeichnen verwendet wird. Dies kann sich negativ auf die Leistung auswirken. Ändern Sie es nur, wenn Sie wissen was Sie tun.

  • Custom Transform

    Wird verwendet, um die Form der Kachel zu ändern. Verwenden Sie diese Option, wenn Sie keine quadratische Kacheln haben.

Alle diese Optionen können für diese Übung auf ihren Standardeinstellungen belassen werden.

Erstellen eines TileSets

Sobald Sie Ihre TileMap konfiguriert haben ist es an der Zeit ein TileSet hinzuzufügen. Ein TileSet ist eine Resource, welche die Daten für jegliche Tiles enthält: Texturen, Collision Shapes und andere Eigenschaften. Wenn das Spiel läuft werden die einzelnen Tiles zu einem einzigen Objekt kombiniert.

Um ein neues TileSet hinzuzufügen, klicken Sie auf die Eigenschaft "TileSet" und wählen Sie "Neues TileSet".

../../_images/tilemap_add_tileset.png

Klicken Sie auf die TileSet-Eigenschaft, und das Fenster "TileSet" wird unten im Editorfenster geöffnet:

../../_images/tilemap_tool.png

Zuerst müssen Sie die Textur(en) hinzufügen, die Sie für die Kacheln verwenden. Klicken Sie auf die Schaltfläche "Textur(en) zu TileSet hinzufügen" und wählen Sie das Bild tilesheet.png aus.

Klicken Sie anschließend auf "Neue Einzelkachel" und ziehen Sie das Bild hinein, um die gewünschte Kachel auszuwählen. Klicken Sie auf die Schaltfläche "Fang aktivieren", um die Auswahl der gesamten Kachel zu vereinfachen. Um die ausgewählte Kachel wird ein gelbes Rechteck angezeigt.

../../_images/tilemap_add_tile.png

Klicken Sie im Szenenbaum auf die TileMap, und Sie sehen, dass die neu erstellte Kachel jetzt auf der rechten Seite angezeigt wird. Klicken Sie in das Ansichtsfenster und Sie können Kacheln platzieren. Klicken Sie mit der rechten Maustaste, um sie zu entfernen.

../../_images/tilemap_draw.png

Es ist einfach, den TileMap-Node versehentlich auszuwählen und zu verschieben. Um dies zu vermeiden, verwenden Sie die Sperrtaste des Nodes:

../../_images/tile_lock.png

Kollisionsformen

Wenn Sie eine Karte erstellen für die Kollisionen erforderlich sind (z.B. Wände, Boden oder andere Hindernisse), müssen Sie allen Kacheln, die als "fest" eingestuft werden sollen, Kollisionsformen hinzufügen.

Klicken Sie unten im Editorfenster auf "TileSet", um zum TileSet-Tool zurückzukehren. Klicken Sie auf die zuvor definierte Kachel (gelb umrandet). Wählen Sie die Registerkarte "Kollision" und klicken Sie auf die Schaltfläche "Neues Rechteck erstellen". Stellen Sie sicher, dass der Rasterfang noch aktiviert ist, und klicken und ziehen Sie die Kachel hinein. Eine quadratische Kollisionsform wird hellblau angezeigt:

../../_images/tileset_add_collision.png

Auf die gleiche Weise können Sie der Kachel Verdeckung- und Navigationsformen hinzufügen.

Atlas Kacheln

Anstatt einzelne Kacheln einzeln hinzuzufügen, können Sie mithilfe eines Atlas eine Gruppe von Kacheln gleichzeitig definieren. Auf diese Weise können Sie auch zufällig Kacheln aus der Gruppe generieren.

Klicken Sie auf "Neuer Atlas" und ziehen Sie, um das gesamte Kachelblatt auszuwählen.

../../_images/tileset_atlas.png

Wenn Sie dies noch nicht getan haben, stellen Sie sicher, dass Sie den "Schritt" in den Fangeinstellungen auf (64, 64) ändern. Andernfalls werden Ihre Kacheln möglicherweise in kleinere Stücke geschnitten. Sie finden dies im Inspektor:

../../_images/tileset_snap.png

Sobald Sie den Atlas definiert haben, können Sie den einzelnen Kacheln wie zuvor Kollisionsformen hinzufügen. Sie können auch auf "Icon" klicken, um eine der Kacheln als Symbol für diesen Atlas auszuwählen.

Zurück in der TileMap können Sie die Atlas-Kachel auswählen und sehen alle darin enthaltenen Kacheln:

../../_images/tileset_draw_atlas.png

Dies spart nicht nur Zeit beim Definieren der Kacheln, sondern kann auch dazu beitragen, ähnliche Kacheln zu gruppieren, wenn Sie mit einer großen Anzahl von Kacheln arbeiten.

Zufällige Kachelprioritäten

Wenn Sie mit Atlas Kacheln zeichnen und die Option "Priorität verwenden" aktivieren, werden die Kacheln zufällig ausgewählt. Standardmäßig hat jede Kachel im TileSet die gleiche Wahrscheinlichkeit des Auftretens. Sie können die Wahrscheinlichkeit ändern, indem Sie für jede Kachel unterschiedliche Prioritäten festlegen. Beispielsweise wird eine Kachel mit Priorität 2 doppelt so häufig ausgewählt wie eine Kachel mit Priorität 1, und eine Kachel mit Priorität 3 wird mit 50% höherer Wahrscheinlichkeit ausgewählt als eine Kachel mit Priorität 2.

AutoTiles

Mit AutoTiles können Sie eine Gruppe von Kacheln definieren und dann Regeln hinzufügen, um zu steuern, welche Kacheln basierend auf dem Inhalt benachbarter Zellen zum Zeichnen verwendet werden.

Klicken Sie auf "Neues AutoTile" und ziehen Sie, um die zu verwendenden Kacheln auszuwählen. Sie können Kollisionen, Umgebungsverdeckung, Navigationsformen und Kachelprioritäten hinzufügen und eine Symbolkachel auf dieselbe Weise wie beim Atlas auswählen.

Die Auswahl der Kacheln wird durch Bitmasken gesteuert. Bitmasken können hinzugefügt werden, indem Sie auf "Bitmaske" und dann auf Teile der Kacheln klicken, um Bits in der Maske hinzuzufügen oder zu entfernen. Wenn Sie mit der linken Maustaste auf einen Bereich der Kachel klicken, wird ein Bit hinzugefügt, mit der rechten Maustaste wird dieses Bit wieder entfernt, und mit ein 'Umschalttaste' + linke Maustaste wird ein "Ignorieren" -Bit gesetzt.

Immer wenn Godot eine Zelle mit einem Autotile aktualisiert, erstellt es zuerst ein Muster, auf dessen Grundlage benachbarte Zellen bereits festgelegt sind. Anschließend wird das Autotile nach einer einzelnen Kachel mit einer Bitmaske durchsucht, die dem erstellten Muster entspricht. Wenn keine passende Bitmaske gefunden wird, wird stattdessen die Kachel "Symbol" verwendet. Wenn mehr als eine passende Bitmaske gefunden wird, wird eine davon zufällig anhand der Kachelprioritäten ausgewählt.

Die Regeln für das Abgleichen einer Bitmaske mit einem Muster hängen vom automatischen Bitmaskenmodus des TileSets ab. Dies kann auf der Registerkarte "Inspektor" unter der Überschrift "Ausgewählte Kachel" festgelegt werden. Zulässige Werte sind "2x2", "3x3 (minimal)" und "3x3".

Alle "Ein" und "Aus" Bits müssen erfüllt sein, damit eine Bitmaske übereinstimmt, aber "Ignorieren" -Bits werden ignoriert.

2x2

Im 2x2 Modus enthält jede Bitmaske 4 Bits, eins für jede Ecke.

Wenn ein Bit "Ein" ist, müssen alle mit dieser Ecke verbundenen Zellen mit demselben AutoTile gefüllt werden damit die Bitmaske übereinstimmt. Wenn beispielsweise das Bit oben links gesetzt ist, müssen die Zellen direkt darüber, links und diagonal links darüber gefüllt werden.

Wenn ein Bit "aus" ist, darf mindestens eine mit dieser Ecke verbundene Zelle nicht mit demselben AutoTile gesetzt werden.

Für die zu verwendende Kachel muss mindestens ein Bit gesetzt sein, sodass insgesamt 15 Kacheln erforderlich sind, um genau eine Kachel für jede Anordnung bereitzustellen, auf die dieser Modus testen kann.

Der 2x2-Modus kann nur mit Zellen übereinstimmen, die Teil eines 2-mal-2-Blocks sind. Zellen ohne Nachbarn und Zeilen mit nur einer Zellbreite werden nicht unterstützt.

Vorlage - Allgemein:

Diese Vorlage kann für seitliche oder vollständig von oben nach unten gerichtete Perspektiven verwendet werden. Es ist für eine TileMap-Zellengröße von 64 x 64 ausgelegt.

Schlüssel:

  • Rot: "an"

  • Weiß: "aus"

../../_images/autotile_template_2x2.png

3x3 (minimal)

Im 3x3 (minimal) Modus enthält jede Bitmaske 9 Bits (4 Ecken, 4 Ränder, 1 Mitte). Die 4 Eckbits funktionieren genauso wie im 2x2-Modus.

Wenn ein Kantenbit "an" ist, muss die Zelle, die diese Kante teilt, gefüllt werden. Wenn ein Kantenbit "aus" ist, muss die Zelle, die diese Kante teilt, leer sein.

Das mittlere Bit sollte für jede Kachel, die Sie verwenden möchten, "Ein" sein. Beachten Sie, dass es in diesem Modus keinen Sinn macht, dass ein Eckbit "Ein" ist, wenn eines der angrenzenden Kantenbits nicht "Ein" ist.

Insgesamt wären 47 Kacheln erforderlich, um genau eine Bitmaske für jede Anordnung bereitzustellen, auf die dieser Modus testen kann.

Bemerkung

Klicken Sie mit der rechten Maustaste auf ein Bild und wählen Sie Bild speichern unter… um es zu speichern.

Vorlage - Allgemein:

Diese Vorlage kann für seitliche oder vollständige Top-Down-Perspektiven verwendet werden. Alle unten aufgeführten Vorlagen sind für eine TileMap-Zellengröße von 64x64 ausgelegt, aber für Top-Down-Vorlagen müssen Sie möglicherweise andere Unterteilgrößen verwenden, wie unten beschrieben.

Schlüssel:

  • Rot: "an"

  • Weiß: "aus"

../../_images/autotile_template_3x3_minimal.png

Vorlage - Generische 16 Kacheln:

Diese Vorlage kann für Tilesets verwendet werden, die nur 16 Kacheln haben - bei einfacheren Kunststilen werden die fehlenden Kacheln nicht auffallen.

Schlüssel:

  • Rot: "an"

  • Weiß: "aus"

  • Blau-kariert: "Ignorieren"

../../_images/autotile_template_3x3_minimal_16.png

Vorlage - Top-down-Etage in 3/4 Perspektive:

Schlüssel (gilt für die folgenden vier Vorlagen):

  • Grün: Boden

  • Cyan: Wand

  • Gelb: Oberseite der Wand

  • Grau: ausgeblendet aufgrund von Überlappung

  • Transparent: Luft

../../_images/autotile_template_3x3_minimal_topdown_floor.png

Vorlage - Top-Down-Wand in 3/4 Perspektive:

../../_images/autotile_template_3x3_minimal_topdown_walls.png

Vorlage - Top-Down-Wand in 3/4 Perspektive (dicke Wände):

Wenn Sie diese Vorlage verwenden, setzen Sie die Elementgröße des TileSet auf Vector2(64, 88).

../../_images/autotile_template_3x3_minimal_topdown_walls_thick.png

Vorlage - Top-Down-Wand in 3/4 Perspektive (hohe Wände):

Wenn Sie diese Vorlage verwenden, setzen Sie den "Snap Options"-Schritt auf Vector2(64, 184) und den "Selected Tile"-Texture-Offset auf Höhe minus der Zellengröße. Das heißt, der Textur-Offset sollte Vector2(0, -120) sein:

../../_images/autotile_template_3x3_minimal_topdown_walls_tall.png

3x3

Im 3x3 Modus enthält jede Bitmaske 9 Bits (4 Ecken, 4 Ränder, 1 Mitte)

Jedes Bit prüft eine einzelne benachbarte Zelle. Eckbits prüfen nur diagonal benachbarte Zellen. Das mittlere Bit sollte für jede Kachel, die Sie verwenden möchten, "an" sein.

Insgesamt wären 256 Kacheln erforderlich, um genau eine Bitmaske für jede Anordnung bereitzustellen, auf die dieser Modus testen kann.

Autotile deaktivieren

Wenn Sie eine Autotile verwenden, können Sie dessen Verhalten deaktivieren und Kacheln manuell auswählen, indem Sie oben im Kachelauswahlfenster auf "Autotile deaktivieren" klicken.

AutoTile Bindung

Standardmäßig sucht Autotile nur nach benachbarten Zellen, die mit demselben Autotile gefüllt wurden. Dieses Verhalten kann überschrieben werden, damit Autotiles aneinander oder sogar an leere Zellen gebunden werden. Derzeit kann dies nur durch Skripterstellung erfolgen. Sie müssen Ihrem TileSet ein Skript hinzufügen und eine Funktion mit dem Namen "_is_tile_bound(drawn_id, neighbor_id)" definieren. Diese Funktion wird für jede benachbarte Zelle aufgerufen, die nicht dasselbe Autotile enthält, und sollte "wahr" zurückgeben, wenn die gezeichnete Zelle an die Nachbarzelle "binden" soll. Sie können die ID eines Autotiles mit "find_tile_by_name (name)" ermitteln. Leere Zellen erhalten die ID -1.

Beachten Sie, dass das Skript, um dies im Editor zu verwenden, mit einer "tool"-Deklaration beginnen sollte. Möglicherweise müssen Sie die Szene schließen und neu laden, damit diese Änderungen wirksam werden.

Tipps und Tricks

  • Wird eine Camera2D verwendet, um Ihren Level zu scrollen, kann es vorkommen, dass Linien zwischen den Kacheln erscheinen. Um dies zu beheben, öffnen Sie die Projekteinstellungen und aktivieren Sie "GPU Pixel Snap verwenden" im Abschnitt "Rendering > 2D > Snapping".

  • Sie können Kacheln mithilfe der Symbole oben rechts im Editor spiegeln und drehen.

  • Um gerade Linien zu zeichnen, halten Sie Shift gedrückt, während Sie auf eine Kachel klicken und sie ziehen.

  • Werkzeuge wie Kopieren, Einfügen und Bereiche füllen finden Sie im Menü "TileMap" oben rechts.

../../_images/tilemap_menu.png