Tilemaps


"Tile Maps - was zur Hölle ist denn das?"...das werden sich wohl einige von euch denken.

Die Erklärung ist denkbar einfach: Tile Maps sind Maps, die aus aneinandergereihten Grafiken mit allesamt der gleichen Größe aufgebaut sind. Man kann/braucht sie zum Großteil in RPG's (Roleplay Games). Das ganze kann man ganz einfach mit folgender Grafik veranschaulichen:

Eine Tilemap ist sozusagen ein Raster bzw eine Tabelle. Jedes Feld in diesem Raster kann man beispielsweise mit einer Grafik "belegen". Dabei entsteht eine Tilemap, wie man sie eben von RPG's kennt. Für Lua bedeutet das: man kann damit beispielsweise eine Karte für ein 2D-Spiel erstellen. Wollen wir uns nun doch jetzt einmal an den Code wagen...

In diesem kleinen Projekt sieht die Sache so aus, wir haben 2 Grafiken, beide mit der Auflösung 32x32.

Wir wollen den ganzen Bildschirm mit der Gras-Grafik füllen und an ein bestimmten Positionen das Gras mit der Pflanze auch noch unterbringen.

	a=Image.load("tilebild1.png")
	b=Image.load("tilebild2.png")
	
	map={
		{a,a,a,a,a,b,a,a,a,b,a,a,a,b,a}, --Zeile 1
		{b,a,a,a,a,a,a,a,a,a,a,a,a,b,a}, --Zeile 2
		{a,a,b,a,a,b,a,a,a,a,a,b,a,b,a}, --Zeile 3
		{a,a,a,a,a,a,a,a,a,a,a,a,a,b,a}, --Zeile 4
		{a,a,b,a,a,b,a,a,a,a,a,b,a,b,a}, --Zeile 5
		{a,a,a,b,a,a,a,a,a,b,a,a,a,b,a}, --Zeile 6
		{a,b,a,a,a,b,a,b,a,a,a,b,a,b,a}, --Zeile 7
		{a,a,a,b,a,a,a,b,a,a,b,a,a,b,a} --Zeile 8
	}
	
	while true do
		for c=1,8 do
			for d=1,15 do
				screen:blit(d*32,c*32,map[c][d],false)
			end
		end
		
		screen.flip()
		screen.waitVblankStart()
	end

Ich vermute, jetzt wird große Verwirrung herrschen...aber was hier extrem kompliziert erscheint, ist wahrhaftig recht einfach. Hierbei begründet sich auch die Notwendigkeit der for-Schleife: Vor dem Mainloop werden ersteinmal die beiden Bilder geladen. Anschließend erstellen wir eine Tabelle (in Fachkreisen Array genannt^^). Dabei handelt es sich allerdings um ein "mehrdimensionales" Array bzw Tabelle. Soll heißen, die Tabelle "map" besteht aus 8 Feldern:

	map = { , , , , , , , }
	

In jedes dieser 8 Felder wird aber nun noch eine weitere Tabelle mit 15 Feldern eingebettet. Wir haben sozusagen eine Tabelle mit Untertabellen. Was ist der Sinn der Sache? Nun, die Tabelle "map" ist sozusagen unser Raster. Die Tabelle "map" definiert unsere Tilemap. Die 8 Felder der Tabelle "map" stehen für die Anzahl der Zeilen der Tilemap. Der Inhalt jedes Feldes, die "Untertabelle", steht für den Inhalt jeder Zeile. Bei genauem Betrachten sollte einem zudem auffallen, dass der Inhalt der "Untertabellen" nur a und b ist, genau so, wie unsere Tilebilder heißen.

Der Mainloop sollte einem bekannt sein, aber was zur Hölle soll diese kompliziert ausschauende for-Schleife? Nun, genau diese for-Schleife erstellt unsere Tilemap, mithilfe der Tabelle "map". Hier arbeiten wir außerdem mit 2 for-Schleifen, die 2. ist nämlich in die 1. eingebettet. Um das zu verstehen, müssen wir die Schleife mal zerstückeln:

	for c=1,8 do
	end
	

Diese for-schleife durchläuft jede einzelne der 8 Zeilen(8 Hauptfelder in der Tabelle "map"!). Da wir aber mit einer 2-dimensionalen Tabelle arbeiten, brauchen wir noch eine for-Schleife, die zusätzlich zur passenden Zeile noch den Inhalt der jeweiligen Zeile durchläuft und dazu die Bilder ausgibt:

	for c=1,8 do --durchläuft alle 8 Zeilen der Tabelle "map"
		for d=1,15 do --durchläuft den Inhalt der jeweiligen Zeile
			screen:blit(d*32,c*32,map[c][d],false) --gibt die Bilder aus
		end
	end
	

Womöglich gibt es jetzt noch Unklarheit über folgenden Befehl in der inneren for-Schleife:

	screen:blit(d*32,c*32,map[c][d],false)
	

...screen:blit sollte ja schon lange bekannt sein, nur der Inhalt, die sogenannten "Argumente" bzw "Parameter" sehen ein wenig verwirrend aus. Das ganze lässt sich leicht durch folgende Annahme klären: c=3 (also die Zeile ist 3), d = 7(der dazugehörige Zeileninhalt ist 7). Dann würde der Befehl zu diesem Zeitpunkt folgendermaßen aussehen (bitte mit dem Inhalt der Tabelle "map" vergleichen, hilft zum Verständnis):

	screen:blit(7*32,3*32,map[3][7],false)
	

ist dasselbe wie:

	screen:blit(224,96,a,false)
	

Bei Verständnisproblemen bitte ins Forum posten! Danke.