Online-Ferienkurs: Programmiere ein Spiel mit der Game-Engine Godot

Ausgebucht!

Keinen Platz im Kurs bekommen? Das „InfoLab Saar – Schülerlabor Informatik“ der Universität des Saarlandes bietet auch Ferienkurse an: infolab.cs.uni-saarland.de

Mit der kostenlosen Game-Engine Godot findet man in einem Programm alles, was man braucht, um ein vollständiges Spiel zu erstellen.

So kann man sich vollständig auf die Spielentwicklung konzentrieren!

Godot bringt Tools zur Animation, Erstellung von 2D- und 3D-Szenen und sämtliche Programmiersprachen und Editoren mit. Die für Godot typische Programmiersprache ist GDScript, das Python sehr ähnlich ist.

Wir freuen uns sehr, dass der erfahrene Mentor Julius uns zeigt, wie man in Godot Spiele entwickelt. Julius hat für seine Android-App Switchy Roads sein Preise beim Game Award Saar 2019 gewonnen. Wir gratulieren und sind sehr stolz, Julius als Mentor gewinnen zu können!

Der Ferienkurs zu Godot findet an zwei Nachmittagen statt:

  • Mittwoch, den 15.07., 14 – 16 Uhr
  • Donnerstag, den 16.07., 14 – 16 Uhr

Die Termine bauen aufeinander auf. Man meldet sich für beide Termine an. Teilnehmen können Jugendliche ab 12 Jahren. Die Game-Engine Godot muss auf dem Computer oder Laptop installiert werden.

Der Kurs findet mit der Videokonferenzsoftware Zoom statt. Nach Anmeldung teilen wir die Zugangsdaten mit. Die Anzahl der Plätze ist begrenzt.

Wer mit Julius ein Spiel in Godot programmieren möchte, schickt eine Mail an hello@coderdojo-saar.de.

Installation für den Kurs

Inhalt des 1. Kurstages

  1. Das frisch installierte Godot starten.
  2. Bei Bedarf: Bestätigen, dass man noch kein Projekt hat.
  3. Wenn gewünscht: Godot auf Deutsch umstellen: „Editor -> Editoreinstellungen -> Interface -> Editor Language“
  4. Unter „Projekt -> Projekteinstellungen -> Window“ das Projekt ins Hochformat bringen.
  5. Spritesheets und Hintergründe dem Projekt hinzufügen:
    1. Zip-Datei herunterladen: https://ansimuz.itch.io/spaceship-shooter-environment
    2. Zip-Datei entpacken
    3. Die Ordner „spritesheets“ und „backgrounds“ dem Projekt hinzufügen, z.B. rechter Mausklick auf „res://“ im „Dateisystem“ unten rechts -> „im Dateimanager öffnen“ -> die beiden Ordner in den geöffneten Ordner kopieren ODER die beiden Ordner per „Drag and Drop“ in „res://“ fallen lassen
  6. Qualität der Sprites und Hintergrundbilder verbessern
    1. Bild anklicken
    2. Im Fenster über dem „Dateisystem“ den Tab „Import“ auswählen
    3. Den Haken bei „Filter“ entfernen
  7. Über dem Hauptfenster „2D“ auswählen
  8. Per „Drag and Drop“ das Hintergrundbild „desert-background.png“ in den blauen Rahmen im mittleren Fenster ziehen. Das Bild sollte etwas größer als der Rahmen sein.
  9. Kamera hinzufügen
    1. Node2D anklicken
    2. Plus-Zeichen oben links „Node hier anhängen“
    3. „Camera2D“ auswählen
    4. „Erstellen“ drücken
  10. Kamera verwenden
    1. Camera2D auswählen
    2. Rechts einen Haken bei „Current“ setzen
  11. Hintergrundbild unter die Kamera setzen
    1. „desert-background“ anklicken
    2. rechts „Transform -> Position“ x und y auf 0 setzen
    3. Das Hintergrundbild sollte jetzt den blauen Rahmen der Kamera füllen
  12. Hintergrundbild testen
    1. Play drücken
    2. Projekt speichern
    3. Szene benennen, z.B. „Spiel.tscn“
    4. Diese Szene ist die Startszene
    5. Hintergrundbild sollte den im Player sichtbaren Bereich komplett füllen
    6. Player wieder schließen
  13. Spieler hinzufügen
    1. Plus-Zeichen neben „Spiel“ drücken
    2. links „anderes Node“
    3. Typ „KinematicBody2D“ auwählen (blaues Männchen)
    4. „Erstellen“
  14. Sprite animieren
    1. Links „KinematicBody2D“ auswählen
    2. Plus-Zeichen drücken
    3. Typ „AnimatedSprite“ auswählen
    4. „AnimatedSprite“ links auswählen
    5. Rechts im Dropdown-Menü neben „Frames: [leer]“ „Neues SpriteFrames“ auswählen
    6. Auf „SpriteFrames“ klicken, so dass es blau ist (da wo vorher „[leer]“ stand)
    7. Unter dem Szenefenster auf das Wabensymbol „Frame aus Sprite-Sheet“ hinzufügen klicken
    8. Die Datei „ship.png“ wählen
    9. „Öffnen“
    10. Horizontal:5 und Vertikal: 2 einstellen, so dass jedes kleine Raumschiff angeklickt werden kann. Es bekommt dann einen blauen Rahmen.
    11. In der ersten und zweiten Zeile jeweils das mittlere Raumschiff anklicken
    12. „2 Frames hinzufügen“
    13. Rechts im Fenster „Animated Sprite“ den Haken bei „Playing – An“ setzen
    14. Die beiden hinzugefügten Frames sollten sich abwechseln: Es sieht aus, als ob das Raumschiff sein Treibwerk eingeschaltet hat.
  15. Projekt speichern, die Szene mit dem Raumschiff benennen, z.B. „Spieler.tscn“
  16. Das Raumschiff auf den Hintergrund setzen
    1. Tab „Spiel“ auswählen (Szene mit Kreis vor dem Namen)
    2. Im Fenster „Dateisystem“ die soeben gespeicherte Datei „Spieler.tscn“ per „Drag an Drop“ auf den Hintergrund ziehen
    3. Den „KinematicBody2D“ anklicken und bei Bedarf im Fenster rechts „Node2D -> Transform -> Scale“ die x- und y-Wert anpassen, z.B. mit 3.
  17. Programmierung für das Raumschiff hinzufügen
    1. Im Fenster „Szene“ den „KinemataicBody2D“ für das Raumschiff auswählen
    2. Rechter Mausklick -> Skript hinzufügen ODER Schriftrolle mit grünem Plus aus der Kopfzeile des Fensters
    3. Nodescript erstellen
    4. Programmierung für eine Rechts-/Links-Steuerung mit den Pfeiltasten:

Das Ergebnis des ersten Kurstages

Das Raumschiff ist ein animiertes Sprite, fliegt vor einem Hintergrund und kann über die Pfeiltasten gesteuert werden. Es verlässt den sichtbaren Bereich nicht.

Morgen wird geschossen und es kommen Feinde dazu. Vielleicht bekommen wir den Hintergrund noch zum Sliden.

Inhalt des 2. Kurstages

  1. Neue Szene
  2. KinematicBody2D hinzufügen
  3. AnimatedSprite
  4. Schuss-Sprite wählen
  5. Animieren 2 x 2, die unteren beiden, Playing
  6. CollissionShape2D „Rectangle“ wählen
  7. Rechteck passend zum Schuss ziehen
  8. Speichern, Szene benennen „Schuss.tscn“
  9. Programmierung für Bewegung an den Schuss hängen
    func _physics_process(delta):
    move_and_collide(Vector2(0,-10))
  10. Programmierung für Schießen an den Spieler hängen
    if(Input.is_action_just_pressed("ui_accept")):
    var schussSzene = load("res://Schuss.tscn")
    var schuss = schussSzene.instance()
    get_parent().add_child(schuss)
    schuss.position = position
    schuss.position.y -= 50
  11. Falls der Schuss nicht in der Mitte des Raumschiffs startet, überprüfen ob Raumschiff und Schuss jeweils in der Mitte sitzen.
  12. Troubleshooting:
    1. Alle Elemente müssen Geschwister sein. Keine weiteren Hierarchieebenen einführen.
    2. Aufpassen, dass die richtigen Funktionen aufgerufen werden
  13. Gegner erstellen
    1. Neue Szene
    2. KinematicBody2D
    3. AnimatedSprite
    4. Spritesheet auswählen enemy-big.png
    5. Frames wählen 1 x 2
    6. 2 Frames wählen
    7. Playing an
    8. CollisonShape2D hinzufügen
    9. Box anpassen
  14. Szene speichern: Gegner.tscn
  15. Gegner vergrößern: Tranform -> Scale x und y jeweils 3
  16. Beim Schuss programmieren, ob der Schuss etwas berührt
    func _physics_process(delta):
    var beruehrt = move_and_collide(Vector2(0,-10))
    if (beruehrt != null):
    beruehrt.collider.queue_free()
  17. Troubleshooting: Die Collisionshape darf nicht unterhalb der AnmiatedSprite eingeordnet sein.
  18. Gegner programmieren
    1. Bewegen nach unten
  19. Der Hauptszene eine Node2D hinzufügen – nur für Code.

Das kann man auch noch machen

  • Explosionsanimation, wenn ein Gegner abgeschossen wird. (programmiert beim Schuss)
  • Code für die Explosionsszene:
  • Schüsse löschen, wenn die das Spielfeld verlassen (programmiert beim Schuss)
  • Schuss löschen, wenn ein Gegner getroffen worden ist

Godot-Projekte zum Download

Zip-Datei herunterladen und entpacken. In Godot den Knopf „Import“ anklicken. Im entpackten Verzeichnis die Datei „project.godot“ suchen.