How-To 'Moorhuhn'-Klon in Godot Part 1

Überblick

Diese Anleitung soll euch die Spiele-Engine Godot Schritt für Schritt näher bringen. Dazu bauen wir nach und nach einen funktionierenden Moorhuhn-Klon. Wieso Moorhuhn? Na, weil es schon genug Anleitungen für die Mario’s und Flappy Birds dieser Welt gibt und ich mir dachte, dass ein deutsches Tutorial doch auch ein deutsches Spiel zum Vorbild nehmen könnte.

Für jeden, der sich jetzt fragt, was dieses Moorhuhn überhaupt ist, fasse ich mal kurz das Spielprinzip zusammen:

Innerhalb eines Zeitlimits fliegen jede Menge Moorhühner (in unserem Fall Schweinchen) durchs Bild und der Spieler versucht diese abzuschießen um einen möglichst hohen Punktestand zu erzielen. Gespielt wird hierbei mit der Maus. Mit der linken Maustaste wird geschossen, mit der rechten Maustaste nachgeladen.

Wir ihr seht ganz simpel. Bevor wir aber wahllos beginnen unsere digitalen Schweine zum Abschuss frei zu geben, müssen wir erst einmal ein Godot Projekt anlegen. Den aktuellen Stand, sowie die Assets findet ihr hier auf Github.

Warum Godot?

Das offensichtlichste zuerst: Es ist kostenlos. Und damit meine ich komplett kostenlos! Die Engine ist komplett Open-Source unter der MIT Lizenz. Es fallen also weder Kosten für die Verwendung noch für den kommerziellen Gebrauch an.

Es können Spiele für alle relevanten Plattformen entwickelt werden. Android, iOS, Windows, Linux. macOS und auch Webanwendungen werden unterstützt.

Godot ist das am schnellsten wachsende Projekt auf Github. Es hat eine aktive Community und wird stetig weiter entwickelt. Diese Community sorgt auch für die ausgezeichnete Dokumentation auf der Godot Website!

Außerdem fehlte mir bei Unity und Unreal der richtige Support für 2D Projekte. Unity bietet zwar viel in diese Richtung, aber man merkt, dass beide Engines primär für 3D ausgelegt sind. Godot hat eine reine 2D Engine im Gegensatz zu dem “Fake 2D” wie beispielsweise in Unity, welches einen 3D Space mit flacher Z-Achse verwendet.

Und zum Abschluss: Ich kam zu Godot als der C# Support angekündigt wurde und blieb wegen GDScript. Die Sprache ähnelt Python, ist ähnlich intuitiv und leicht zu erlernen. Während dem laufenden Spiel kann ich Änderungen im Skript vornehmen und sie werden direkt übernommen.

Einrichten des Godot Projekts

Falls ihr es noch nicht getan habt, solltet ihr euch zu erst die Godot Engine
herunterladen. Diese kommt als simple exe daher und muss nicht extra installiert werden.

In der Projektverwaltung klickt ihr rechts auf “Neues Projekt” und könnt nun einen Namen und den Pfad bestimmen.
Belasst die Einstellungen des Renderers einfach auf OpenGL ES 3.0, ausser ihr wollt ältere Hardware auch unterstützen.

Sobald ihr auf “Erstellen & Bearbeiten” klickt, solltet ihr folgendes vor euch sehen:

Ich verwende die aktuell stabile Version 3.1. Je nach Version kann die Aufteilung der einzelnen Bereiche unterschiedlich sein. Prinzipiell sollte aber immer alles irgendwo auf dem Bildschirm wieder zu finden sein.

In Bereich 1 haben wir das Dateisystem. Hier seht ihr die aktuelle Ordnerstruktur eures Projekts. Alle eure verwendeten Bilder, Soundeffekte und Szenen werdet ihr hier wiederfinden. Um so größer das Projekt wird, um so hilfreicher wird die Favoriten-Funktion sein. Per Rechtsklick auf eine Datei könnt ihr diese zu den Favoriten hinzufügen. Diese werden dann unabhängig von der Ordnerstruktur noch einmal aufgeführt, was “einiges an suchen” -> “eine Menge Sucherei?” für oft verwendete Szenen ersparen kann.

In Bereich 2 haben wir den Tab “Szene”. Eine Szene ist eine Sammlung von Nodes (“Knoten”) und bilden die Bausteine, welche zusammen unser Spiel ergeben. Jedes Level das wir bauen ist eine Szene. Jede Spielfigur, jedes Bild und jedes GUI Element sind Knoten dieses Levels, welche in einer Baumstruktur angeordnet sind.

Im Bereich 3 ist der Inspektor. Hier werden alle Eigenschaften eines ausgewählten Nodes angezeigt. Welche Einstellungen vorhanden sind ist von Node zu Node unterschiedlich. Wir werden im Laufe dieses Tutorials auf einige davon eingehen.
Neben dem Inspektor gibt es noch den Tab “Nodes”. Hier werden alle Signale aufgeführt, welche von der ausgewählten Node zur Verfügung gestellt werden. Wenn jemand Vorkenntnisse aus C# mitbringen sollte, wird einem das Prinzip von den dortigen Events bekannt vorkommen. Mit einem Signal können mehrere Methoden verbunden werden, die beim Auslösen des Signals ausgeführt werden.
Ein Beispiel wäre das Element Area2D. Dieses bietet ein Signal, das gesendet wird, wenn ein anderer Körper einen bestimmten Bereich betritt. Sagen wir, der Spieler betritt so einen Schalter. Der Schalter hat auf dieses Signal gewartet und kann nun sein Bild aktualisieren, gleichzeitig kann eine Tür aufgehen, oder eine Falle ausgelöst werden.

Im Bereich 4 haben wir unsere Arbeitsfläche. In der oberen Leiste kann die Ansicht zwischen 2D, 3D und dem Skripteditor gewechselt werden. In der 2D und 3D Ansicht setzen wir unsere Szenen zusammen (für unser Projekt werden wir nur die 2D Ansicht benötigen). Im Skripteditor schreiben wir unsere Spiellogik für die einzelnen Nodes.

Bevor wir dann endlich anfangen können, sollten wir zunächst unsere Ordnerstruktur festlegen.
Dafür drücken wir die rechte Maustaste im Dateisystem und legen folgende Ordner an:

1
2
3
4
*res://
*assets
*gameobjects
*gui

Die Namen sollten relativ selbsterklärend sein. In den Assets-Ordner kommen unsere Bilder und Soundeffekte. Im Gameobjects-Ordner werden wir alle Szenen abspeichern, die wir im Verlauf des Tutorials erzeugen. Szenen für die Benutzeroberfläche sammeln wir noch einmal extra im Ordner GUI.

Können wir endlich anfangen?

Das war jetzt ein ganzer Haufen an Informationen, ohne dass wir auch nur angefangen haben, deswegen legen wir zum Schluss dieses Parts zumindest noch eine Szene an.

Wie bereits erwähnt besteht unser Spiel aus einzelnen Bausteinen, die Nodes genannt werden. Mehrere Nodes werden in Szenen zusammen gefasst.
Überlegen wir kurz, was wir alles für Bausteine benötigen.
Wir haben ein Level, welches zu Beginn des Spiels gestartet wird. Dieses Level zeigt einen Hintergrund an, sowie die Punktzahl des Spielers und die aktuelle Munition.
Dazu kommen unsere Moorschweinchen, welche über das Spielfeld fliegen und darauf warten von uns abgeschossen zu werden. Diese bestehen wiederrum aus einem Sprite, damit man auch sieht, auf was man eigentlich schießt, sowie einem Bereich der angeklickt werden kann.

Beginnen wir damit, eine Szene für das Moorschwein anzulegen.

Um eine neue Szene anzulegen, kann im Bereich 4 einfach auf das + gedrückt oder im Menü Szene der Punkt “Neue Szene” ausgewählt werden. Da wir ein neues Projekt erstellt haben sollte aber bereits eine leere Szene für uns zur Verfügung stehen.
Im Bereich Szene wählen wir jetzt unser Wurzel-Node (Jede Szene hat genau eine). Drückt einfach auf 2D Szene. Die Ansicht sollte nun auf 2D umspringen und wir sehen unsere Node2D im Szenentab. Die Node Node2D ist die Basis aller 2D Nodes und eignet sich gut als Container für alle folgenden Nodes.

Mit einem Doppelklick auf die Node können wir sie umbenennen. Nennen wir sie Moorschwein. Damit wir auch was sehen können sollten wir unserem Schwein ein Aussehen geben. Wählt die Node2D aus und klickt auf das Plus im Bereich 2. Sucht in dem sich öffnenden Fenster nach “Sprite” und wählt diese aus. Diese sollte nun unter unserer Node Moorschwein angezeigt werden.

Wenn die Sprite ausgewählt ist, werden seine Eigenschaften im Inspektor angezeigt. Die Eigenschaft Texture gibt an, welches Bild angezeigt werden soll.

Da uns aktuell noch Assets fehlen, benutzen wir doch einfach die icon.png, die bei jedem neuen Projekt angelegt wird. Wählt im Dateisystem die icon.png und zieht diese ins Feld Texture. Das Bild sollte nun angezeigt werden.

Speichert die Szene mit Hilfe der Tastenkombination STRG+S im Ordner gameobjects als Mooschwein.tscn ab.
Drückt über dem Inspektor auf das Klappensymbol um die Szene zu starten.
Oben links sollte ein Teil unseres Bildes zu sehen sein. Stoppt das Spiel und verschiebt das Bild im Bereich 4 in die Mitte der Fläche. Wenn ihr die Szene erneut startet, wird das Bild mittig angezeigt.

Damit haben wir unsere erste Szene angelegt und können in Part 2 damit beginnen, das Schwein fliegen zu lassen!