Technische Vorkenntnisse

Dieses Tutorial setzt voraus, dass du bereits grundlegende Erfahrung mit einer Game-Engine und einer Programmiersprache mitbringst. Konkret werden folgende Kenntnisse empfohlen:

• Godot Engine: Grundverständnis des Szenenbaums, der Node-Hierarchie und als Node organisiert wird – dieses Konzept ist zentral für das gesamte Tutorial.
• GDScript: Grundkenntnisse in Variablen, Funktionen, Schleifen und objektorientierter Programmierung. GDScript ist eine Python-ähnliche Sprache, die speziell für Godot entwickelt wurde und eine niedrige Einstiegshürde bietet.
• Versionsverwaltung (Git): Grundlegende Befehle wie clone, commit, push und pull. In einem Teamprojekt ist Versionsverwaltung essentiell, um Codeänderungen nachvollziehbar zu machen und Konflikte zu vermeiden.

Konzeptuelle Vorkenntnisse

Neben technischem Wissen ist ein Grundverständnis von Game-Design-Konzepten hilfreich, um die Designentscheidungen in diesem Tutorial nachvollziehen zu können:

• Game Design Document (GDD): Ein GDD ist das zentrale Planungsdokument eines Spielprojekts. Es beschreibt Spielmechaniken, Zielgruppe, Lernziele, visuelle Gestaltung und den technischen Rahmen. In der Serious-Game-Entwicklung ist das GDD besonders wichtig, da es sicherstellt, dass Spielspaß und Lerninhalte von Anfang an zusammen gedacht werden.
• MDA-Framework (Mechanics, Dynamics, Aesthetics): Das von Hunicke, LeBlanc und Zubek (2004) entwickelte Framework beschreibt drei Ebenen des Spieldesigns: Mechanics (Regeln und Systeme), Dynamics (das Spielverhalten zur Laufzeit) und Aesthetics (das emotionale Erlebnis des Spielers). Designer arbeiten von Mechanics → Aesthetics, während Spieler das Spiel in umgekehrter Reihenfolge erleben.
  (Hunicke, R., LeBlanc, M. & Zubek, R. (2004). MDA: A Formal Approach to Game Design and Game Research. Proc. AAAI Workshop on Challenges in Game AI.)
• Grundlagen der Lernpsychologie: Konzepte wie Intrinsische Motivation, Feedback-Schleifen und Retrieval Practice (aktives Abrufen von Wissen) sind in Serious Games besonders relevant. Ein Grundverständnis dieser Konzepte hilft, Designentscheidungen besser einzuordnen.

Zielgruppe dieses Tutorials

Dieses Tutorial richtet sich an Studierende, die im Rahmen von Lehrveranstaltungen oder Abschlussarbeiten ein Serious Game entwickeln möchten. Es ist als praxisorientierter Leitfaden konzipiert, der den gesamten Entwicklungsprozess – von der Konzeption bis zur Veröffentlichung – abdeckt.

Offizielle Godot-Dokumentation (Link), Zugriff 04. April 2026
GDScript-Einführung (Link), Zugriff 30. März 2026

Definition und Ursprung

Der Begriff Serious Game wurde erstmals von Clark C. Abt in seinem gleichnamigen Buch (1970) geprägt. Abt definierte Serious Games als Spiele, die "einen ausdrücklichen und sorgfältig durchdachten Bildungszweck verfolgen und nicht in erster Linie zur Unterhaltung gespielt werden" – wobei Spaß dabei nicht ausgeschlossen ist.

Eine modernere, im Bereich der digitalen Spiele weit verbreitete Definition stammt von Michael Zyda (2005): Ein Serious Game ist ein "mentaler Wettkampf, gespielt mit einem Computer nach bestimmten Regeln, der Entertainment nutzt, um Trainings-, Bildungs-, Gesundheits- oder strategische Kommunikationsziele zu erreichen". Der entscheidende Unterschied zu reinen Unterhaltungsspielen liegt also im bewusst integrierten pädagogischen Ziel.

Abt, C. C. (1970). Serious Games. Viking Press, New York.
Zyda, M. (2005). From Visual Simulation to Virtual Reality to Games. IEEE Computer, 38(9), 25–32.

Abgrenzung zu verwandten Konzepten

Um Serious Games richtig einzuordnen, ist eine klare Abgrenzung zu verwandten Konzepten wichtig. Die folgende Tabelle fasst die wesentlichen Unterschiede zusammen:

Wichtig: Gamification bedeutet, einzelne spielerische Elemente (Punkte, Badges, Ranglisten) in einen Nicht-Spiel-Kontext einzubauen – etwa in eine Lernplattform. Ein Serious Game hingegen ist ein vollständiges Spiel mit eigener Spielwelt, Regeln und Narrativ, bei dem das Lernen durch das Spielen selbst geschieht.

Kernmerkmale eines Serious Games

Die Forschung zeigt, dass erfolgreiche Serious Games bestimmte Designprinzipien teilen. Becker und Metz (2022) beschreiben didaktische und psychologische Grundsätze, die bei der Gestaltung berücksichtigt werden sollten:

• Klares Lernziel: Jedes Serious Game muss ein klar definiertes, messbares Lernziel haben. Was soll der Spieler am Ende wissen oder können? Das Lernziel bestimmt die gesamte Spielarchitektur.
• Intrinsische Verzahnung von Spiel und Lernen: Die Spielmechaniken müssen den Lerninhalt direkt abbilden – nicht nur dekorativ umrahmen. Ein Quiz mit bunten Farben ist noch kein Serious Game. Stattdessen soll der Spieler durch das Lösen von Spielproblemen gleichzeitig den Lernstoff verinnerlichen (sogenanntes Intrinsic Integration).
• Motivation durch Selbstbestimmung: Laut der Selbstbestimmungstheorie (SDT) von Deci und Ryan (1985, 2000) basiert intrinsische Motivation auf drei psychologischen Grundbedürfnissen:
  • Autonomie – das Gefühl, selbst Entscheidungen treffen zu können
  • Kompetenzerleben – das Gefühl, Herausforderungen meistern zu können
  • Soziale Eingebundenheit – das Gefühl, mit anderen verbunden zu sein
  Spiele, die diese drei Bedürfnisse ansprechen, erzeugen dauerhaftere Motivation als solche, die rein auf externe Belohnungen (Punkte, Abzeichen) setzen.
  (Deci, E. L. & Ryan, R. M. (2000). The "What" and "Why" of Goal Pursuits. Psychological Inquiry, 11(4), 227–268.)
• Flow-Erlebnis: Nach Csikszentmihalyi (1990) entsteht Flow – ein Zustand völliger Vertiefung – wenn die Herausforderung genau zum Fähigkeitsniveau des Spielers passt. Ist die Aufgabe zu leicht, entsteht Langeweile; ist sie zu schwer, Frustration. Gute Serious Games passen den Schwierigkeitsgrad dynamisch an (Adaptive Difficulty), um den Spieler im Flow-Kanal zu halten.
  (Csikszentmihalyi, M. (1990). Flow: The Psychology of Optimal Experience. Harper & Row.)
• Definierte Zielgruppe: Alter, Vorwissen, Lernkontext und Medienkompetenz der Zielgruppe beeinflussen maßgeblich das Spieldesign. Ein Serious Game für Grundschüler erfordert ein völlig anderes Design als eines für Studierende der Informatik.
• Unmittelbares, konstruktives Feedback: Der Lernfortschritt wird durch das Spiel sichtbar und erlebbar gemacht. Forschung zu Formative Feedback (vgl. Fuchs & Wolff, 2023) zeigt, dass gezieltes, zeitnahes Feedback die Lernwirksamkeit in spielerischen Umgebungen deutlich verbessert.
  (Fuchs, M. & Wolff, C. (2023). Improving Programming Education through Gameful, Formative Feedback.)

Becker, K. & Metz, M. (2022). Didactic and Psychological Principles of Successful Design of Serious Games. Proc. European Conference on Games Based Learning.
Ren, Y. & Xu, F. (2023). The Impact of Educational Games on Learning Outcomes: Evidence From a Meta-Analysis.

Warum funktionieren Serious Games?

Die Wirksamkeit von Serious Games ist wissenschaftlich gut belegt. Eine umfassende Meta-Analyse von Ren und Xu (2023) zeigt, dass der Einsatz von Educational Games einen signifikant positiven Effekt auf Lernergebnisse hat – insbesondere dann, wenn die Spielmechanik eng mit dem Lerninhalt verzahnt ist.

Zentrale Wirkmechanismen sind:

• Aktives Lernen: Spieler müssen Entscheidungen treffen, Probleme lösen und Feedback verarbeiten – statt passiv Inhalte aufzunehmen.
• Retrieval Practice: Durch wiederholtes Abrufen von Wissen in spielerischen Kontexten wird das Langzeitgedächtnis gestärkt (Testing Effect).
• Emotionale Bindung: Die narrative und ästhetische Einbettung von Lerninhalten in eine Spielwelt schafft emotionale Anknüpfungspunkte, die das Behalten fördern.
• Sichere Lernumgebung: Fehler haben im Spiel keine realen Konsequenzen. Das fördert Experimentierfreude und Risikobereitschaft – wichtige Voraussetzungen für nachhaltiges Lernen.

Bekannte Beispiele

Spiel	Lerninhalt	Typ
The Farmer Was Replaced	Programmierlogik, Automatisierung	Serious Game
Kerbal Space Program	Physik, Orbital-Mechanik, Ingenieurwesen	Serious Game / Sandbox
Civilization	Geschichte, Strategie, Ressourcenmanagement	Entertainment mit Lerneffekt
Duolingo	Fremdsprachen	Gamification / Hybrid
Foldit	Proteinstruktur-Vorhersage (Biochemie)	Citizen-Science Serious Game

Weiterführende Literatur

• Abt, C. C. (1970). Serious Games. Viking Press.
• Zyda, M. (2005). From Visual Simulation to Virtual Reality to Games. IEEE Computer, 38(9), 25–32.
• Prensky, M. (2001). Digital Game-Based Learning. McGraw-Hill.
• Deci, E. L. & Ryan, R. M. (2000). The "What" and "Why" of Goal Pursuits. Psychological Inquiry, 11(4), 227–268.
• Csikszentmihalyi, M. (1990). Flow: The Psychology of Optimal Experience. Harper & Row.
• Hunicke, R., LeBlanc, M. & Zubek, R. (2004). MDA: A Formal Approach to Game Design and Game Research. Proc. AAAI Workshop on Challenges in Game AI.
• Becker, K. & Metz, M. (2022). Didactic and Psychological Principles of Successful Design of Serious Games.
• Ren, Y. & Xu, F. (2023). The Impact of Educational Games on Learning Outcomes: Evidence From a Meta-Analysis.
• Fuchs, M. & Wolff, C. (2023). Improving Programming Education through Gameful, Formative Feedback.

Überblick

Das Deployment eines Godot-basierten Serious Games für das Web umfasst mehrere Schritte: den HTML5-Export aus der Engine, den Transfer auf einen Server und die korrekte Konfiguration des Webservers. Dabei spielen moderne Web-Sicherheitsstandards wie Secure Context und Cross-Origin Isolation eine zentrale Rolle, die häufig zu unerwarteten Problemen führen.

Die Bereitstellung von Spielen über den Browser hat in der Serious-Games-Forschung besondere Bedeutung: Web-basierte Distribution senkt die Einstiegshürde für Lernende erheblich, da keine Installation erforderlich ist (Prensky, 2001). Gleichzeitig stellt die Browser-Plattform spezifische technische Anforderungen, die im Folgenden erläutert werden.

Schritt 1: Godot HTML5-Export

Godot kompiliert das Projekt mithilfe von WebAssembly (WASM) in ein browserlauffähiges Format. WebAssembly ist ein von Mozilla, Google, Microsoft und Apple gemeinsam entwickelter Standard (W3C, 2019), der es ermöglicht, kompilierten Code nahezu nativ im Browser auszuführen.

1. In Godot: Projekt → Export → Hinzufügen → Web
2. Export-Template herunterladen (falls nicht vorhanden)
3. Export-Pfad festlegen (z.B. B:\Projekt_Godo\export)
4. „Projekt exportieren" klicken

Der Export erzeugt folgende Dateien, die alle benötigt werden:

Datei	Funktion	Pflicht?
index.html	Einstiegspunkt, lädt Engine und Assets	Ja
*.js	JavaScript-Laufzeit der Godot-Engine	Ja
*.wasm	WebAssembly-Modul (kompilierte Engine)	Ja
*.pck	Gepackte Assets, Szenen und Skripte	Ja
*.png	Splash-Screen / Boot-Bild	Optional
Icons	Für Touch-Geräte (Progressive Web App)	Optional

Godot Engine Documentation (2024). Exporting for the Web. docs.godotengine.org
W3C (2019). WebAssembly Core Specification. w3.org

Schritt 2: Zugriff auf den Server (SSH)

Für das Deployment wird ein Linux-Server mit SSH-Zugang benötigt (in unserem Fall eine Ubuntu 24.04 VM der HTWK Leipzig). Der Zugriff erfolgt über PuTTY (SSH-Client für Windows).

1. VPN aktivieren (bei Hochschulnetz zwingend erforderlich)
2. PuTTY starten → Host Name: Server-IP eingeben, Port: 22, Typ: SSH
3. Verbindung öffnen → Benutzername und Passwort eingeben

Schritt 3: Dateien auf den Server übertragen

Für den Dateitransfer gibt es zwei bewährte Methoden:

Methode	Tool	Vorteile
Kommandozeile	PSCP (Teil der PuTTY-Suite)	Schnell, skriptbar, kein Extra-Tool
Grafisch	WinSCP	Drag-and-Drop, übersichtlich

Upload mit PSCP (PowerShell auf dem lokalen PC)

1. Zielordner auf dem Server erstellen (in PuTTY/SSH):
   mkdir -p /home/stud/chainguard
2. Upload starten (in PowerShell, nicht in PuTTY!):
   pscp.exe -r "B:\Projekt_Godo\export" stud@[SERVER-IP]:/home/stud/chainguard
3. Auf dem Server prüfen:
   ls -la /home/stud/chainguard/export

Schritt 4: Webserver einrichten (Apache)

Für den permanenten Betrieb wird ein vollwertiger Webserver empfohlen. Apache HTTP Server ist der am weitesten verbreitete Webserver weltweit (Netcraft, 2024) und eignet sich besonders für statische Inhalte wie Godot-HTML5-Exporte.

Installation und Konfiguration

# Apache installieren
sudo apt update
sudo apt install apache2 -y

# Aktivieren und starten
sudo systemctl enable --now apache2

# Projekt ins Web-Verzeichnis kopieren
sudo mkdir -p /var/www/html/chainguard
sudo cp -r /home/stud/chainguard/export/* /var/www/html/chainguard/
sudo chown -R www-data:www-data /var/www/html/chainguard

# Apache neustarten
sudo systemctl restart apache2

Das Spiel ist nun unter http://[SERVER-IP]/chainguard erreichbar.

Schnelltest ohne Apache (Python)

Für schnelle Tests ohne Installation eignet sich Pythons eingebauter HTTP-Server:

cd /home/stud/chainguard/export
python3 -m http.server 8080 --bind 0.0.0.0

Erreichbar unter http://[SERVER-IP]:8080 (VPN muss aktiv sein).

Schritt 5: Secure Context und HTTPS

Ein häufiges Problem bei Godot-Web-Exports ist die Fehlermeldung:

Moderne Browser erzwingen für bestimmte APIs (insbesondere SharedArrayBuffer, das Godot für Multi-Threading nutzt) einen Secure Context. Laut W3C-Spezifikation gilt ein Kontext als „sicher", wenn er über HTTPS oder von localhost ausgeliefert wird (W3C, 2021).

Zusätzlich erfordern moderne Browser Cross-Origin Isolation durch zwei HTTP-Header, damit SharedArrayBuffer verfügbar ist (Mozilla MDN, 2024):

• Cross-Origin-Opener-Policy: same-origin
• Cross-Origin-Embedder-Policy: require-corp

Lösung A: Threads deaktivieren (einfachste Lösung)

In Godot: Projekt → Export → Web → Threads: Off (Single-Threaded). Dadurch wird SharedArrayBuffer nicht mehr benötigt und das Spiel funktioniert auch ohne HTTPS. Performanceeinbußen sind je nach Projekt minimal.

Lösung B: Cross-Origin-Header setzen (Apache)

# In /etc/apache2/sites-available/000-default.conf
# Innerhalb des <VirtualHost *:80> Blocks:
Header always set Cross-Origin-Opener-Policy "same-origin"
Header always set Cross-Origin-Embedder-Policy "require-corp"

# Headers-Modul aktivieren:
sudo a2enmod headers
sudo systemctl restart apache2

Lösung C: HTTPS mit Self-Signed Certificate (empfohlen für Produktion)

Für einen vollständig konformen Secure Context wird HTTPS benötigt. Auf einer VM ohne öffentliche Domain eignet sich ein selbstsigniertes Zertifikat:

# 1. SSL-Zertifikat erstellen
sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
  -keyout /etc/ssl/private/apache-selfsigned.key \
  -out /etc/ssl/certs/apache-selfsigned.crt \
  -subj "/C=DE/ST=Sachsen/L=Leipzig/O=HTWK/CN=[SERVER-IP]"

# 2. SSL in Apache aktivieren
sudo a2enmod ssl
sudo a2ensite default-ssl
sudo systemctl restart apache2

# 3. In /etc/apache2/sites-available/default-ssl.conf:
# Im <VirtualHost *:443> Block nach DocumentRoot:
SSLEngine on
SSLCertificateFile /etc/ssl/certs/apache-selfsigned.crt
SSLCertificateKeyFile /etc/ssl/private/apache-selfsigned.key

# 4. Neustart
sudo systemctl restart apache2

Das Spiel ist dann unter https://[SERVER-IP]/chainguard erreichbar. Der Browser zeigt eine Zertifikatswarnung (da selbstsigniert) – über „Erweitert → Fortfahren" kann diese akzeptiert werden.

W3C (2021). Secure Contexts. w3.org
Mozilla MDN (2024). SharedArrayBuffer: Security requirements. developer.mozilla.org
DigitalOcean (2024). How To Create a Self-Signed SSL Certificate for Apache in Ubuntu. digitalocean.com

Schritt 6: Updates deployen

Beim Aktualisieren des Spiels sollte der alte Inhalt vollständig ersetzt werden, um veraltete Dateien zu vermeiden:

# 1. Alten Inhalt auf dem Server löschen
sudo rm -rf /var/www/html/chainguard/*

# 2. Neuen Export hochladen (PowerShell auf dem PC)
pscp.exe -r "B:\Projekt_Godo\export\*" stud@[SERVER-IP]:/home/stud/chainguard/

# 3. Ins Webverzeichnis kopieren (SSH auf dem Server)
sudo cp -r /home/stud/chainguard/* /var/www/html/chainguard/
sudo chown -R www-data:www-data /var/www/html/chainguard
sudo chmod -R 755 /var/www/html/chainguard
sudo systemctl reload apache2

# 4. Im Browser: Strg+F5 (harter Reload, Cache umgehen)

Schritt 7: Begleitende Website deployen

Neben dem Spiel selbst kann auch eine begleitende Website (z.B. dieses Tutorial) auf demselben Server bereitgestellt werden. Beide Projekte liegen in separaten Ordnern im Apache-Webroot und sind unabhängig voneinander erreichbar. Dieses Vorgehen entspricht dem Prinzip der Separation of Concerns (Martin, 2003): Das Spiel und die Dokumentation sind getrennte Artefakte mit eigenem Deployment-Zyklus.

Verzeichnisstruktur auf dem Server

Server-Pfad	URL	Inhalt
/var/www/html/chainguard/	https://[IP]/chainguard	Godot-Spiel (HTML5-Export)
/var/www/html/tutorial/	https://[IP]/tutorial/main.html	Tutorial-Website

Upload und Einrichtung

# 1. Website hochladen (PowerShell auf dem PC)
pscp.exe -r "B:\Projekt_Godo\Website\src" stud@[SERVER-IP]:/home/stud/tutorial

# 2. Ins Webroot kopieren (SSH auf dem Server)
sudo mkdir -p /var/www/html/tutorial
sudo cp -r /home/stud/tutorial/src/* /var/www/html/tutorial/
sudo chown -R www-data:www-data /var/www/html/tutorial
sudo chmod -R 755 /var/www/html/tutorial
sudo systemctl reload apache2

Updates der Website

# PowerShell (PC):
pscp.exe -r "B:\Projekt_Godo\Website\src" stud@[SERVER-IP]:/home/stud/tutorial

# SSH (Server):
sudo rm -rf /var/www/html/tutorial/*
sudo cp -r /home/stud/tutorial/src/* /var/www/html/tutorial/
sudo chown -R www-data:www-data /var/www/html/tutorial
sudo systemctl reload apache2

Zusammenfassung: Deployment-Pipeline

Weiterführende Literatur

Godot Engine Docs (2024). Exporting for the Web (Link), Zugriff 01. April 2026
W3C (2019). WebAssembly Core Specification (Link), Zugriff 29. März 2026
W3C (2021). Secure Contexts (Link), Zugriff 06. April 2026
Mozilla MDN (2024). SharedArrayBuffer (Link), Zugriff 03. April 2026
Haas, A. et al. (2017). Bringing the Web up to Speed with WebAssembly. Proc. ACM SIGPLAN Conference on Programming Language Design and Implementation.
Prensky, M. (2001). Digital Game-Based Learning. McGraw-Hill.
DigitalOcean (2024). Self-Signed SSL Certificate for Apache in Ubuntu (Link), Zugriff 07. April 2026