Game Play Programming GDevelop mit JavaScript

In dieser Tutorialserie entwickeln wir einen Endless Runner in GDevelop mit JavaScript. Dabei lernst Du Grundlagen des Programmierens von JavaScript in GDevelop.
Wir schauen uns die Syntax an, lernen die Klassen und Funktionen von GDevelop zu verwenden sowie den Umgang mit Variablen und Funktionen und gehen auf Objekt Orientierte Programmierung ein.

In diesem ersten Lernvideo stellt euch Patrick die Game Engine GDevelop vor. Hierfür bitten wir euch die Webseite https://gdevelop.io/ zu öffnen und euch einen Überblick über das Angebot der Internetseite zu verschaffen. Dort werdet ihr vieles Spannendes zum Lesen, Lernen und Spielen entdecken. Patrick wird euch die einzelnen Möglichkeiten der Seite in seinem Video ebenfalls noch einmal Schritt für Schritt vorstellen.

In dem Tutorial behandeln wir die Tasteneingaben des Spielenden und reagieren auf diese.

Außerdem werfen wir einen kurzen Blick auf die Dokumentation von GDevelop und wie wir Funktionen finden und anwenden.
Darüber hinaus schauen wir uns die Konsolenausgabe von Objekten einmal genauer an und was wir darin finden und herauslesen können.

In dem Tutorial ändern wir die Animationen unseres Players per JavaScript und verknüpfen Bedingungen, so dass wir Kontrolle darüber haben, wie sich unser Character in der Luft, im Sprung oder am Boden verhält.

Damit wir bei unserem Endless Jump’n‘Run auch endlos rennen können, müssen wir
unser Level dynamisch erstellen. Hierzu erstellen wir in diesem Tutorial zeitgesteuert
neue Plattformen in unserer Szene und weisen ihnen dynamisch eine Position zu.

Damit wir bei unserem Endless Runner auch endlos rennen können, müssen wir unser Level dynamisch erstellen. Die nun dynamisch erstellten Plattformen müssen sich nun noch auf uns zu bewegen, damit wir ein fortlaufendes Level haben. Die Geschwindigkeit der Plattformen soll über eine Globale Variable steuerbar sein.

Funktionen können sehr hilfreich sein, um Teile unseres Codes wiederzuverwenden
und damit sowohl die Lesbarkeit als auch die Wartbarkeit zu erhöhen. Der Code für das
dynamische Erstellen von Plattformen soll deshalb in eine Funktion gepackt werden.
Weiter soll die Plattform nun außerhalb unseres Sichtbereichs und in unterschiedlichen
Größen erstellt werden.

Bisher haben wir nur eine statische Ansicht unseres Levels. Unser Player Character kann also einfach aus dem Sichtfeld herausspringen. Darum kümmern wir uns nun um die Kamera, damit diese unserem Charakter folgt.

Da wir das Level dynamisch erstellen und es sich auf uns zubewegt, verhindern wir anschließend, dass sich unser PC nach links oder rechts bewegen kann. Der Eindruck der Bewegung erfolgt nur durch die sich von selbst bewegenden Plattformen.

Da wir einige Plattformen nicht per Code erstellt, sondern manuell in unserem Level platziert haben, bewegen sich diese aktuell noch nicht von der Stelle. Wir müssen die Bewegung per Code hinzufügen. Um das unabhängig davon zu machen, wie viele Plattformen wir in der Szene haben, erstellen wir eine Objekt Gruppe und weisen die Kraft bzw. Bewegung allen Objekten der Gruppe in unserer Szene per Skript zu.

Bisher wurde Plattformen statisch in einem festen Zeitabstand gespawnt. In diesem Tutorial ändern wir nun den Timer für die Plattformen, so dass er Plattformen in zufälligen Zeitabständen generiert.

Damit wir auch weiter entfernte Plattformen erreichen können und um etwas die Dynamik und Möglichkeiten unseres Spiels zu erweitern, verleihen wir unserem Charakter die Fähigkeit, mehrfach in der Luft zu springen. Bei einem zweiten Sprung in der Luft sprechen wir vom Double Jump.

In diesem Tutorial sorgen wir dafür, dass das Spiel neu startet, wenn wir unglücklich springen, alle Plattformen verfehlen und herunterfallen. Da sich die Position der Plattformen an unserem Spieler orientiert, können wir keine unsichtbare Barriere hierfür verwenden und nutzen stattdessen erneut einen Timer. Außerdem fügen wir auch einen Hintergrund in unser Spiel ein.

Damit wir unsere Fähigkeiten messen und vergleichen können, benötigen wir ein Wertungssystem, einen Score. Der Score soll in dem Fall ein Timer sein, der unsere Spielzeit aufzeichnet und diese für uns in einem Textfeld ausgibt.

Für die Interaktion mit Objekten im Spiel, wie beispielsweise das Einsammeln von Münzen, ist es notwendig, Kollisionen zu erkennen. Wir bauen die notwendigen Funktionen und ein System ein, um Kollisionen mit mehreren unterschiedlichen Objekten zu erkennen, zu unterscheiden und darauf zu reagieren.
Wir fügen hierfür unserem Spiel Münzen zum Einsammeln sowie einen Gegner hinzu. Beide sollen am Ende zufällig auf unseren Plattformen gespawnt werden.

Um das Spiel vernünftig starten, neu starten und beenden zu können, bauen wir in diesem Tutorial ein einfaches Menü dafür. Wir verwenden dabei für die Buttons, das Bitmap Texte Objekt und Layer zur Gruppierung sowie um das Ein- und Ausblenden zu steuern.

Bisher hat sich unsere ganze Entwicklung in einem Skript abgespielt. Für komplexere Spiele wird es hilfreich sein, weitere Skripte zu erstellen und einzubinden – auch um das Spiel wartbar und erweiterbar zu halten. Den Zugriff auf diese Skripte stellen wir über Objekte her.

In diesem Tutorial werden wir die UI in ein separates Skript auslagern.

Wenn unser Spiel so weit ist, dass man es spielen kann, wollen wir es veröffentlichen.
Ein Weg hierfür ist ein Export und Build fürs Web, welchen wir dann auf der Plattform itch.io veröffentlichen.