- Projektteam: Reichhold Franziska, Mario Wehr (Betreuer)
- Typ: Projekt Bachelor/ Bachelorarbeit
- Zeitraum: 2025/2026
- Tools & Technologien:
HTML, SCSS, CSS, React, React Three FiberUnity Game Engine,
Ziel des Projekts ist es zu untersuchen, inwieweit ein moderner Web-Framework-Ansatz eine klassische Game-Engine-Umsetzung bei browserbasierten Spielen ersetzen oder sinnvoll ergänzen kann. Während etablierte Game-Engines wie Unity seit Jahren professionelle Workflows, integrierte Physiksysteme und ausgereifte Toolchains bieten, haben sich Web-Technologien in den letzten Jahren stark weiterentwickelt. Mit WebGL, Three.js und darauf aufbauenden Frameworks wie React Three Fiber (R3F) ist es möglich geworden, komplexe 3D-Anwendungen direkt im Browser umzusetzen.
Das Projekt verfolgt daher zwei zentrale Fragestellungen:
- Wie unterscheiden sich Entwicklungsprozess, Komplexität und Flexibilität beider Ansätze?
- Welche Unterschiede ergeben sich hinsichtlich Performance, Wartbarkeit, Skalierbarkeit und Nutzererlebnis?
Als Vergleichsbasis dient ein identisches physikbasiertes Puzzle-(Artillery)-Spielkonzept („Angry Birds Clone“), das in beiden Technologien möglichst funktionsgleich umgesetzt wurde.
Um eine faire Vergleichsbasis zu schaffen, wurden beide Prototypen mit identischen Kernfeatures realisiert:
- Slingshot-Mechanik mit Zug- und Spannlogik
- Physikalisch korrekte Flugbahn
- Kollisionserkennung und Objektzerstörung
- Mehrere einfache Levelstrukturen
- Reset- und Neustart-Mechanik
Unity WebGL
Der Unity-Prototyp wurde in einer integrierten Entwicklungsumgebung erstellt. Dabei kamen folgende Vorteile zum Tragen:
- Visueller Editor mit Scene-View und Inspector
- Eingebautes Physiksystem (Rigidbodies, Collider, Physik-Materialien)
- Prefab-System zur Wiederverwendbarkeit von Objekten
- Direkt integrierte Build-Pipeline für WebGL
Die Umsetzung profitierte von Unitys komponentenbasiertem Ansatz sowie von sofortigem visuellem Feedback im Editor. Gameplay-Anpassungen konnten schnell durch Parametervariation vorgenommen werden. Der Export als WebGL-Build ermöglichte die direkte Bereitstellung im Browser.
React Three Fiber
Die Umsetzung mit React Three Fiber stellte gleichzeitig die erste intensive Auseinandersetzung mit webbasierten Game-Development-Ansätzen dar. R3F basiert auf Three.js und integriert 3D-Szenen in das deklarative React-Komponentenmodell.
Zusätzlich wurden folgende Technologien eingesetzt:
- JavaScript / TypeScript
- React-State-Management
- Physik-Engine (z. B. cannon-es oder rapier)
- Vite oder Next.js als Build-System
Die Entwicklung erforderte ein stärkeres Verständnis für Rendering-Pipelines, Szenegraphen, Re-Render-Logik und State-Management. Im Gegensatz zu Unity existiert kein visueller Editor – Szenen werden vollständig im Code definiert. Dadurch entsteht einerseits mehr Kontrolle und Transparenz, andererseits auch ein höherer initialer Implementierungsaufwand.
Im weiteren Projektverlauf sind geplant:
- Detaillierte Performance-Messungen (FPS, Speicherverbrauch, Ladezeit)
- Vergleich der Build-Größen
Erweiterung um zusätzliche Gameplay-Features (z. B. Spezialfähigkeiten, Partikeleffekte) - Analyse der Skalierbarkeit bei steigender Objektanzahl
- Untersuchung von UX-Aspekten und wahrgenommenem „Game-Feel“
- Bewertung der Wartbarkeit und Erweiterbarkeit beider Codebasen
Langfristig soll geklärt werden, in welchen Szenarien ein Web-Framework-Ansatz eine vollwertige Alternative zur klassischen Game-Engine darstellt – und wo spezialisierte Engines weiterhin klare Vorteile bieten.