Achtung: Eine überarbeitete Version des Pygame Tutorials findet ihr im Wiki: https://www.spieleprogrammierer.de/wiki/Pygame-Tutorial
Pygame Tutorial
Teil 2 - Bilder am Beispiel einer Tilemap
Version v0.0.3a
1. Inhalt
1. Inhalt
2. Einleitung
2.1 Teil 2?
2.2 Über diesen Teil
3. Versions-History
3.1 v0.0.1
3.2 v0.0.2
3.3 v0.0.3
4. Beschreibung der Tilemap
4.1 Was ist das?
4.2 Wie gehen wir vor?
5. Bilder in Pygame
5.1 Los gehts
5.2 Surfaces
5.3 Format-Konvertierung
5.4 Kreise?
5.5 Bild anzeigen
5.6 Mehr zu Surfaces
6. Programmieren einer Tilemap
6.1 Die Klasse: TileType
6.2 Die Klasse: Tileset
6.3 Die Klasse: Tilemap
6.4 Fertig
7. Aublick auf Teil 3
8. Bilder und Daten
2. Einleitung
2.1 Teil 2?
Den ersten Teil findet ihr hier:
https://www.spieleprogrammierer.de/phpBB…opic.php?t=8583 .
2.2 Über diesen Teil
Hier im zweiten Teil werden wir, am praktischen Beispiel einer Tilemap für ein 2D-Spiel, die Pygame Funktionen für das Laden und Anzeigen von Bildern kennenlernen.
Ich habe diesen Teil gekürzt, Bild-Modifizierung und das Font-Modul werden erst im nächsten Teil behandelt.
3. Versions-History
3.1 v0.0.1
Erste Version, Großteil des Textes geschrieben.
3.2 v0.0.2
Viele Änderungen vorgenommen, praktisches Beispiel geändert.
3.3 v0.0.3
Es gab einen Anzeige-Bug bei der Tilemap, das habe ich behoben und die Beschreibung des Codes angepasst. Außerdem habe ich noch ein paar Daten hinzugefügt. *Danke Shade*
4. Beschreibung der Tilemap
4.1 Was ist das?
Bevor wir uns an das Implementieren der Tilemap machen, klären wir noch ganz kurz was genau das ist und wie wir sie hier in dem Tutorial bauen werden.
Tilemaps werden häufig in 2D-Spielen verwendet, sie sind eine einfache und schnelle Lösung, eine Landschaft oder ähnliches in einem Spiel darzustellen. Die Landschaft ist dabei aus zumeist gleich großen, quadratischen Kacheln (= Tiles) zusammengesetzt, daher der Name. Mehrere, verschiedene Tile-Grafiken fasst man zu sogenannten Tilesets zusammen, damit kann man zum Beispiel während dem Spiel einfach und schnell den Grafikstiländern (etwa eine normale Gras-Grafik in eine Gras-mit-Schnee-Grafik) ändern. Um Platz zu sparen und um die Übersicht zu erhöhen werden Tiles aus einem Set oftmals in einer Bilddatei gespeichert. Eine Tilemap speichert jetzt einfach eine Liste von Informationen, an welcher Position welches Tile liegt (zum Beispiel über den Namen eines Tiles in einem 2D-Array).
4.2 Wie gehen wir vor?
Unsere Tilemap wird folgendermaßen arbeiten: Wir verwenden eine Klasse names TileType, welche exakt einen Tile-Typ repräsentiert. Sie speichert die Position dieses Typs auf der Grafik und seinen Namen. Hier ist außerdem der passende Ort, um weitere Informationen, wie etwa
Begehbarkeit, Ereignisse usw. zu speichern. Die Klasse Tileset speichert in einem Dictionary (Python-Pendant zu std::map in C++) alle Tile-Typen, sowie die einheitliche Größe der Tiles. Und dazu noch eine Grafik, auf der sämtliche Tiles vorhanden sind. Außerdem ermöglichen wir es, dass man diese Grafik einfach gegen eine Andere tauschen kann. Ein Tile-Typ muss per Hand hinzugefügt werden, eine gute Gelegenheit um den Umgang mit den Datei-Funktionen von Python zu lernen ;)
Zu guter Letzt habe wir noch eine Klasse namens Tilemap, die sich hauptsächlich um das Anzeigen der Tiles kümmert. Hier wird ein Tileset gespeichert, und natürlich eine Liste von Tiles. Die Liste verwenden wir als 2D-Array in denen die ID eines Tile-Types gespeichert ist.
5. Bilder in Pygame
5.1 Los gehts
Bevor wir uns an das Programmieren machen, schauen wir, wie Pygame uns mit den Bildern helfen kann. Mittels Pygame können wir sehr schnell und sehr einfach ein Bild laden:
|
Quellcode
|
1
|
_image = pygame.image.load("tolles_bild.bmp")
|
Unterstützt werden dabei folgende Formate: (Auszug aus der Dokumentation,
http://www.pygame.org/docs/ref/image.html )
* JPG
* PNG
* GIF (non animated)
* BMP
* PCX
* TGA (uncompressed)
* TIF
* LBM (and PBM)
* PBM (and PGM, PPM)
* XPM
Da sollte jeder "sein" Format finden.
Mit dem fertig geladenen Bild könnten wir jetzt bereits arbeiten, aber für den Einsatz in einem Spiel / Programm sollte das Bild noch optimiert werden. Vorher schauen wir aber noch, wie das geladene Bild in Pygame repräsentiert wird.
5.2 Surfaces
Pygame speichert alles, was irgendwie Angezeigt werden könnte, in sogenannten Surfaces. Auch Bilder und der Bildschirm werden als Surface repräsentiert. Für jetzt ist erstmal wichtig, dass ganze bzw Teile einer Surface auf andere Surfaces bzw den Bildschirm kopiert werden können.
Details dazu kommen später.
5.3 Format-Konvertierung
Beim Erstellen der Bildschirm-Surface können wir, falls gewünscht, die Farbtiefe des Fensters angeben, bzw wird dies von Pygame automatisch erledigt. Wenn wir jetzt ein Bild anzeigen lassen wollen welche nicht in diesem Format gespeichert ist, muss Pygame das Bild bei jedem Anzeige-Vorgang konvertieren - und das dauert unter Umständen recht lange, je mehr Bilder desto mehr leidet die Performance. Deshalb werden wir direkt nach dem Laden das Bild in das passende Format konvertieren.
Dazu bietet Pygame gleich zwei Funktionen, eine für Bilder mit einem Alpha-Kanal und eine für Bilder ohne und da es auch eine Funktion gibt die prüft ob das Bild einen Alpha-Kanal hat, können wir das ohne Probleme automatisieren:
|
|
Quellcode
|
1
2
3
4
|
if _image.get_alpha() == None:
_image = _image.convert()
else:
_image = _image.convert_alpha()
|
5.4 Kreise?
Wer die bisherige Ladefunktion schon getestet hat, wird festgestellt haben, dass wir immer nur Rechtecke anzeigen können. Das ist für ein echtes Spiel natürlich zuwenig da die wenigsten Figuren rechteckig aussehen ;) Um dieses Problem zu lösen bietet Pygame natürlich die bekannte Colorkey-Methode, in der eine bestimmte Farbe beim Anzeigen eines Bildes einfach ausgelassen wird. Das festlegen des Colorkeys unter Pygame ist auch sehr einfach realisierbar:
|
|
Quellcode
|
1
|
_image.set_colorkey((rot, grün, blau), RLEACCEL)
|
Sehr oft wird als Colorkey die Farbe (255, 0, 255) verwendet, da man sie selten in einem Bild benötigt.
5.5 Bild anzeigen
Ein Bild können wir, wie bereits erwähnt, entweder direkt auf die Bildschirm rendern oder auf ein andere Surface, diese Methode nennt sich Bit Block Transfer. Jede Surface besitzt eine Funktion namens blit mit der eine andere Surface auf sie kopiert werden kann.
In der Standard-Variante wird eine komplette Surface an eine bestimmte Position geblittet:
|
|
Quellcode
|
1
|
screen.blit(_image, (0, 10))
|
Damit wird die Surface _image an der Position x=0 und y=10 auf die Surface screen geblittet (screen ist meistens die Surface, die zum Anzeigen auf dem Bildschirm verwendet wird).
5.6 Mehr zu Surfaces
Jetzt können wir Bilder laden und optimieren und anzeigen, wem das reicht der kann gleich zum nächsten abschnitt weitergehen. Alle anderen bekommen jetzt noch ein paar Details zu Surfaces (
http://www.pygame.org/docs/ref/surface.html ). In den meisten Fällen erstellt man eine Surface durch laden eines Bildes, falls nötig, kann man aber auch eine "per Hand" erstellen (etwa um einen Buffer zu haben). Dafür stehen zwei Funktionen zur Verfügung:
|
|
Quellcode
|
1
2
|
pygame.Surface((width, height), flags=0, depth=0, masks=None): return Surface
pygame.Surface((width, height), flags=0, Surface): return Surface
|
Als Flags können wir "anfragen" (das heißt, unter Umständen ignoriert SDL diese Anfrage wenn es Probleme geben könnte), dass die Surface im Grafikkartenspeicher abgelegt werden soll (Flag HWSURFACE) und / oder dass wir "per-pixel alpha" Unterstützung wollen (Flag SRCALPHA).
Letzteres ist nicht empfohlen, da es langsam ist, in den meinsten Fällen ist es aber zum Glück nicht nötig, da man ja Colorkeys und einen Transparents-Wert für die komplette Surface angeben kann.
Die wichtigste Funktion einer Surface ist wohl die blit-Funktion (
http://www.pygame.org/docs/ref/surface.html#Surface.blit ), sie ermöglicht es, andere Surfaces, bzw Ausschnitte daraus, auf diese zu kopieren:
|
|
Quellcode
|
1
|
Surface.blit(source, dest, area=None, special_flags = 0): return Rect
|
Der Parameter source muss eine weitere Surface sein die kopiert werden soll. Über den zweiten Parameter, dest, kann der Zielbereich angegeben werden in den kopiert wird. Entweder als ein Tupel von Zahlen (posX, posY) oder als eine Rect-Variable. Um nur Ausschnitte von einer Surface zu kopieren (unerlässlich für unsere Tilemap) benötigt man den dritten Parameter, area. Er erwartet eine Rect-Variable die den kleineren Ausschnit definiert. Über den special_flags-Parameter kann man Überblendungs-Effekte beim Kopieren einbauen (BLEND_ADD, BLEND_SUB, BLEND_MULT, BLEND_MIN, BLEND_MAX).
Weitere wichtige Funktionen sind get_width und get_height zum ermitteln der Größe der Surface, sowie fill um die Surface mit einer Farbe komplett zu füllen.
Dass soll erstmal genug sein, jetzt kommen wir zum Programmieren der Tilemap.
6. Programmieren einer Tilemap
6.1 Die Klasse: TileType
Dies ist die einfachste und kleinste Klasse. Deshalb zuerst der Code:
|
|
Quellcode
|
1
2
3
4
5
6
7
8
9
10
|
class TileType(object):
def __init__(self, name, startX, startY, width, height):
self.__name = name
self.__rect = pygame.rect.Rect(startX, startY, width, height)
def getName(self):
return self.__name
def getRect(self):
return self.__rect
|
Wir speichern als erstes den Namen, bze die ID des Types in der privaten Variable __name, über die Funktion getName können wir ihn wieder auslesen.
In einem Rect speichern wir gleichzeitig die Position und die Größe dieses Types.
Wir gehen gleich zur nächsten Klasse weiter, der Tileset-Klasse in der deutlich mehr passiert.
6.2 Die Klasse: Tileset
Hier in der Tileset-Klasse müssen wir vor allem die Tile-Typen speichern. Der Konstruktor der Klasse erwartet einen Dateinamen für das Bild der Tiles, dazu einen Colorkey für das Bild und die Breite und Höhe eines Tiles (alle Tiles haben die gleiche Größe).
Zuletzt wird noch ein Dictionary für die Tile-Typen angelegt, der erstmal leer bleibt.
|
|
Quellcode
|
1
2
3
4
5
6
7
|
class Tileset(object):
def __init__(self, image, colorkey, tileWidth, tileHeight):
self.__image = loadImage(image, colorkey)
self.__tileWidth = tileWidth
self.__tileHeight = tileHeight
self.__tileTypes = dict()
|
Die verwendete loadImage Funktion zum Laden eines Bildes besteht aus dem oben besprochenen Code.
Hier nochmal im Überblick:
|
|
Quellcode
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
def loadImage(filename, colorkey = None):
image = pygame.image.load(filename)
if image.get_alpha() == None:
image = image.convert()
else:
image = image.convert_alpha()
if colorkey is not None:
if colorkey is -1:
colorkey = image.get_at((0,0))
image.set_colorkey(colorkey, RLEACCEL)
return image
|
Um das Bild anzeigen zu können, bzw Ausschnitte daraus, erstellen wir eine Funktion die das Bild zurückliefert. Außerdem ermöglichen wir es, das Bild gegen eine neues auszutauschen. Wenn während dem Spiel so ein Tausch des Tileset-Bildes öfter vorkommen soll, ist es aber ratsamer, alle Bilder zum Beispiel in einer Liste zu speichern und nicht jedesmal neu zu laden.
|
|
Quellcode
|
1
2
3
4
5
|
def getImage(self):
return self.__image
def setImage(self, image, colorkey):
self.__image = loadImage(image, colorkey)
|
Ebenfalls sehr einfach sind die drei Funktionen um die Größe der Tiles zu bekommen:
|
|
Quellcode
|
1
2
3
4
5
6
7
8
|
def getTileWidth(self):
return self.__tileWidth
def getTileHeight(self):
return self.__tileHeight
def getTileSize(self):
return (self.__tileWidth, self.__tileHeight)
|
Kommen wir zur wichtigsten Funktion: Das Hinzufügen eines Tile-Typen. Das ist im Grunde auch nicht sonderlich kompliziert, wir fügen einfach eine neue Instanz der TileType Klasse in unserem Dictionary hinzu, mit passenden Parametern:
|
|
Quellcode
|
1
2
3
4
|
def addTile(self, name, startX, startY):
self.__tileTypes[name] = TileType(name, startX, startY, self.__tileWidth,
self.__tileHeight)
|
Auch das rausholen eines Types ist leicht, einfach über den Key den passenden Wert zurückliefern:
|
|
Quellcode
|
1
2
3
4
5
|
def getTile(self, name):
try:
return self.__tileTypes[name]
except KeyError:
return None
|
Existiert dieser Schlüssel nicht: Wir fangen die mögliche Exception, die geworfen wird wenn ein Schlüssel übergeben wird der nicht existiert ab, und geben dann einfach None zurück.
Damit kommen wir zu der eigentlichen Tilemap-Klasse.
6.3 Die Klasse: Tilemap
Wir beginnen wieder mit dem Konstruktor:
|
|
Quellcode
|
1
2
3
4
5
6
7
|
class Map(object):
def __init__(self):
self.__tileset = Tileset("data\\tileset.png", (255, 0, 255), 32, 32)
self.__tileset.addTile("grass", 0, 0)
self.__tileset.addTile("earth", 32, 0)
self.__tileset.addTile("water", 64, 0)
self.__tileset.addTile("block", 0, 32)
|
Es fällt natürlich sofort auf, das das ziemlich unflexibel ist. Ein deutlich besserer Weg wäre, sämtliche Informationen aus einer Datei zu lesen. Aufgrund der Einfachheit dieses Tutorials werde ich aber davon absehen und überlasse ihnen die Verbesserung ;)
Was passiert: Wir erstellen eine neue Instanz der Tileset-Klasse, übergeben ein passendes Bild, den Colorkey und die Größe eines einzelne Tiles (32x32 pixel). Danach fügen wir per Hand vier Tile-Typen hinzu.
|
|
Quellcode
|
1
2
3
4
5
6
7
|
self.__cameraX = 0
self.__cameraY = 0
self.__width = 10
self.__height = 10
self.__tiles = list()
|
Wir legen Standard Wete für die Position der Kamera und die Größe der Karte fest. Die Größe der Karten wird in Tiles angegeben, nicht in Pixeln. Auch hier gilt wieder: Gestalten sie die Größe flexibler, etwa durch einen Parameter in dem Konstruktor oder eine Datei. Zudem erstellen wir
eine noch leere Liste in der wir später die Tiles speichern wollen.
|
|
Quellcode
|
1
2
3
4
5
6
7
8
9
10
11
12
|
for i in range(0, self.__width):
self.__tiles.append(list())
for j in range(0, self.__height):
x = random.randint(0, 4)
if x == 0:
self.__tiles[i].append("grass")
elif x == 1:
self.__tiles[i].append("water")
elif x == 2:
self.__tiles[i].append("earth")
else:
self.__tiles[i].append("block")
|
Mit diesem Code endet der Konstruktor. Wir befüllen hier die Liste der Tiles. Dazu verwendenwir zwei for-Schleifen, die die Breite bzw Höhe der Karte durchlaufen. Für jedes i (= eine Zeile) erstellen wir eine neue Liste, in der wir die Spalten mit einem Zufalls-Wert füllen (hier gibt es eine Auswahl zwischen den vier hinzugefügten Tiles). Standardmäßig sollte hier jedes Feld auf " " oder None gesetzt werden, oder man liest gleich alle Positions-Daten aus einer Datei.
Schauen wir uns die komplizierteste, aber auch wichtigste Funktion an: Die Funktion, die die Karte auf den Bildschirm (oder eine beliebige andere Surface rendert):
|
|
Quellcode
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
def render(self, screen):
for y in range(0, screen.get_height() / self.__tileset.getTileHeight() + 1):
ty = y + self.__cameraY
if ty >= self.__height or ty < 0:
continue
col = self.__tiles[ty]
for x in range(0, screen.get_width() / self.__tileset.getTileWidth() +1):
tx = x + self.__cameraX
if tx >= self.__width or tx < 0:
continue
tilename = col[tx]
tile = self.__tileset.getTile(tilename)
if tile is not None:
screen.blit(self.__tileset.getImage(), (x * self.__tileset.getTileWidth(), y * self.__tileset.getTileHeight()), tile.getRect())
|
Wir werden die Funktion Zeile für zeile durchgehen.
1) Wir wollen nur soviele Tiles rendern, wie auf den Bildschirm passen. Um das herauszufinden, dividieren wir einfach die Höhe des Bildschirms durch die Höhe der Tiles. Um schwarze Rahmen zu vermeiden, addieren wir noch 1 hinzu.
2) Die Y-Position auf dem Bildschirm ist nicht gleich der Position in unserer Tile-Liste, diese Position speichern wir in der Variable ty. Um den korrekten Wert zu erhalten, müssen wir nur die Kamera-Position hinzuaddieren.
3) Wir testen, ob wir uns überhaupt noch innerhalb der Map-Grenze befinden. Wenn nicht überspringen wir dieses Teil.
5) Die Tiles werden spaltenweise gerendert, hier speichern wir die aktuelle Spalte.
6) In der zweiten for-Schleife durchlaufen wie die Breite des Bildschrims.
7) Auch die X-Position wird berechnet, genau wie die Y-Position.
8) Natürlich muss auch hier getestet werden, ob wir die Grenzen der Map einhalten.
9) Als nächstes holen wir uns den Namen des Tiles welches wir rendern wollen aus der aktuellen Spalte.
10) Über das Tileset erhalten wir das Tile, oder None wenn keines existiert.
11) Und wenn wir ein Tile haben, wird das auf den Bildschrim gerendert.
12) In der Tilemap ist das Bild mit allen Tiles gespeichert, das ist unsere Quelle für die blit-Funktion. Die Positionen multiplizieren wir noch mit der Größe der Tiles um keine Überschneidung mit dem vorigen Tile zu bekommen. Zuletzt der wichtigste Parameter: Der Ausschnitt, der von dem Bild verwendet werden soll, ist in der Tile-Klasse gespeichert.
Damit snd wir fast fertig.
Die Veränderung der Kamera-Position ist im Gegensatz zur letzten Funktion absolut kein Ding mehr:
|
|
Quellcode
|
1
2
3
4
5
6
7
8
9
10
|
def handleInput(self, key):
if key == pygame.K_LEFT:
self.__cameraX += 1
if key == pygame.K_RIGHT:
self.__cameraX -= 1
if key == pygame.K_UP:
self.__cameraY += 1
if key == pygame.K_DOWN:
self.__cameraY -= 1
|
6.4 Fertig
Für das Tutorial sind wir jetzt mit der Tilemap fertig. Für ein kleines 2D-Spiel kann man sie gut als Grundlage verwenden und noch etwas verbessern. Etwa durch mehrere Layer, weitere Informationen der einzelne Tiles (eine eigene Tile-Klasse zum Beispiel) und natürlich Auslesen der Map-Daten aus einer Datei.
Wer dazu Fragen hat knn sich gerne an mich wenden.
Zum Schluss bauen wir die Tilemap noch in das Skript aus dem letzten Tutorial ein (falls sie noch Probleme haben und nicht wissen, wie sie da Vorgehen sollen). Die alten Kommentare habe ich entfernt, die Map-klassen liegen in einer Python-Datei namens Map.py.
|
|
Quellcode
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
# -*- coding: UTF-8 -*-
Import modules
import pygame
from pygame.locals import *
import Map
def main():
pygame.init()
screen = pygame.display.set_mode((800, 600))
pygame.display.set_caption("Pygame Tutorial, Teil 2: Bilder am Beispiel einer Tilemap")
pygame.mouse.set_visible(1)
pygame.key.set_repeat(1, 30)
clock = pygame.time.Clock()
# Map erstellen
map = Map.Map()
running = 1
while running:
clock.tick(30)
screen.fill((0, 0, 0))
for event in pygame.event.get():
if event.type == QUIT:
running = 0
if event.type == KEYDOWN:
if event.key == K_ESCAPE:
pygame.event.post(pygame.event.Event(QUIT))
# Tastendrücke an die Map weiterreichen
map.handleInput(key)
# Alles rendern lassen
map.render(screen)
pygame.display.flip()
if __name__ == '__main__':
main()
|
7. Aublick auf Teil 3
Teil 3 wird das Thema Animation bearbeiten. Eine animierte Spielfigur, die über die hier entwickelte Tilemap läuft ist der nächste logische Schritt und den wollen wir gehen. Außerdem wird dabei die Tastatur- / Maus-Abfrage wieder wichtiger werden die in diesem Teil nicht mehr behandelt werden konnte. Dazu wird es um Bild-Modifizierng über SDL_gfx, etwa Spiegelung, und Verwendung des Font-Modules zum Anzeigen von TTF-Fonts gehen.
8. Bilder und Daten
Eine Tilemap mit 10x10 Tiles, im Durchschnitt 450FPS.
Eine Tilemap mit 10000x10000 Tiles, im Durchschnitt 300FPS, Ladezeit bis die Zufall-Tiles erstellt waren ~2 Minuten:
Die verwendete Tileset-Grafik:
19.04.2024, 02:06
Zum Seitenanfang
