Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

XR Basics

In diesem kombinierten Grundlagen- und Interfacewerkstattkurs, erlernten wir die Basics der immersiven Gestaltung und setzten uns dabei mit VR, AR und MR auseinader.

Einstieg

Für den Einstieg in den Kurs war es unsere Aufgabe, uns mit Augmented Reality auseinanderzusetzen. Dafür arbeiteten wir mit der Software CoSpaces und bauten mittels eines Merge Cubes (fungiert als Marker) eine kleine AR-Szenerie.

#01 Raum & Modellierung

Das erste größere Projekt im Kurs war es, eine markante Szene aus einem Film oder einer Serie möglichst exakt anhand von Referenzpunkten in Gravity Sketch (3D Design- & Modellierungssoftware in VR) zu rekonstruieren.

Für diese Aufgabe arbeitete ich gemeinsam mit @Paul Schwarz. Wir entschieden uns, den Kindheitsklassiker, das Micky Maus Wunderhaus, nachzubauen. Dafür analysierten wir zu Beginn die Szene und fertigten zahlreiche Screenshots an, um nachher auf möglichst viele Blickwinkel zurückgreifen zu können. Die Szene besteht aus mehreren Objekten und Gebäuden, auf die Paul und ich uns aufteilten, um diese dann in Spline zu modellieren. Nachher übertrugen wir die Modelle in Gravity Sketch, wo Paul zusätzlich die Szenerie drumherum gestaltete. Dazu zählen: Himmel, Berge, Bäume sowie die Umzäunung.

Das Endergebnis schaut wie folgt aus:

#02 Interaktion & Bewegung

Das Ziel des zweiten Projekts bestand darin, ein Minigame in Unity zu entwickeln, welches durch verschiedene Spielmechaniken die Interaktion im virtuellen Raum vermittelt. Jedes Team erstellte ein eigenes Level, das den Hauptcharakter Steve beinhaltet. Steve ist ein Gartenzwerg, der ausschließlich geradeaus laufen kann und sich um 90° nach rechts dreht, wenn er mit einem anderen Objekt kollidiert.

Jana und ich haben unter diesen Voraussetzungen “Need for Steve” entwickelt, eine Art Jump 'n' Run-Spiel. Steve fährt dabei in einem Auto auf einer Straße mit Hindernissen, die ihm entgegenkommen. Der Spieler befindet sich dabei in der Virtual Reality hinter Steve und kann sein Auto greifen, um es auf der X-Achse zu verschieben und den Hindernissen auszuweichen.

Spielentwicklung

Um eine vollständig immersive Spielerfahrung zu schaffen, war es uns wichtig, dass die gesamte virtuelle Welt in unserer Designsprache dargestellt wird. Der beste Weg, dies zu erreichen, ist durch die Verwendung einer Skybox. Um diese zu gestalten, muss man wissen, dass man sich in der virtuellen Realität im Grunde innerhalb eines Würfels befindet. Daher haben wir 6 Frames im Faltmuster eines Würfel angelegt und sie dann als PNG exportiert, um sie in Unity als Skybox anzulegen.

Frame 19.pngFrame 19.png

Im nächsten Schritt haben wir uns dem Terrain gewidmet. Ähnlich wie bei der Skybox haben wir es mit Hilfe einer Grafik gestaltet. Wir haben ein einfarbiges Grid in quadratischem Format entworfen und als PNG auf dem Terrain platziert. Unity skaliert dabei die Grafik automatisch auf die Größe des Terrains. Zudem haben wir die Höhe des Terrains angepasst, um Berge zu erzeugen. Diese trugen nicht nur zur optischen Verbesserung des Spiels bei, sondern auch dazu, dass das Ende des Terrains besser kaschiert wurde und die virtuelle Welt nicht endlich erschien.

Frame 14.pngFrame 14.png

Nachdem wir die Spielumgebung gestaltet hatten, konzentrierten wir uns darauf, die Straße zu bauen, auf der Steve fahren sollte. Um die Straße unendlich erweitern zu können, haben wir einen Modell-Abschnitt der Straße gebaut, den wir immer wieder kopieren und hinten anfügen können.

Zusätzlich haben wir noch ein weiteres Straßenmodell gebaut, in diesem Fall eine Brücke. Es sollte die Variationsmöglichkeit aufzeigen, dass unterschiedliche “Straßenmodelle” wie in einem Baukastensystem hintereinander platziert werden könnten, um eine höhere Variation und Detailreichtum im Ablauf des Spiels zu erzeugen. Aufgrund des Projektzeitrahmens konnten wir diese Idee jedoch nur als Ausblick in unser Projekt aufnehmen.

Bei den Hindernissen auf der Straße bedienten wir uns an einem Mix aus fertigen Modellen aus dem Internet und selbst modellierten Objekte aus Spline. Diese platzierten wir verteilt entlang der Straße und konzipierten damit den Parcour, der vom Spieler zu meistern war.

Frame 15.pngFrame 15.png
Frame 16.pngFrame 16.png
Frame 17.pngFrame 17.png

Spieleprogrammierung

Sobald wir die visuelle Entwicklung des Spiels abgeschlossen hatten, war es an der Zeit, es spielbar zu machen, wofür wir drei Spielmechaniken programmierten.

Steve die Straße entlang fahren lassen

Unsere Entscheidung war, nicht Steve zu animieren, sondern die Straße selbst. Zu diesem Zweck haben wir die gesamten Module einschließlich der Hindernisse in Unity so programmiert, dass sie sich auf der Z-Achse in die Richtung von Steve bewegen. Da der Spieler sich an einem festen Standpunkt hinter dem Charakter befindet, entsteht der Eindruck, als ob die Straße stillstehen würde und Steve sie in seinem Auto entlang fahren würde, während die Hindernisse auf ihn zukommen.

Steve bewegbar machen

Um dem Spieler zu ermöglichen, Steve in seinem Auto zu greifen und zu bewegen, haben wir das Skript „XR Grab Interactable“ verwendet. Sebastian und Tim hatten dieses Skript bereits in ihrem Beispiel-Build genutzt, um ein Tor zu öffnen und zu schließen. Durch einige Anpassungen konnten wir dieses Skript auf Steve übertragen und ihn auf der X-Achse beweglich machen. Alle anderen Achsen waren blockiert, um Tricksereien zu verhindern. Die Leitplanken sorgten zudem dafür, dass der Spieler Steve nicht von der Fahrbahn ziehen konnte.

Hindernisse

Abschließend haben wir alle Hindernisse mit unsichtbaren Collidern ausgestattet, die so programmiert wurden, dass sie die gesamte Animation neu starten, sobald Steve sie berührt. Wir haben dies mithilfe des Skripts „Trigger Something“ erreicht.

Demo in VR:

#03 WebXR & räumliche Daten

Im letzten Projekte arbeiteten wir wieder in der Augmented Reality. Dabei sollte jedes Team die Charakteristiken einer unser FH-Werkstätten mittels WebXR darstellen. Dabei verwendeten wir das A-Frame und das Tool Glitch.

Zusammen mit Vivien Serve haben wir die AR-Anwendung W-AM-! für die analoge Modellwerkstatt an der FH;P entwickelt. Das Konzept ist es, an den verschiedenen Maschinen Marker anzubringen, die mit dem Smartphone gescannt werden können. Daraufhin öffnet sich die AR-Anwendung (Website), bei der in Form von 3D-Modellen die notwendigen Sicherheitsvorkehrungen erscheinen, die bei der jeweiligen Maschine beachtet werden müssen. Dabei im Mittelpunkt steht die Werkstattleiterin Anne, da sie für viele Studierende der Fachhochschule das Gesicht dieser Werkstatt ist.

Den Code für die Anwendung programmierten Vivien und Ich gemeinsam, und das Modellieren der Objekte in Spline erfolgte arbeitsteilig.

Frame 31.pngFrame 31.png
Modell_Anne 1.pngModell_Anne 1.png

Fazit

Zusammenfassend war der Kurs wirklich nicht ohne. Die Projekte waren nur auf zwei bis drei Wochen angesetzt, in den wir uns mit einer komplett neuen Thematik und vor allem neuen Programmen auseinandersetzten mussten. Der Aufwand für die eigenen Vorstellungen war dabei meist sehr hoch.

Dennoch habe ich gerade dadurch, dass ich vorher nichts mit XR zu tun hatte, enorm viel gelernt! Über das Thema, die Hürden und Potenziale, aber vor allem eben auch die Programme. Ich fühle mich in Unity nun doch ganz wohl, und Spline nutze ich weiterhin auch für andere Projekte gerne.

Insgesamt bin ich sehr froh, diesen Kurs belegt zu haben. Es hat mein Interesse in diesem Feld geweckt und ich habe Lust, mich weiter in diesem Thema zu qualifizieren.

On top noch große Credits an Sebastian und Tim, die uns mit viel Verständnis und Hilfe durch den Kurs begleitet haben! Ohne euch, wären wohl einige von uns verzweifelt haha :D

Ein Projekt von

Fachgruppe

Gestaltungsgrundlagen

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Sebastian Wloch foto: Tim Ebert

Zugehöriger Workspace

XR Basics: Grundlagen immersiver Gestaltung

Entstehungszeitraum

Wintersemester 2022 / 2023

Keywords