Heute wirst du lernen, wie man in PyGame mithilfe eines nützlichen Moduls einfache Formen auf den Bildschirm zeichnen kann. Dabei sind uns bei der Wahl der Größe, der Position und der Farbe kaum Grenzen gesetzt.
Sie sehen gerade einen Platzhalterinhalt von Youtube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenInhaltsverzeichnis
1. Wie rendert man Formen auf den Bildschirm?
Die Grundstruktur unseres PyGame-Programms haben wir bereits aufgesetzt. Das bedeutet, es gibt ein Fenster, in das wir einen grauen Hintergrund zeichnen. Eine einfache Event-Loop haben wir auch schon implementiert.
Um nun etwas auf den Bildschirm rendern zu können, müssen wir uns das PyGame Draw-Modul ansehen.
2. Das PyGame Draw-Modul
Im Draw-Modul gibt es unterschiedliche Funktionen, mit Hilfe derer wir einfache geometrische Formen und Linien auf den Bildschirm zeichnen können. Einige davon wirst du direkt in den kommenden Absätzen kennenlernen.
Wir werden dabei mit der draw.rect-Funktion beginnen, die es uns ermöglicht, Rechtecke zu zeichnen. Anschließend gehen wir zur draw.circle-Funktion über, mit welcher wir Kreise zeichnen können und lernen abschließend noch die draw.line-Funktion kennen.
Alle weiteren Funktionen werden wir in diesem Beitrag mal beiseitelassen, da sie sonst den Rahmen sprengen würden. Gerne kannst du sie aber selbst ausprobieren. Die drei Funktionen, die wir uns heute ansehen werden, sind ohnehin die wichtigsten, die wir auch im weiteren Verlauf dieses Tutorials verwenden werden.
3. Die pygame.draw.rect()-Funktion
Mithilfe der draw.rect()-Funktion können wir in PyGame Rechtecke zeichnen. Um direkt ein Rechteck in unser Fenster zu zeichnen, rufen wir diese also einmal auf.
Aktuell sehen wir beim Ausführen des Programms noch ein leeres Fenster vor uns - das werden wir jetzt mal ändern.
In unserer Schleife, die kontinuierlich ausgeführt wird und bei der in jedem Durchlauf ein Frame abläuft, können wir nach der "Window-Fill"-Funktion die Funktion "pygame.draw.rect" aufrufen.
window.fill((25, 25, 25))
pygame.draw.rect()
Die pygame.draw.rect-Funktion nimmt als ersten Parameter eine Surface, also eine Oberfläche an, auf die wir zeichnen können. Bei dieser Oberfläche handelt es sich um unser „Window“.
pygame.draw.rect(window, )
Danach müssen wir eine Farbe angeben, in der wir unser Rechteck zeichnen möchten. Dabei können wir beispielsweise ein Tupel mitgeben, welches einen Rot-, Grün- und Blau-Wert enthält. Die Werte können zwischen 0 und 255 liegen.
Beispiel:
pygame.draw.rect(window, (10, 20, 30))
Alternativ übergeben wir einen String mit einer Farbe, wie zum Beispiel „red“. In diesem Fall wird das Rechteck rot gezeichnet:
pygame.draw.rect(window, "red")
Um das Ganze einfach zu halten, wählen wir letztere Variante. Nach der Farbe müssen wir nur noch ein Rechteck übergeben, das gezeichnet werden soll. Das machen wir in der Regel in Form eines Tupels, das vier Werte besitzt.
Zunächst hat dieses eine x-Position, eine y-Position sowie eine Breite und eine Höhe.
Um am Ende nicht zu viele Zahlen in der Funktion stehen zu haben, speichern wir diese in Variablen.
Wir erstellen also zuerst die x-Variable und setzen deren Wert auf 32, da wir mit x bei Position 32 starten möchten. Den y-Wert setzen wir ebenfalls auf 32. Die Breite des Rechtecks, also die „width“ setzen wir beispielhaft auf 100 und die Höhe, also die „height“ auf den Wert 200:
x = 32
y = 32
width = 100
height = 200
pygame.draw.rect(window, "red", (x, y, width, height))
Damit zeichnen wir auf unsere Windowsurface ein rotes Rechteck, das sich auf der Position 32,32 befindet, eine Breite von 100 Pixeln und eine Höhe von 200 Pixeln hat.
Wenn wir das Programm jetzt starten, sehen wir das rote Rechteck in unserem Fenster:
Die x-Position ist 32, was bedeutet, dass wir uns auf der x-Achse um 32 Pixel nach rechts bewegen. Da die y-Position bei 32 liegt, steuern wir 32 Pixel nach unten. Damit ist die Position des Rechtecks festgelegt.
Für die Breite haben wir 100 Pixel angegeben und für die Höhe 200 Pixel, wodurch das Rechteck nach unten hin doppelt so lang erscheint. Somit haben wir ein einfaches Rechteck mit der draw.rect-Funktion gezeichnet!
Um mit der draw.circle-Funktion weitermachen zu können, löschen wir den gerade geschriebenen Code wieder.
4. Die pygame.draw.circle()-Funktion
Mit der draw.circle()-Funktion können wir Kreise auf unseren Bildschirm rendern. Man ruft die draw.circle-Funktion auf, indem man die folgende Zeile schreibt und die entsprechenden Parameter in den Klammern angibt:
pygame.draw.circle()
Der erste Parameter ist wieder unsere Windowsurface, auf die der Kreis gezeichnet werden soll.
pygame.draw.circle(window, )
Der zweite Parameter ist die Farbe. Hier haben wir wieder die Möglichkeit ein Tupel mit Rot-, Grün- und Blau-Wert oder stattdessen einen String mit der gewünschten Farbe anzugeben. Wenn wir für letzteres „red“ wählen, zeichnen wir einen roten Kreis.
pygame.draw.circle(window, "red", )
Der nächste Parameter ist das „Center“, also der Mittelpunkt unseres Kreises. Dafür geben wir auch wieder ein Tupel mit einer x- und einer y-Koordinate an. Wenn wir also beispielsweise (32,32) angeben würden, dann würden wir den Kreis auf der x- und der y-Achse jeweils auf dem Punkt 32 zeichnen.
Wir möchten nun aber den Kreis genau in der Mitte unseres Bildschirms zeichnen. Dafür wählen wir für den x-Wert eine Variable mit dem Namen window-width (Bildschirmbreite) und für den y-Wert eine Variable namens window-height (Bildschirmhöhe). Diese teilen wir jeweils durch zwei.
pygame.draw.circle(window, "red", (window_width / 2, window_height / 2), )
Damit haben wir den Mittelpunkt unseres Kreises auf den Mittelpunkt unseres Bildschirms, also unseres Fensters gesetzt.
An dieser Stelle müssen wir noch einen Radius übergeben. Beispielhaft legen wir für diesen 100 Pixel fest.
pygame.draw.circle(window, "red", (window_width / 2, window_height / 2), 100)
Man könnte anschließend noch weitere Parameter übergeben, die aber nicht zwingend erforderlich sind.
Beim Ausführen des Programms sehen wir nun einen roten Kreis, der genau in der Mitte des Fensters gezeichnet wird und einen Radius von 100 Pixeln besitzt:
So können wir also mit der draw.circle-Funktion Kreise zeichnen.
Eine weitere Funktion, die man sehr oft gebrauchen kann, ist die draw.line-Funktion.
5. Die pygame.draw.line()-Funktion
Mithilfe der draw.line()-Funktion kann man in PyGame eine Linie mit einer Start- und einer Endposition zeichnen. Das umzusetzen ist eigentlich ziemlich einfach, wie du gleich feststellen wirst.
Wir schreiben dazu die folgende Zeile:
pygame.draw.line()
An erster Stelle müssen wir wieder eine Surface angeben, auf die wir zeichnen möchten. Hierfür wählen wir wieder „window“ aus. Direkt im Anschluss übergeben wir die Farbe Weiß, um die Linie weiß aussehen zu lassen:
pygame.draw.line(window, "white", )
Nach der Farbe übergeben wir eine Startposition als Tupel. Wir möchten für unser Beispiel eine Linie zeichnen, die von der linken oberen Ecke zur rechten unteren Ecke durchgezogen wird.
Wir beginnen also bei der linken oberen Ecke unseres Fensters, welche die Position 0,0 hat. Die Endposition unten rechts ist auf der x-Achse unsere window-width (Fensterbreite) und auf der y-Achse die window-height (Fensterhöhe).
pygame.draw.line(window, "white", (0,0), (window_width, window_height))
Jetzt können wir optional noch eine Dicke der Linie angeben. Dafür wähle ich mal den Wert 10 Pixel.
pygame.draw.line(window, "white", (0,0), (window_width, window_height), 10)
Wenn wir das Programm nun ausführen, sehen wir eine weiße Linie, die 10 Pixel dick ist und vom oberen zum unteren Bildschirmrand durchgezogen wird.
So kann man also Linien zeichnen. Natürlich können wir der Funktion auch andere Werte übergeben, wie zum Beispiel:
pygame.draw.line(window, "white", (23,400), (100, 200), 10)
Beim Starten des Programms sehen wir die neue Linie mit den entsprechenden Koordinaten als Start- und Endpunkte:
So zeichnet man also grundlegend Formen in PyGame mit den draw.rect-, draw.circle- und draw.line-Funktionen.
Wie bereits anfangs erwähnt, gibt es auch noch weitere Funktionen im draw-Modul, die man nutzen kann, welche aber in diesem Artikel den Rahmen sprengen würden.
Im nächsten Beitrag werden wir uns ansehen, wie wir mit der Tastatur Objekte auf dem Bildschirm bewegen können, die wir darauf gezeichnet haben. Darin wird es also richtig spannend, da wir uns tatsächlich der Programmierung eines echten Videospiels nähern.