Erstellen eines AR-Spiels mit Vuforia

[Es gibt 3D-GIFs unter dem Schnitt]

Augmented Reality (AR) ist plötzlich ein sehr beliebter Begriff geworden. Dank Vuforia können Entwickler die physische Welt problemlos mit digitalen Inhalten ergänzen .

Obwohl die Veröffentlichung von ARKit und ARCore dazu beigetragen hat, die Popularität von Augmented Reality zu steigern, gab es bereits andere Plattformen und SDKs. Einer von ihnen war Vuforia; Vor kurzem hat Unity eine Partnerschaftsvereinbarung mit Vuforia geschlossen und diese AR-Plattform in die Unity-Game-Engine integriert.

In diesem Tutorial werde ich ein AR-Spiel mit dem in die Unity-Engine integrierten Vuforia SDK erstellen. Dabei werde ich auf folgende Schlüsselkomponenten eingehen:

• Richten Sie die Datenübertragung von der Augmented Reality-Kamera ein
• Bildverfolgung - was es ist und wie es funktioniert
• Anhängen von digitalen Inhalten an ein physisches Objekt
• Erstellen Sie benutzerdefinierte Interaktionen, die je nach dem, was die Kamera sieht, ausgelöst werden

Hinweis: In diesem Tutorial zu Vuforia wird davon ausgegangen, dass Sie die Grundlagen der Entwicklung in Unity bereits kennen. Wenn Sie Unity noch nicht kennen, lesen Sie das großartige Tutorial Erste Schritte mit Unity .

Entwicklung von AR-Spielen in Unity

Es gibt viele AR-Geräte auf dem Markt, aber das Hauptziel von AR-Anwendungen ist der mobile Bereich von Plattformen wie iOS und Android. Hier ist die Kombination von Unity und Vuforia praktisch - bei der plattformübergreifenden Entwicklung. Ein weiteres Plus ist, dass die Anwendung im Editor getestet werden kann. Dafür brauchen Sie nur eine Webcam!

Bevor Sie beginnen, laden Sie die neueste Version von Unity herunter und installieren Sie die Vuforia Augmented Reality Support- Komponente. Wenn Sie den Unity Hub verwenden , können Sie diese Komponente einer bereits installierten Version von Unity hinzufügen.

An die Arbeit gehen

Nachdem Sie Unity, Vuforia und eine Webcam haben, müssen Sie ein Beispielprojekt herunterladen ( von hier ).

Extrahieren Sie nach dem Herunterladen die Dateien und öffnen Sie das Projekt Erstellen eines AR-Spiels mit Vuforia Starter in Unity. Öffnen Sie beim Laden des Projekts die Starterszene aus dem Ordner " Szenen " und sehen Sie sich das Hierarchiefenster an:


Nachdem Sie die Zusammensetzung des Projekts überprüft haben, klicken Sie im Editor auf die Schaltfläche Wiedergabe , um die Bestellung in unserem Pizzaspiel auszufüllen.


Großartig, wir können mit Pizza spielen, aber unsere eigentliche Herausforderung besteht darin, daraus ein AR-Spiel zu machen.

Hinweis: Die UI-Assets für dieses Tutorial wurden von shareicon.net heruntergeladen

.

Treffen Sie den Vuforia Chef

Dazu müssen wir die virtuelle Pizza auf dem Tracker-Bild anzeigen lassen, das wir in der realen Welt haben. Nachdem Sie die Füllung zur Bestellung hinzugefügt haben, können Sie die Pizza physisch "servieren" und sie aus der Sichtweite der Kamera entfernen ...

Aber alles hat seine Zeit. Zuerst müssen Sie die Hauptkamera durch die AR-Kamera ersetzen. Entfernen Sie die Hauptkamera aus der Szene und klicken Sie mit der rechten Maustaste in die Hierarchie .

Fügen Sie dann Vuforia -> AR Camera hinzu . Dies öffnet dieses Fenster:


Klicken Sie auf Importieren und warten Sie, bis das Vuforia-Paket in das Projekt importiert wurde. Es werden einige Dateien hinzugefügt.


Sie können die neuen Dateien in den Ordnern Editor und Streaming Assets ignorieren. Dies sind nur Vorlagen; Die benötigten Dateien sind im Projekt enthalten.

Der Vuforia- Ordner enthält alle Prefabs und Skripte, die von der von uns verwendeten Vuforia-Plattform verwendet werden.

Erwähnenswert ist auch die VuforiaConfiguration- Datei im Ordner Resources . Diese Datei wurde hinzugefügt, da für die Entwicklung der Vuforia-Anwendung eine Lizenz erforderlich ist. Wenn Sie möchten, können Sie jedoch eine kostenlose Entwicklerlizenz für das Vuforia Developer Portal erwerben.

Hinweis: Wenn Ihr Projekt keinen App-Lizenzschlüssel hat, finden Sie ihn in der README-Datei. Kopieren Sie die Zeile in das Inspektorfeld der VuforiaConfiguration- Datei.

Jetzt, da wir die AR-Kamera in der Szene haben, bleibt nur noch eines zu tun - Augmented Reality einschalten!

Gehen Sie zu Bearbeiten -> Projekteinstellungen -> Player . Scrollen Sie nach unten zu den XR-Einstellungsoptionen und stellen Sie sicher, dass das Kontrollkästchen Vuforia Augmented Reality Supported aktiviert ist.

Klicken Sie in den Play Editor und grüßen Sie sich selbst!


Hinweis: Wenn Sie auf Wiedergabe geklickt haben und der Bildschirm „Vuforia-Initialisierung fehlgeschlagen“ angezeigt wird, starten Sie Unity neu. Dies ist ein zufälliger Fehler, der nur auf einigen Systemen auftritt.

Einführung in die Mustererkennung

Sich selbst zu bewundern ist natürlich großartig, aber wollten wir nicht ein Pizzaspiel machen?

Standardmäßig arbeitet Vuforia mit der Bilderkennung . Die Mustererkennung, auch Tracker-Erkennung oder Bildverfolgung genannt, ist ein Prozess, bei dem eine Kamera ein vordefiniertes Bild erkennt und weiß, was damit zu tun ist, z. B. Inhalte darüber zu rendern. Dies funktioniert am besten, wenn das Tracking-Bild irgendwie mit dem Inhalt übereinstimmt, z. B. funktionieren Grundrisse für das Rendern von Gebäuden gut über dem Bild mit dem Gebäude.

So funktioniert es: Es ist sehr wichtig, ein Bild von guter Qualität für die Verfolgung auszuwählen. Wenn Sie Vuforia verwenden, können Sie das ausgewählte Bild in das Entwicklerportal hochladen, um die Qualität der Nachverfolgung zu überprüfen. Dies muss vor Beginn der Entwicklung erfolgen. Das Entwicklerportal weist dem Bild eine Bewertung zu, zeigt aber vor allem seine „charakteristischen Punkte“ an. Damit der Tracker gut ist, sollten diese charakteristischen Punkte (Merkmalspunkte) dicht über das Bild verteilt sein und keine sich wiederholenden Muster enthalten. Zur Laufzeit sucht die Kamera nach diesen charakteristischen Punkten, um ihre Position relativ zum Bild zu berechnen.

Für dieses Tutorial sind die Bild- und Tracking-Datenbank bereits konfiguriert. Das Bild der Pizza befindet sich im zuvor heruntergeladenen Materialordner. Im Idealfall ausdrucken. Oder Sie können es auf einem digitalen Gerät öffnen und dann der Kamera „zeigen“. So sieht das Bild in der Vuforia Tracker-Datenbank aus:


Wie Sie sehen können, sind die charakteristischen Punkte gut verteilt. Es ist auch Pizza, was praktisch ist!

Hinzufügen von Bildzielen zur Szene

Es ist Zeit, die Magie zu machen! Wir werden virtuelle Pizza über unserer Pizza erscheinen lassen. Verwenden Sie erneut das Menü Erstellen in der Hierarchie und wählen Sie Vuforia -> Bild .

Jetzt haben wir ein Image Target GameObject in der Szene. Schauen Sie sich dieses Ziel im Inspektor an und Sie werden mehrere Komponenten sehen. Die wichtigsten sind das Image- Zielverhalten und der standardmäßige verfolgbare Ereignishandler . Wir werden den zweiten Teil später genauer untersuchen. Stellen Sie jedoch vorerst sicher, dass die Optionen für die Dropdown-Liste Bildzielverhalten wie folgt konfiguriert sind:

• Die Datenbank ist auf RW_ItsaPizza eingestellt
  
• Bildziel auf PizzaClipArt eingestellt

Erinnern Sie sich an die Dateien, die zuvor zu dem Projekt hinzugefügt wurden und die ich ignorieren wollte? Du hast sie gefunden! Vuforia fügt mehrere Image Target-Beispieldatenbanken hinzu, damit wir mit der Entwicklung beginnen und sie für Beispiele verwenden können, z. B. die von uns verwendete, die bereits zu den Materialien hinzugefügt wurden.

Hinweis: Der Pizza-Tracker ist das einzige Bildziel in Ihrer Datenbank. Es können jedoch Hunderte von Bildern in einer Datenbank vorhanden sein. Darüber hinaus können mehrere Datenbanken in einer Anwendung vorhanden sein.

Nachdem wir die AR-Kamera und den Image Tracker in der Szene konfiguriert haben, haben wir alles, was Sie brauchen, damit Augmented Reality funktioniert! Klicken Sie im Editor auf die Schaltfläche Wiedergabe und platzieren Sie das gedruckte Bild vor der Kamera.


Wir haben Pizza!

Anhängen von Spielobjekten an Tracker als untergeordnete Objekte

Die Pizza ist etwas klein, klebt aber fest am Tracker-Image. Sie können auch feststellen, dass die Pizza in der Luft hängt, wenn Sie das verfolgte Bild entfernen.

Tatsache ist, dass Vuforia die Position der AR-Kamera in der Szene aktualisieren kann, während die Webcam den Bild-Tracker sehen kann. Wenn Sie dies in Aktion sehen möchten, konfigurieren Sie den Unity-Editor so, dass sowohl das Spiel- als auch das Szenenfenster gleichzeitig sichtbar sind. Wählen Sie dann AR-Kamera aus und klicken Sie auf Wiedergabe.


Wie kann man Pizza richtig verhalten, wenn die Kamera funktioniert? Wählen Sie ImageTarget in der Hierarchie aus. Sie werden sehen, dass der Maßstab auf jeder Achse 10 beträgt. Dies wird von der Komponente Image Target Behavior gesteuert. Im erweiterten Abschnitt können Sie sehen, dass der Parameter Width den Wert 10 hat . Es wurde festgelegt, als das Bild auf die Vuforia Developer-Website hochgeladen wurde.

Hinweis: Verstehst du nicht, warum Image Target in diesem Tutorial auf Breite 10 eingestellt wurde? Wenn die Größe für die Anwendung kein wesentlicher Faktor ist, erhöht die Einstellung der Kamera auf 10 die Wahrscheinlichkeit der Verfolgung, während die Position des Inhalts zwischen der nahen und der fernen Ebene der AR-Kamera gut positioniert wird. Manchmal ist es jedoch notwendig, dass Augmented Reality einen bestimmten Umfang hat. In diesem Fall müssen Sie die Größe des Image-Trackers so einstellen, dass sie den physischen Maßen beim Hochladen auf das Entwicklerportal entspricht.

Wählen Sie nun GameObject Pizza in der Hierarchie . Ziehen Sie es auf ImageTarget , um es zu einem untergeordneten Element zu machen. Die Skala ändert sich zu (X: 0.1, Y: 0.1, Z: 0.1) . Stellen Sie die Werte (X: 1, Y: 1, Z: 1) und verschieben Sie die Position entlang der Y- Achse auf 0.01 . Dank dessen wird Pizza ImageTarget entsprechen .


Drücken Sie erneut auf Wiedergabe , und Sie sehen, dass sich die Pizza oben auf dem Bild befindet und auch verschwindet, wenn das Bild aus dem Rahmen verschwindet.

Erkunden von DefaultTrackableEventHandler

Dieses Verhalten wird dem DefaultTrackableEventHandler des ImageTarget übernommen . Öffnen Sie das Skript und zeigen Sie es an.

Das Skript ist gut kommentiert, aber es lohnt sich, einige Aspekte zu beachten:

• Die Start- Funktion registriert dieses Skript als Ereignishandler für das TrackableBehaviour (in diesem Fall ImageTargetBehaviour ).
• OnDestroy entfernt diesen Link.
• OnTrackableStateChanged ist die wichtigste Funktion. Ihr Code sagt, was passieren soll, wenn sich der Tracking-Status ändert.
• OnTrackingFound und OnTrackingLost werden von OnTrackableStateChanged aufgerufen . In DefaultTrackableEventHandler schalten sie die Renderer- , Collider- und Canvas- Komponenten eines untergeordneten Elements um .

Wenn die Kamera ein Bild erkennt, bewegt sie nicht mehr nur die AR-Kamera . Sie befiehlt GameObject Pizza außerdem , alle Renderer- Komponenten einzuschalten. Wenn das Bild von der Kamera verschwindet, befiehlt er erneut, sie auszuschalten.


Verdauen Sie diese Informationen vorerst.

Erstellen Sie Ihre eigenen Tracking-Aktionen

Es ist Zeit, etwas mit diesen Informationen zu tun!

Entfernen Sie die DefaultTrackableEventHandler- Komponente aus ImageTarget . Fügen Sie dann den PizzaTrackableEventHandler hinzu , der sich im Ordner Scripts befindet . Öffnen Sie dann PizzaTrackableEventHandler . Dies ist ein Klon von DefaultTrackableEventHandler , aber der Code in OnTrackingFound und OnTrackingLost wurde gelöscht - Sie müssen dieses Problem lösen!

Das Aktivieren und Deaktivieren von Renderer- Komponenten ist in fast jeder AR-Anwendung praktisch. Lassen Sie uns diesen Code also zurückerhalten. Wenn Sie nicht weiterkommen , können Sie es aus dem DefaultTrackableEventHandler kopieren oder unter dem Spoiler unten finden.


Wir sind bereit, dieses Projekt in ein Spiel in Augmented Reality zu verwandeln!

Schauen Sie sich die Benutzeroberfläche an und finden Sie die Schaltfläche, die der Spieler drücken muss, um seine Pizza fertigzustellen.


Wie Sie sehen können, wird Event GameManager.CompleteOrder() aufgerufen, wenn eine Taste gedrückt GameManager.CompleteOrder() . Anstatt den Spieler zu zwingen, den Knopf zu drücken, können Sie sicherstellen, dass er Pizza „serviert“ hat, um die Bestellung abzuschließen (er hat den Tracker aus der Sichtweite der Kamera verschoben).

Fügen Sie zu Beginn von PizzaTrackableEventHandler ein UnityEvent hinzu , das aufgerufen werden soll, wenn Image die Verfolgung verliert.

 using Vuforia; using UnityEngine; using UnityEngine.Events; public class PizzaTrackableEventHandler : MonoBehaviour, ITrackableEventHandler { public UnityEvent OnTrackingLostEvent; ... 

Rufen wir nun das Ereignis in der OnTrackingLost- Methode auf:

 protected virtual void OnTrackingLost() { var rendererComponents = GetComponentsInChildren<Renderer>(true); // Enable rendering: foreach (var component in rendererComponents) { component.enabled = false; } //Trigger our event OnTrackingLostEvent.Invoke(); } 

Dies macht PizzaTrackableEventHandler flexibler, da wir jetzt die Ausführung aller Aktionen festlegen können, wenn das Tracking verloren geht. Speichern Sie den PizzaTrackableEventHandler , kehren Sie zum Unity-Editor zurück und warten Sie , bis die Kompilierung abgeschlossen ist. Wenn es endet, muss GameManager.CompleteOrder() aufgerufen werden, wenn der Tracking-Pizza-Tracker verloren geht. Deaktivieren oder entfernen Sie schließlich CompleteOrderButton in der Benutzeroberfläche.


Speichern Sie die Szene, klicken Sie auf Wiedergabe und servieren Sie Pizza!

Wohin als nächstes gehen

Herzlichen Glückwunsch, Sie haben das Tutorial abgeschlossen!

Ein Beispielprojekt kann hier heruntergeladen werden .

Weitere Informationen zum Entwickeln mit Vuforia in Unity finden Sie in der Vuforia Developer Library oder im Unity-Lernprogramm .

Vergessen Sie nicht, auf dem Vuforia-Portal ein Entwicklerkonto für sich selbst einzurichten. Sie können dort auch versuchen, mehrere verschiedene Tracker hochzuladen, um zu überprüfen, wie sie verfolgt werden.

Weitere Informationen finden Sie unter Virtuelle Schaltflächen . Die Vuforia-Website enthält Beispielmaterialien. Überprüfen Sie, ob Sie diese virtuellen Schaltflächen erstellen können, um die Benutzeroberfläche in einem Pizzaspiel zu ersetzen.

Überlegen Sie sich neue Ideen für Augmented Reality-Spiele. Vielleicht ist dies ein Kartenkampfspiel, bei dem Kreaturen direkt von den Karten springen? Was ist mit Tower Defense? Wo steuern Sie einen Kampfhubschrauber mit Ihrem Telefon?