Hierbei handelt es sich um eine einfache Art, mit Hilfe von gleichgroßen Bausteinen, einen 2D-Level zusammen zu stellen. Durch die feste Größe der Bausteine, können wir mit Hilfe eines gleichgroßen Rasters, leichter einen Level entwickeln.

Zunächst benötigen wir eine Bilddatei in der alle benötigten Bausteine als Grafik enthalten sind. Die Bausteine sollten bereits in der entsprechenden Größe in Pixel vorliegen.

Diese Bilddatei kopieren wir in unser Arbeitsverzeichnis.

Im Dateisystem selektieren wir jetzt diese Datei und wechseln im Panel „Szene“ auf den Reiter „Import“
unter Flags ⇒ Filter = aus
und Mipmaps = aus
Button(Neuimport) drücken

Jetzt erstellen wir ein sogenanntes TileSet
Neue Szene als Root-Node ein Node2D

Node2D selektieren und weiteres Node anfügen mit dem Button(+)
Im Dialogfenster unter:
Node ⇒ Node2D ⇒ Sprite einfügen

Die Bilddatei aus dem Panel(Dateisystem) per drag & drop in das Panel(Inspektor) ⇒ Sprite ⇒ Texture ziehen.

Oder alternativ im Panel(Inspektor) ⇒ Sprite ⇒ Texture rechts neben <null> den Button(˅) drücken ⇒ PulDownMenü(Lade) und dann die entsprechende Bilddatei auswählen.

Wir wollen jetzt aber nicht im angezeigten Sprite die gesamte Grafik, sondern lediglich einen Baustein einfügen.

Also gehen wir in den Panel(Inspektor) ⇒ Region ⇒ Enabled = An
Panel(Inspektor) ⇒ Region ⇒ Rect ⇒ Button(˅)
wodurch ein Dialogfenster angezeigt wird in dem wir die Werte X, Y, W(Breite) und H(Höhe) eingeben können. Bei X,Y handelt es sich um den Versatzwert und bei der Breite und Höhe geben wir die Größe des Bausteines an. Diese Werte lassen wir zunächst unberührt, stattdessen richten wir das Sprite unzentriert aus. Panel(Inspektor) ⇒ Offset ⇒ Centered = Aus

Diese Tipperei erleichtern wir uns bei dem nächsten Baustein etwas. Aber zunächst ein weiteres Sprite unter Node2D erstellen und wie gehabt die Grafikdatei als Textur einfügen.

Im Panel(Debugger) im Menü(Texturbereich) klicken. In der neuen Menüzeile Einrastmodus bei Menü(<Nichts>) anklicken und das Häkchen beim Menüpunkt (Gitter-Einrasten) machen.

Unter Schritt Breite und Höhe des Bausteines angeben(in Pixel).

Panel(Inspektor) ⇒ Region ⇒ Enabled = An
Im Panel( Texturbereich) Mauszeiger auf die linke obere Ecke, linke Maustaste gedrückt halten und die Maus zur rechten unteren Ecke ziehen und dort loslassen. Fertig.

Dies wiederholen wir für alle Bausteine.

Wollen wir, dass die Spielfigur mit den Bausteinen kollidieren kann, fügen wir jedem Sprite noch den Node StaticBody2D hinzu.

Diesem Node StaticBody2D hängen wir noch ein Node CollisionPolygon2D an.

Nach dem Hinzufügen dieses Nodes hat das Menü des Panels(Editor) drei weitere Symbole. Neues Polygon zeichnen, Polygon editieren, Polygonpunkte löschen. Mit diesen Buttons erstellen wir die Kontur zur Kollisionserkennung.

Haben wir auch dies für alle Sprites erledigt, speichern wir unsere Arbeit zunächst als Szene und danach als TileSet.

Hierfür müssen wir lediglich im Menü(Szene)⇒ Umwandeln zu.. ⇒ TileSet anklicken. Im darauf folgenden Dialogfenster müssen wir einen Dateinamen und einen Dateitypen(.tres) angeben.

Button(Speichern)

Neue Szene (den eigentliche Level) erstellen
als RootNode = Node2D
unter dem Node2D ein Node TileMap einfügen.

Im Panel(Inspektor) ⇒ TileMap ⇒ TileSet ⇒ Button(˅) und unser eben erstelltes TileSet laden

Im 2D Editor werden auf der Linken Seite unsere Bausteine angezeigt, mit einem Linksklick auf einen Baustein wählen wir diesen aus und können ihn mit einen weiteren Linksklick beliebig oft im eigentlichen Editor platzieren.

Einen falsch gesetzten Baustein können wir einfach mit einem Rechtsklick entfernen.

onready var map = get_node(„map“)
 
func _input(event):
	if event.ist_action_pressed(„left_mouse_klick“):
		var mouse_pos = get_global_mouse_pos()
		var tile = map.world_to_map(mouse_pos)
		print(tile)			# x,y pos von feld
		map.set_cell(tile.x, tile,y, 1)	# feld(x,y) auf Tileset 1
						# -1 = Feld leer