Google Cardboard Apps mit Unity erstellen für Einsteiger

Was kannst du mit diesem Tutorial lernen?

Dieses Tutorial zeigt dir, wie du 360°-Fotos und -Videos in Unity einbinden und zwischen diesen navigieren kannst. In Etwa so, wie du es von Google Maps mit Street View kennst. Am Ende erhälst du dank Unity eine fertige App, die du auf deinem Android-Smartphone testen kannst.

Was benötigst du?

  • ein Google Cardboard
  • Android Smartphone (mit Gyroskop und Android 4.4 oder neuer)
  • einen Rechner mit Unity (die neuste 2018-Version)
  • Google VR SDK Paket für Unity
  • Mehrere 360°-Fotos oder -Videos

1 Wie fängst du an?

Zunächst musst du Unity auf deinem Rechner installieren. Lade dir dazu am Besten den Unity Hub herunter, damit kannst du auch später immer neuere Versionen von Unity verwalten, ohne den Überblick zu verlieren.
Wenn du den Unity Hub installiert hast, benötigst du die neueste Version von Unity 2018.4 für das Erstellen von Apps. Achte beim Installieren darauf, dass du die benötigten Dateien für das Entwickeln von Android mit installiert werden (Android Build Support). Keine Sorge, du kannst diese dank des Unity Hubs auch jeder Zeit auch nachträglich installieren.

Wichtig ist, dass es Unity Version 2018.4 LTS ist, denn nur diese Version unterstützt die Entwicklung für das Google Cardboard in vollem Umfang (2019 oder demnächst 2020 wir nicht mehr voll unterstützt).
Die Installation dauert eine ganze Weile, der Fortschritt kann unter „Installs“ überwacht werden. Zwischendurch öffnet sich noch ein separates Fenster für die Installation von Microsoft Visual Studio, welches der benötigte Editor zum Bearbeiten von Code ist. Wenn die Installation beginnt, ist also erstmal Zeit für einen Tee, Kaffee oder eine Club Mate.

1.1 Der Unity-Editor

Nachdem du Unity 2018.4 LTS (Long Time Support) erfolgreich über den Unity Hub installiert hast, musst du ein neues Projekt erstellen. Dazu klickst du im Unity Hub oben rechts auf „New“, wählt bei Templates „3D“ und gibst deinem Projekt einen aussagekräftigen Namen.

Als Einsteiger wird man von der Benutzeroberfläche des Editors erstmal erschlagen. Ich empfehle dir für das Erstellen von Smartphone Apps die Ansicht unter „Window“ -> „Layouts“ auf „2 by 3“ zu ändern. Hier eine kleine Grafik, die die fünf dargestellten Fenster zeigt.

Je nachdem, was du für ein Lerntyp bist, kannst du entweder direkt mit dem Tutorial fortfahren oder dir vorher eine kurze theoretische Beschreibung zu den einzelnen Elementen des Unity-Editors ansehen.

1.2 Google Cardboard SDK für Unity

Damit du mit Unity VR-Anwendungen für Smartphones erstellen kannst, benötigst du Googles Software Developement Kit (SDK) für das Google Cardboard.
Leider hat Google die weitere Entwicklung eigener VR-Projekte eingestellt, sodass es vermutlich in der Zukunft kaum noch VR-Anwendungen für Smartphones geben wird. Das letzte Update jedoch reicht aus, um es stabil mit Unity 2018.4 LTS einzusetzen.

Zunächst brauchst du das SDK als Paket für den Unity-Editor. Welches du entweder hier herunterladen kannst.
Um dieses in dein Unity-Projekt zu integrieren wählst du oben im Unity Menü „Assets“ -> „Import Package“ -> „Custom Package“ und wählst dann im Explorer das Paket aus, welches du gerade heruntergeladen hast. Nachdem alle Dateien des Pakets entpackt wurden, kannst du diese noch mit einem Klick auf „Import“ integrieren.

Nach dem Import siehst du in deinem Editor im Project Window einen neuen Ordner mit dem Namen „GoogleVR“. Darin findest du alle Bestandteile des Pakets bis hin zu fertigen Beispiel Szenen. Im Ordner „Prefabs“ findest du alles was du für ein eigenes Projekt brauchst. Ein Prefab ist ein fertig zusammengestelltes Objekt inklusive Unterobjekten und Skripts, welches Unity erlaubt schnell eine oder mehrere Instanzen dieses Objekts zu erzeugen.
Prefabs werden in Unity mit einem blauen Würfel symbolisiert.

Um eine gewisse Ordnung im Hierarchy Window zu bewahren, erzeugst du zunächst per Rechtsklick ins Leere im Hierarchy Window mit „Create Empty“ ein neues, leeres Objekt. Du kannst so ein leeres Objekt im Hierarchy Window wie einen Ordner im Explorer verwenden. Gib dem Objekt einen aussagekräftigen Namen, beispielsweise „GVR“. Nun suchst du im Projekt Window unter „Assets“ -> „GoogleVR“ -> „Prefabs“ die folgende Prefabs:

GvrEditorEmulator – welches dafür sorgt, dass du deine Anwendung vorab in Unity testen kannst, ohne Sie jedesmal dafür auf ein Smartphone laden zu müssen.
GvrControllerMain – welches dafür sorgt, dass deine Anwendung später auf die Bewegung des Smartphones bzw. des Gyroskop-Sensors reagiert.
GvrEventSystem – welches dafür sorgt, dass mit Objekten interagiert werden kann.

… und ziehst diese per Drag and Drop auf das von dir erstellte Objekt „GVR“.

Schließlich suchst du dir noch das Prefab „GvrRecticlePointer“ und ziehst diese auf das Objekt „Main Camera“. So fügst du deiner Anwendung einen kleinen Punkt in der Mitte hinzu, der helfen soll innerhalb der Anwendung genauer zu fokussieren. Sobald interaktive Objekte fokussiert werden, wird der Punkt zu einem Kreis geöffnet.

Nachdem du nun deiner Szene alle benötigten Objekte hinzugefügt hast, musst du noch ein paar wenige Einstellungen treffen.

1.3 Einstellungen für die Cardboard Entwicklung

Für die Entwicklung von Cardboard-Anwendungen auf Android-Smartphones musst du noch ein paar kleine Änderungen in den Einstellungen vornehmen. Klicke oben im Menü des Editors unter „File“ -> auf „Buid Settings“.

Dort wählst du zunächst „Android“ unter „Platform“ aus und klickst auf „Switch Platform“

Nachdem Unity entsprechend umgestellt hat, gelangst du mit einem Klick auf „Player Settings“ zu den nächsten Einstellungen.

Im Inspector kannst du nun verschiedenste Einstellungen sehen. Setze zunächst unter „XR Settings“ per Mausklick ein Häkchen bei „Virtual Reality Supported“. Danach kannst du im erscheinenden Fenster mittels Klick auf das „+“-Symbol die Platform „Cardboard“ hinzufügen.

Weiter oben im Inspector musst du unter „Other Settings“ -> „Identification“ einen anderen Namen für deine App festlegen (z.B. com.Test.TestApp) und die Einstellung zum „Minimum API Level“ ändern. Dadurch legst du fest, dass Smartphones, auf denen deine Anwendung laufen soll. mindestens über die Android Version 4.4 verfügen müssen. Alle Versionen darunter verfügen nicht über alle notwendigen Komponenten, wie beispielsweise die Integration des Gyroskop-Sensors.

Google selbst stellt eine Anleitung auch in englischer Sprache zur Verfügung.

1.4 Testen der Anwendung im Editor

Noch gibt es ja nichts zu sehen, aber wenn du deine Anwendung zwischendurch testen willst, kannst du dieses mit einem Klick auf den Wiedergabe-Button in der Tool-Bar tun. Dann siehst du im Game View Window, wie deine Anwendung auf dem Smartphone aussehen würde. Keine Sorge! Auf dem Smartphone sieht man dann später auch einen geteilten Bildschirm für die Verwendung mit einem Cardboard.
Wenn du dich bewegen willst, also simulieren willst, dass das Smartphone sich dreht, musst du die Taste „ALT“ auf deiner Tastatur gedrückt halten und gleichzeitig deine Maus bewegen. Mit einem Mausklick simulierst du eine Touch-Geste auf deinem Smartphone.

Jetzt hast du erstmal alles, um eine lauffähige Anwendung für Android-Smartphones zu erstellen und zu testen.
Dann kannst du jetzt beginnen, deine Anwendung mit Inhalten zu füllen.

2 Darstellen von 360°-Inhalten

Bisher haben sich für die Darstellung bzw. das Mapping von 360-Grad-Videos drei Programmier-Ansätze durchgesetzt, die es ermöglichen, ein Foto oder Video innerhalb einer 3D- oder VR-Anwendung darzustellen.

1. Das Standard Mapping bzw. das sphärische Mapping, bei dem alle Pixel eines Videos einzeln auf die Pixel des Inneren einer hohlen Kugel abgebildet werden.
2. Das Würfel Mapping, bei dem ein Video in sechs gleiche Teile aufgeteilt und innerhalb eines Würfels dargestellt wird.
3. das von der Firma Facebook ausgearbeitete Pyramiden Mapping, welches laut Aussage des Unternehmens, eine Dateigrößenreduzierung von 80 Prozent gegenüber dem Standard Mapping erreichen.

Die einfachste Möglichkeit 360°-Inhalte mit Unity zu implementieren ist, wie der Name schon vermuten lässt: das Standard Mapping. Die meisten 360°-Kameras, die mit zwei Weitwinkel-Linsen funktionieren und automatisch ein einzelnes 360°-Foto oder -Video erstellen, stellen dieses ohnehin schon sphärisch dar.

2.1 Sphären in Unity erzeugen

Um in Unity eine Sphäre zu erstellen, klickst du am Besten mit der rechten Maustaste irgendwo ins Leere in deinem Hierarchy Window und wählst „3D Object“ -> „Sphere“.

Dadurch entsteht am Punkt (0,0,0) eine neue Sphäre. Solange sie im Hierarchy Window ausgewählt ist, kannst du im Inspector Window ihre Attribute bzw. Eigenschaften sehen und bearbeiten. Ändere zunächst ihre Größe, indem du unter „Transform“ ihr „Scale“ auf (50,50,50) setzt. Für eine richtige Darstellung muss die Kamera genau mittig innerhalb der Sphäre liegen. Wähle also im Hierarchy Window das Object „Main Camera“ aus und setze ihre „Position“ unter „Transform“ im Inspector auf (0,0,0).

Wie im Screenshot, kannst du nun die Sphäre in der Game View nicht mehr sehen. Das liegt daran, dass die Kamera sich nun innerhalb der Sphäre befindet und ein 3D-Objekt normalerweise nicht von innen dargestellt wird, um Rechen-Ressourcen zu sparen. Da du aber eigentlich genau das brauchst, musst du das jetzt für diese Sphäre ändern.

2.2 Eine Sphäre von innen darstellen

Die genaue Berechnung der darzustellenden Pixel kann man in Unity mit einem „Shader“ beeinflussen. Dieser verarbeitet wie und in welcher Farbe jeder einzelne Pixel des Objekts unter Einfluss von Licht und dem abzubildendem Material dargestellt wird.
Einen solchen „Shader“ musst du nun erstellen, um zu erreichen, dass die Sphäre von innen, statt wie normalerweise von außen gerendert wird. Klicke dazu mit der rechten Maustaste auf deinen „Assets“-Ordner im Project Window und wähle „create“ -> „Shader“ -> „Standard Surface Shader“ aus.

Benenne diesen aussagekräftig (z.B. FlipNormals). Den entstandenen Shader kannst du per Doppelklick öffnen und durch den folgenden Code ersetzen:

Shader "FlipNormals" {  Properties{  _MainTex("Base (RGB)", 2D) = "white" {}  }  SubShader{  Tags { "RenderType" = "Opaque" }  Cull Off  CGPROGRAM  #pragma surface surf Lambert vertex:vert  sampler2D _MainTex;  struct Input {  float2 uv_MainTex;  float4 color : COLOR;  };  void vert(inout appdata_full v) {  v.normal.xyz = v.normal * -1;  }  void surf(Input IN, inout SurfaceOutput o) {   fixed3 result = tex2D(_MainTex, IN.uv_MainTex);   o.Albedo = result.rgb;   o.Alpha = 1;  }  ENDCG  }  Fallback "Diffuse" } 

Die Basis für dieses Tutorial und der obige Code basieren übrigens auf der wunderbaren Vorarbeit von Adriana Vecchioli.

Um die Sphäre schließlich umzukrempeln musst du auf gleichem Wege noch ein Material erstellen („create“ -> „Material“) und diesem im Inspector den von dir erstellten Shader zuweisen. Dieses Material kannst du dann einfach per Drag and Drop vom Project Window auf die „Sphere“ im Hierarchy Window ziehen. Fertig.

2.3 360°-Fotos und -Videos innerhalb der Sphären abbilden

Um Fotos und Videos abspielen zu können, musst du zunächst die Dateien in dein Projekt importieren. Dazu legst du am Besten in deinem „Assets“-Ordner im Project Window per Rechtsklick einen neuen Ordner an und benennst diesen aussagekräftig (z.B. Fotos oder Medien). Dann öffnest du den Ordner auf deinem Rechner, in dem sich die von dir gewählten Fotos oder Videos befinden und ziehst diese einfach per Drag and Drop in den gerade von dir erstellten Ordner. Wenn du diese dann im Project Window auswählen kannst, kannst du dir ein Foto oder Video auswählen und es auf deine Sphäre ziehen.
Bei einem Foto sollte dann automatisch ein neues Material mit dem Shader „FlipNormals“ erstellt werden.

Bei einem Video sollte der Sphäre automatisch eine Komponente „Video Player“ hinzugefügt werden, welche du sehen kannst, wenn du die „Sphere“ im Hierarchy Window auswählst und im Inspector etwas nach unten scrollst. Dort kannst du dann auch Einstellungen für die Wiedergabe des Videos auswählen, wie Beispielsweise eine Dauerschleife („Loop“).

Zwei Sachen fallen dir im Scene oder Game Window auf (bei einem Foto direkt, bei einem Video erst im Wiedergabe-Modus):
1. Die Darstellung ist spiegelverkehrt.
2. Die Darstellung ist noch ziemlich dunkel.

2.4 Es werde Licht!

Die spiegelverkehrte Darstellung des 360°-Fotos oder -Videos entsteht, dadurch, dass du mit dem FlipNormals-Shader die einzelnen Pixel nach innen drehst. Der darzustellende Inhalt im Gesamtbild wird durch Unity aber dennoch so berechnet, als würde er von außen auf der Sphäre abgebildet werden. Es reicht also nicht, die einzelnen Pixel nach innen zu richten, du musst die Sphäre regelrecht umkrempeln. Zum Glück ist das mit Unity schnell gemacht, indem du die Sphäre im Hierarchy Window auswählst und im Inspector unter „Transform“ die Größe bzw. „scale“ von (50,50,50) auf (50,50,-50) änderst. Anschließend sollte das Foto bzw. Video richtig dargestellt werden.

damit das ganze nun auch sichtbar wird und nicht im Dunkeln bleibt, brauchen wir etwas Licht. Wenn man in Unity ein neues Projekt beginnt, werden automatisch eine Kamera und eine Lichtquelle erzeugt. Diese Lichtquelle entspricht der Darstellung einer Sonne, welche von oben auf die Szene leuchtet. Dieses „Directional Light“ bringt dir für diese App wenig. Einerseits hast du in deinem Video oder Foto bereits Lichtquellen, andererseits wirft deine Sphäre einen Schatten oder erstrahlt an einer Seite heller als an der anderen, wenn diese als 3D-Objekt angeleuchtet wird.
Für eine gute Ausleuchtung der Sphäre von innen, musst du zunächst das „Directional Light“ im Hierarchy Window auswählen und per Rechtsklick oder mit Hilfe der Entfernen-Taste löschen. Jetzt sollte deine Sphäre richtig dunkel sein.

Jetzt kannst du mit Rechtsklick auf die Kamera („Main Camera“) unter „Light“ -> „Point Light“ ein neues Licht erzeugen, welches rundherum (360°) beleuchtet. Erstmal scheint das Licht nicht viel zu bewirken. Das liegt daran, dass das neue Licht nicht weit und / oder hell genug scheint. Seine Sphäre hat einen Radius von 50, daher muss dein Licht etwas weiter strahlen, als 25 („Range“). Auch die Intensität des Lichts ist entscheidend dafür, wie hell deine Sphäre ausgeleuchtet wird („Intensity“). Mit diesen beiden Werten musst du etwas experimentieren, für mich haben sich Range=50, Intensity=5 als optimal heraus gestellt.

Dadurch, dass du es unter dem Kamera-Objekt (als Kind des Kamera-Objekts) erzeugt hast, folgt dieses Licht später der Kamera in weitere Sphären und du musst nicht für jede Sphäre ein eigenes Licht erzeugen. Voraussetzung dafür ist, dass du ausschließlich mit Sphären arbeitest und diese auch gleich groß sind.

2.5 Mehr Sphären bzw. Räume hinzufügen

Du kannst nun eine Sphäre erstellen und dafür sorgen, dass innerhalb dieser ein Foto oder ein Video dargestellt wird. Um mehrere Räume bzw. Sphären zu erstellen hast du nun mehrere Möglichkeiten. Am einfachsten ist es jedoch, einfach deine bereits erstellte Sphäre per copy and paste oder mittels Rechtsklick und „Duplicate“ so oft zu duplizieren, bis du die gewünschte Anzahl an Räumen erreicht hast. Anschließend musst du nur noch die verschiedenen Videos aus dem Project Window auf jeweils eine Sphäre im Hierarchy Window ziehen.

Für eine bessere Übersicht solltest du zunächst die Sphären umbenennen, sodass du genau weißt, welche Sphäre welches Video oder Foto abbilden soll. Außerdem kannst du nun mit Hilfe des „Move-Tools“ die einzelnen Sphären in der Scene View unterschiedlich positionieren, oder wählst jeweils eine Sphäre im Hierarchy Window aus und änderst im Inspector den Wert einer Achse in der Transform-Komponente. Ich habe im folgenden Screenshot beispielsweise jede Sphäre um 50 entlang der z-Achse verschoben.

3 Navigation zwischen Räumen

Um einen Raum zu wechseln, musst du die Kamera in die Mitte einer anderen Sphäre setzen. Das kannst du jetzt so programmieren, dass das nach einer gewissen Zeit passiert oder aber dass diese Aktion ausgelöst wird, wenn ein bestimmtes Objekt angeguckt oder angeklickt wird. Für eine interaktive Lösung brauchst du also neben der Logik bzw. einem kleinen Skript auch ein entsprechendes interaktives Objekt.

3.1 Eine Sphäre in der Sphäre

Da du dich ja jetzt mit dem Erzeugen von Sphären auskennst und Kugeln auch formschöne Körper sind, empfiehlt sich die Verwendung von Sphären als interaktive Objekte. In der Fachliteratur hat sich die Verwendung des Begriffs „Navigation Hotspot“ durchgesetzt. Um einen solchen zu erstellen müssen wir zunächst das Objekt erstellen. Per Rechtsklick auf die gewünschte Sphäre (in welcher der Hotspot zu einer anderen führen soll), wird über „3D Object“ -> „Sphere“ eine neue Sphäre als Kind-Objekt erzeugt. Noch hat Sie die gleichen Maße wie die Sphäre, in der wir sie erzeugt haben. Im Inspector kannst du, wie du schon weißt, unter „Transform“ -> „Scale“ die Größe eines Objektes festlegen. Die von dir neu erzeugte Sphäre hat die Größe/Scale(1,1,1) und ist damit genauso groß wie die Eltern-Sphäre, welche im Transform die Größe/Scale(50,50,-50) hat. Das liegt daran, dass die Komponente Transform immer in Relation zum jeweiligen Eltern-Objekt steht. Wenn du die Größe nun in der Transform-Komponente auf (0.1,0.1,0.1) änderst, wirst du sie innerhalb der Sphäre sehen können, wenn du mit Hilfe des Mausrades in die Sphäre hinein scrollst bzw. damit in deiner Scene View zoomst.

3.2 Einen Hotspot positionieren

Um den Hotspot korrekt zu positionieren, also dort, wo er in deinem Foto oder Video zum nächsten Raum führt, musst du etwas herum tüfteln. Falls du noch nicht weißt, wie du in der Scene View navigierst, wirst du es jetzt kennenlernen.

Achte darauf, dass du den hinzugefügten Navigation Hotspot (die Sphäre in der Sphäre) im Hierarchy Window ausgewählt bzw. angeklickt hast. anschließend kannst du mit dem Move-Tool in der Tool-Bar den Hotspot entlang der X-, Y- oder Z-Achse bewegen. Benutze unbedingt eine Maus, wenn du in der Scene View navigierst.

Mit dem Mausrad kannst du in der Scene View rein und raus zoomen. Der Zoom bezieht sich dabei immer auf das im Hierarchy Video ausgewählte Objekt. Hast du also den Hotspot ausgewählt, zoomst du mit dem Mausrad entweder zum Hotspot hin oder weg.
Wenn du die Ansicht verschieben möchtest, kannst du das Hand-Tool aus der Tool-Bar nutzen. Da es aber sehr anstrengend ist, dauernd zwischen dem Hand- und dem Move-Tool hin und her zu wechseln, kannst du stattdessen auch die Maustaste 3 gedrückt halten (das Mausrad wie eine Taste drücken) und zeitgleich die Maus bewegen. Die Maustaste 3 schaltet automatisch auf das Hand-Tool.
Wenn du deine Ansicht in der Scene View drehen bzw. rotieren möchtest, musst du die ALT-Taste auf deiner Tastatur gedrückt halten und zeitgleich mit der Maus die Ansicht drehen.

Eine ausführliche Beschreibung zur Navigation in der Scene View gibt es in englischer Sprache auch in der Unity Dokumentation.

Das große Problem ist, dass die Ansicht in deiner Scene View nicht der Ansicht der Kamera bzw. deiner Game View entspricht. Daher empfiehlt es sich, mit einem Klick auf den Wiedergabe-Button in deiner Tool-Bar die Anwendung zu starten. Wenn die Anwendung läuft, kannst du den Hotspot im Hierarchy Window anklicken und anschließend mit dem Move-Tool in der Scene View etwas entlang der Achsen bewegen, solange bis dieser in der Game View im Blickfeld ist. Anschließend kannst du diesen dann so positionieren, dass dieser innerhalb der Anwendung auf der gewünschten Position für den Übergang in den nächsten Raum ist.

Das kann eine ganz schöne Spielerei und ziemlich frustrierend sein. Es ist aber die beste Art dich an die Handhabung des Unity-Editors zu gewöhnen.
Übrigens: Wenn du mit der linken Maustaste einen Doppelklick auf ein Objekt in der Hierarchy View machst, wird das Objekt in der Scene View zentriert dargestellt. Das hilft ungeheuer, damit du nicht jedes mal deine Ansicht neu drehen, bewegen und zoomen musst.

GANZ WICHTIG:
Änderungen die du während des Wiedergabe-Modus vornimmst, werden nach dessen Beendigung nicht übernommen. Das heißt, dass dein Hotspot nachdem du den Wiedergabe-Modus beendest wieder zurück an der Position ist, die er hatte bevor du den Wiedergabe-Button gedrückt hast. Um seine Position zu speichern musst du dir entweder die Koordinaten notieren, welche du im Inspector in der Komponente „Transform“ -> „Position“ findest und diese anschließend dort wieder eintippst. Oder Du klickst mit der rechten Maustaste oben auf die Überschrift „Transform“ und wählst „Copy Component“. Wenn du dann den Wiedergabe-Modus beendest, kannst du per Rechtsklick an gleicher Stelle mit „Paste Component Values“ die Werte aus dem Wiedergabe-Modus wieder einfügen.

Leider lässt sich dieser Teil des Tutorials schwer in Worten ausdrücken, sodass ich dir empfehle das Video dazu anzuschauen, solltest du diesen Text nicht verstanden haben.

3.3 Interaktion hinzufügen

Noch hat der Hotspot keine Funktion. Es ist lediglich eine Sphäre in der Sphäre. Diese Sphäre benötigt nun noch einige Komponenten, damit sie interaktiv wird und dich in den gewünschten, nächsten Raum bringt.

Um als interaktiv und „touchable“ erkannt zu werden, benötigt dein Hotspot zunächst das Script bzw. die Komponente „GVR Pointer Physics Raycaster“.
Die Funktionsweise ist denkbar einfach:
Druch das Prefab „GVR Recticle Pointer“, welche du zuvor deiner Main Camera hinzugefügt hast, wird ausgehend von der Kamera ein Strahl (Ray) gesendet. Wenn dieser nun auf ein Objekt trifft, gibt das Script „GVR Pointer Physics Raycaster“ dem „GVR Recticle Pointer“ das Feedback, dass es sich beim angestrahlten Objekt um ein interaktives bzw. touchbares Objekt handelt.

Um dieses zu visualisieren, öffnet sich der Punkt in der Mitte der Game View zu einem Kreis. Um nun die Komponente hinzuzufügen musst du deinen Hotspot im Hierarchy Window auswählen und anschließend im Inspector ganz unten auf „Add Component“ klicken.
Anschließend gibt du im Suchfeld einfach „GVRPointerPhysicsRaycaster“ ein und bestätigst das hinzufügen mit einem Doppelklick darauf.

Jetzt brauchst du noch ein weiteres Script um mit einer entsprechenden Geste auch eine Aktion auslösen zu können. Dazu gehst du im Inspector wieder auf „Add Component“ und gibst im Suchfeld „EventTrigger“ ein. Auch diese Komponente bestätigst du mit einem Doppelklick.

Mit diesen beiden Scripts bzw. Komponenten ist dein Hotspot jetzt interaktiv aber noch immer ohne die gewünschte Funktion.

3.4 Ein eigenes Script hinzufügen

Wie bei den vorprogrammierten Scripts in 3.3, klicken wir zunächst mit ausgewähltem Hotspot im Inspector auf „Add Component“ und geben dort beispielsweise „HotSpotController“ ins Suchfeld ein. Da es vermutlich in deinem Projektordner noch kein Script mit diesem Namen geben wird, bietet dir Unity an ein „New script“ zu erstellen. bestätige dies mit einem Klick und bestätige den ausgewählten Namen des neuen Scripts mit der ENTER-Taste auf deiner Tastatur. Anschließend findest du das Script im Inspector und in deinem Project Window im „Assets“-Ordner. Wenn du mit Doppelklick auf dieses Script klickst, sollte sich „Microsoft Visual Studio“ öffnen, welches du dank der Installation über den Unity Hub (Punkt 1) glücklicher Weise gleich mit installiert haben solltest.
Hier kannst du nun das Script bearbeiten.

Wenn du möchtest, kannst du einfach das gesamte Script durch den folgenden Code ersetzen:

using System.Collections; using System.Collections.Generic; using UnityEngine; public class HotSpotController : MonoBehaviour {     [SerializeField] //sorgt dafür, dass die folgende Variable im Unity Editor änderbar ist     GameObject Player; //Dieses Objekt bezieht sich auf das Objekt mit der Main Camera     [SerializeField]     GameObject Room;// Dieses Objekt bezieht sich auf die Sphäre bzw. den Raum, zu dem der Hotspot führen soll         public void ChangePosition() //deklariert eine öffentlich zugängliche Funktion ohne Rückgabewert     {         Player.transform.position = Room.transform.position; //ändert die Position der Kamera auf die Position der Sphäre     } }

Durch die Angabe eines „[SerializeField]“ kannst du eine Variable als im Unity Editor änderbar deklarieren.
Wenn du das Script speicherst und in den Unity Editor zurück wechselst, kannst du nun im Inspector die Variablen „Player“ und „Room“ sehen. Nun kannst du per Drag and Drop die nächste Sphäre (in die dein Hotspot führen soll) vom Hierarchy Window in das Feld neben „Room“ im Inspector ziehen.

Für das Objekt Player musst du zunächst ein solches erstellen. Per Rechtsklick ins Leere im Hierarchy Window kannst du wieder ein neues leeres Objekt erstellen („Create Empty“). Dieses nennst du „Player“ oder „Spieler“ und ziehst per Drag and Drop das Objekt „Main Camera“ auf das eben erstellte Objekt, sodass die Main Camera ein Kind des Players wird. Das erlaubt dir, die Kamera mittels dem Objekt „Player“ innerhalb der Anwendung zu bewegen.
Anschließend musst du wieder den Hotspot im Hierarchy Window anklicken und das Objekt „Player“ per Drag and Drop in das Feld neben der Variablenbezeichnung „Player“ im Inspector ziehen.

Schließlich kannst du nun im Inspector dem Script bzw. der Komponente „Event Trigger“ eine Aktion zuordnen. Dazu musst du „Add New Event Type“ anklicken und “ PointerClick“ auswählen. Dadurch erschaffst du eine Aktion genau dann, wenn dein Hotspot angeklickt wird, bzw. wenn er im Fokus ist und eine Touch-Geste ausgeübt wird.

Mit einem Klick auf das Plus-Symbol in der neu entstandenen Zeile kannst du dem Auslöser bzw. dem Event (PointerClick) eine Aktion hinzufügen. Das Drop-Down-Menü, welches „Runtime Only“ anzeigt, lässt du so, wie es es. Darunter ist ein leeres Feld, in welches du per Drag and Drop ein Objekt hineinziehen kannst, welches über das Script verfügt, in dem die gewünschte Funktion deklariert wurde. In deinem Fall ist das die Funktion „ChangeRoom()“, die du im „HotSpotController“ deklariert hast und deinem Hotspot angefügt hast. Du musst also deinen Hotspot aus dem Hierarchy Window in dieses Feld ziehen.
Daneben siehst du nun ein weiteres Drop-Down-Menü, welches dir alle Scripts des Objekts mit den jeweiligen Funktionen anzeigt. Wähle also hier „HotSpotController“ -> „ChangeRoom()“ aus.

Jetzt hast du eigentlich alles, um den Raumwechsel bei einem Klick auf den Hotspot zu vollziehen.

4 Testen deiner Anwendung

Nun ist es an der Zeit deine Anwendung zu testen. Bevor du sie auf ein Smartphone lädst, kannst du die Funktionalität natürlich im Editor testen, indem du den Wiedergabe-Button drückst und mit Hilfe der ALT-Taste und der Maus in der Game View navigierst.

Um die Anwendung auf deinem Smartphone zu testen, aktiviere darauf das USB-Debugging in den Entwickler-Einstellungen und schließe dein Smartphone per USB an deinen Rechner an.
Anschließend klickst du im Unity-Menü auf „File“ -> „Build and Run“, gibst einen Namen für die Anwendung ein und bestätigst.

Je nachdem wie leistungsstark dein Rechner ist, ist es nun Zeit, dir einen Kaffee oder Tee zu machen und abzuwarten.

Wenn du keine Fehler gemacht hast, öffnet sich im Anschluss auf deinem Smartphone deine Anwendung und du kannst es in deine Pappbrille bzw. dein Cardboard legen und testen.

Sollte dies nicht der Fall sein versuche die Fehlermeldung zu lesen und gehe noch einmal alle Schritte durch, um sicher zu gehen, dass du keine Fehler gemacht hast oder einen Schritt vergessen hast.
Falls nicht:

HERZLICHEN GLÜCKWUNSCH!
Du hast deine eigene Android-App mit Unity entwickelt und lauffähig gemacht!

5 Wie geht’s weiter?

Jetzt hast du eigentlich Alles, was du benötigst um einen virtuellen Rundgang für Android-Smartphones mit dem Google Cardboard zu entwickeln. Füge einfach wie oben beschrieben neue Räume hinzu und verbinde diese mittels Hotspots miteinander.

Als nächstes kannst du versuchen statt Navigation Hotspots auch Audio-Hotspots hinzuzufügen, indem du den Hotspots ein „Audio Source“ Script hinzufügst und diese mit einem Event abspielen lässt.

Du kannst auch versuchen 3D-Modelle in deine Räume zu integrieren und zu interaktiven Objekten zu erweitern.

Wenn du dir ein Beispiel von mir ansehen möchtest, kannst du dir die Ronneburg oder SehitlikVR ansehen. Diese Anwendungen sind Erweiterungen der hier beschriebenen Vorgehensweise.

Außerdem kannst du auch gerne mal auf der Lernplattform von Unity vorbei schauen, dort gibt es viele interessante Projekte. Mit dem, was du jetzt kannst, kannst du locker alle Projekte für Anfänger und fortgeschrittene Anfänger angehen!

Viel Spaß!

Schreibe einen Kommentar

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.