PAGE online

Unity Tutorial: Spiel mit AR

In der »New York AR«-App kann der User die gesprühte Typo auf einem der Plakate virtuell wegwischen und etwas Neues zeichnen. Developer Leonid Barsht zeigt, wie er die interaktive Funktion in Unity umsetzte.

Unity Tutorial

Wenn man eine App mit augmentierten Inhalten in ­Unity realisieren möchte, braucht man dazu eine Bilderkennungssoftware wie die Vuforia Engine. Auf der Vuforia-Website kann man zum einen kos­tenfrei einen Development Key generieren, den man zum Entwickeln benötigt, und zum anderen eine Da­tenbank anlegen, in der man die gewünschten Bilder beziehungsweise Marker ablegt. Diese lädt man herunter und importiert sie in Unity. Vuforia selbst installiert man in Unity über das Hauptmenü unter »Window › Package Manager«.

Hier kommt die Unity-Funktion zum Einsatz: Posterserie und AR-App – Colours of New York

1. Marker festlegen

Als Erstes erstellen wir einen Marker, indem wir im Hauptmenü von Unity unter »GameObject › Vuforia Engine« ein Image Target erzeugen . Im »Inspector«-Fenster des Objekts (»NY_Titel_draw«) legen wir unter »Image Target Behaviour (Script)« das gewünschte Visual (»NY_marker_1«) als Marker fest. Alle augmentierten Inhalte, die erscheinen sollen, wenn die Kamera das Visual findet, muss man dem Image Target in der Hierarchie als Kind zuweisen .

Unity Tutorial

2. Plane mit Brush-Font platzieren (Plane ImageLove)

Nun importieren wir ein Bild der wegwisch­baren Typo – das gesprühte »LOVE« – als PNG-Datei in das Projekt. In den »Import Settings« von Unity stellen wir dazu bei »Texture ­Type« »Sprite (2D and UI)« ein . Anschließend erzeugen wir im »Project«-Fenster über den [+]-Button ein Material und weisen ihm das PNG zu. Im ­beschriebenen Schritt sind die richtigen Einstellungen für den Shader des Materials entscheidend: »Legacy Shaders/Particles/Alpha Blended« . Dann erstellen wir in der Hierarchie über den [+]-Button eine Plane, skalie­ren diese im Inspector unter »Trans­form« auf die Größe des Markers und verknüpfen sie mit dem Material.

Unity Tutorial

Unity Tutorial

Unity Tutorial

3. Transparente Plane zum Zeichnen erstellen (PlaneToDraw)

Nun generieren wir erneut eine simple Plane und skalieren sie auf die richtige Größe. Dann weisen wir sie dem Marker als Kind zu. Zusätzlich erzeugen wir ein neues Material mit einem Standard-Shader. Als »Rendering Mode« wählen wir »Fade«, und bei der Farbe des Shaders setzen wir den Alphawert (A) auf 0 . Danach weisen wir dieses Material der Plane zu, sodass diese im Urzustand durchsichtig ist.

Unity Tutorial

4. BrushController.cs zuordnen und Pinselstärke festlegen

Für die Funktionalität des Wegwischens und des Zeichnens verwende ich mein zuvor geschriebenes C#-Skript BrushCon­trol­ler.cs. Dieses ordne ich in der Hierarchie der AR­Camera zu. Im Inspector des Brush Controllers stellen wir für »Thickness Of Line« die Strichstärke zum Zeichnen ein. Unter »Radius« definieren wir, wie viele Pixel der User gleichzeitig weg­wischen kann .

Unity Tutorial

5. Trail Renderer zum Zeichnen erstellen

Über das Hauptmenü in Unity erzeuge ich ein leeres GameObject und weise es der AR­Camera als Kind zu. Im Inspector füge ich per Button »Add Component« die Trail-Renderer-Komponente hinzu und stelle alle im Screen­shot zu sehenden Parameter für ihr Verhalten wie Farbe und Schatten ein. In den Einstellungen weise ich der Komponente zudem ein neues Material (BrushMat) mit dem Shader »Mobile/Particles/Alpha Blended« zu . Im Inspector verknüpfe ich unter »Brush« das gesamte GameObject mit dem Brush­Controller.cs-Skript. Dieses fängt mit trailRenderer.GetPositions(rayPositions); die gezeich­nete Linie ab und speichert sie, damit sie zu sehen bleibt, wenn der Finger den Bildschirm loslässt.

Unity Tutorial

Unity Tutorial

Unity Tutorial

 

6. Interaktionsbereich definieren mit TrackableSwipe.cs

Damit der Brush Controller weiß, an welchen Stellen sich etwas wegwischen oder zeichnen lässt, muss ich dem Image Target ein weiteres C#-Skript zuweisen: TrackableSwipe.cs. Im Inspector verknüpfen wir dieses mit den zuvor erstellten Planen PlaneToDraw und ImageLove-Plane. Ferner bestimmen wir hier eine Farbe zum Zeichnen und die Zahl der Pixel, die weggewischt sein müssen, damit der User zeichnen darf. TrackableSwipe.cs habe ich vom Vuforia-Script DefaultTrackableEventHandler.cs abgeleitet. Mein Skript sorgt unter anderem dafür, dass die Inhalte eines Markers erst erscheinen, wenn ihn die Kamera findet. Zudem übermittelt TrackableSwipe.cs alle im Inspector eingestellten Parameter an den Brush Controller. Das ist wichtig für die Unterscheidung, denn es gibt mehrere Inhalte in der App, die nach diesem Prinzip mit dem Brush Controller arbeiten.

Unity Tutorial

Brush Controller mit Fog-of-War-Effekt

Mein C#-Skript BrushController.cs leitet sich aus dem beliebten Videospieleffekt »Fog of War« ab. Der militärische Begriff bezeichnet ursprünglich ein erkundetes, doch gerade nicht sichtbares Gebiet. Seit den 1970er Jahren setzen Entwickler das Konzept als Stilmittel in Videospielen ein, um auf strategischen Karten Informationen zu verbergen. Ich nutze diesen Effekt, um die Pixel der gesprühten Typo auszublenden.

Um das Wegwischen zu simulieren, läuft der Brush Controller über alle Farben des zu entfernenden Bildes und schaut, ob der Abstand des Fingers im Vergleich zu den jeweiligen Farben kleiner ist als der unter Schritt 4 im Inspector definierte Radius.
if (dist < radius)

Dadurch verändert sich der Alphawert der Farben je nachdem, wie weit der Finger von ihnen entfernt ist. Je näher der Finger einer Farbe ist, desto transparenter wird sie.

float alpha = Mathf.Min(colors[i].a, dist / radius);
float previousA = colors[i].a;
colors[i].a = alpha;

Schließlich überprüft das Skript, ob der neue Alphawert kleiner als ein vorher empirisch definierter minimaler Wert ist. In diesem Falle gilt die Farbe als weggewischt und ein Zähler wird hochgesetzt. Außerdem gleicht es ab, ob dieser Wert der gewünschten Anzahl an weggewischten Pixeln entspricht, um zeichnen zu dürfen. Ist das der Fall, aktiviert das Skript die PlaneToDraw und den Trail Renderer zum Zeichnen.

if (colors[i].a < 0.01f && colors[i].a != previousA){
removedVertices++;
if(removedVertices >= maxVertices){

Unity Tutorial Leonid Barsht

Leonid Barsht, Unity-Developer in Berlin, liebt es, Probleme zu lösen. Den Kreativen zufolge, mit denen er zusammenarbeitet, ist der Satz, den man am häufigsten von ihm hört: »Das kriegen wir hin!«
https://is.gd/LeonidBarsht

 

 

 

 

 

 

Die aktuelle Version des Projekts einschließlich aller C#-Skripts stellen wir auf GitHub zur Verfügung:  https://is.gd/NYNY_AR

Unity in der Praxis: Interaktive AR-App

Dieses Unity-Tutorial gehört zum Beitrag Posterserie und AR-App – Colours of New York

PDF-Download: PAGE 11.2020

Happy Brands ++ Genderless Design ++ Hybride Business Reports ++ Posterserie & AR-App zu New York ++ Modulares Schriftsystem Q Project ++ Marken-Refresh für die Deutsche Bahn ++ Joy of Use im UX Design ++ Was die Kreativszene bewegt ++ PAGE EXTRA »Print, Paper & Finishing«

8,80 €
10,80 €
Lieferzeit: 2-3 Werktage
AGB

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte Sie auch interessieren