Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Augmented Reality

Erstellen Sie ein Augmented Reality-Spiel im Pokémon GO-Stil mit Vuforia: Image Targets

by
Read Time:19 minsLanguages:
This post is part of a series called Create a Pokémon GO Style Augmented Reality Game With Vuforia.
Create a Pokémon GO Style Augmented Reality Game With Vuforia: Part 2
Tips and Tricks for Augmented Reality With Unity and Vuforia

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

In diesem Tutorial tauchen wir wieder in die Vuforia Augmented Reality (AR)-Bibliothek ein und erkunden eine ihrer interessantesten Ressourcen – das Image Target. Wir werden das Shoot the Cubes-Spiel, das wir in früheren Lektionen erstellt haben, erweitern und ein neues Level hinzufügen, in dem der Spieler seine Basis vor angreifenden Würfeln verteidigen muss.

Dieses Tutorial kann alleine abgeschlossen werden. Wenn Sie jedoch eine Einführung in AR mit Vuforia und Unity3D wünschen, lesen Sie die früheren Beiträge der Serie.

Bildziele

Jede Art von Bild kann ein Vuforia-Image Target sein. Je detaillierter und komplexer das Bild jedoch ist, desto besser wird es vom Algorithmus erkannt.

Viele Faktoren werden Teil der Erkennungsberechnung sein, aber grundsätzlich muss das Bild ein angemessenes Maß an Kontrast, Auflösung und Unterscheidungsmerkmalen aufweisen. Ein Foto mit blauem Himmel würde nicht sehr gut funktionieren, aber ein Bild von etwas Gras würde anmutig funktionieren. Image Targets können mit der Anwendung geliefert, über die Cloud in die Anwendung hochgeladen oder vom Benutzer direkt in der App erstellt werden.

Hinzufügen eines Ziels

Beginnen wir damit, unserem Unity-Projekt ein ImageTarget-Element hinzuzufügen.

Laden Sie zunächst die Kursinhalte über die Schaltfläche in der Seitenleiste herunter. Erstellen Sie dann in Ihrem Unity-Projekt eine neue Szene namens DefendTheBase: Wählen Sie im Projektfenster den Ordner Szenen aus und klicken Sie auf Erstellen > Szene. Öffnen Sie nun diese Szene und entfernen Sie alle Standardszenenobjekte aus der Hierarchie.

Als nächstes fügen wir ein Licht und eine Kamera hinzu. Klicken Sie auf Hinzufügen > Licht > Gerichtetes Licht, um ein gerichtetes Licht hinzuzufügen. Wählen Sie dieses neue Licht aus und stellen Sie Weicher Schatten als Option für den Schattentyp ein.

Ziehen Sie danach ein ARCamera-Objekt per Drag & Drop aus Vuforia > Prefabs. Wählen Sie das ARCamera-Objekt aus und legen Sie im Inspektorfenster den auf der Vuforia-Entwicklerseite erstellten App-Lizenzschlüssel fest (Anweisungen finden Sie im ersten Tutorial). Wählen Sie DEVICE_TRACKING für die World Center Mod aus.

Ziehen Sie schließlich ein ImageTarget per Drag & Drop in die Hierarchie von Vuforia > Prefabs.

Jetzt müssen wir eine Vuforia-Datenbank hinzufügen. Navigieren Sie zunächst zu https://developer.vuforia.com/target-manager. Klicken Sie auf Datenbank hinzufügen und wählen Sie einen Namen.

Es stehen drei Arten von Datenbanken zur Auswahl:

  1. Gerät: Die Datenbank wird auf dem Gerät gespeichert und alle Ziele werden lokal aktualisiert.
  2. Cloud: Datenbank auf den Vuforia-Servern.
  3. VuMark: Datenbank exklusiv für VuMark-Ziele. Es wird auch auf dem Gerät gespeichert.

Wählen Sie in diesem Fall die Option Gerät und klicken Sie auf Erstellen.

Wählen Sie die neue Datenbank aus, damit wir ihr Ziele hinzufügen können. Jetzt ist es an der Zeit, der Datenbank Ziele hinzuzufügen. Im Moment verwenden wir nur die Option Einzelbild.

Navigieren Sie zu den zuvor heruntergeladenen Dateien, wählen Sie ImageTarget1 und setzen Sie die Breite auf 1 und klicken Sie auf Hinzufügen. (Hinweis: Wenn Sie es vorziehen, Ihr eigenes Image-Target zu erstellen, lesen Sie zuerst die Anleitung.)

Vuforia DatabaseVuforia DatabaseVuforia Database

Jetzt können Sie die Datenbank herunterladen und Unity Editor als gewählte Plattform auswählen. Öffnen Sie die Datei und wählen Sie alle zu importierenden Elemente aus. Wir müssen auch unsere Unity-Szene vorbereiten, um das ImageTarget mit dieser von uns erstellten Datenbank zu erkennen.

Klicken Sie im Unity-Editor auf das ImageTarget-Objekt. Suchen und erweitern Sie zunächst das Image Target Behavior im Objektinspektor. Wählen Sie einen vordefinierten Typ aus. Wählen Sie das Image-Ziel, das wir zuvor für Database erstellt haben. Stellen Sie abschließend sicher, dass die Optionen Erweitertes Tracking aktivieren und Smart Terrain aktivieren beide deaktiviert sind.

Image Target settingsImage Target settingsImage Target settings

Das ImageTarget-Präfab besteht aus einer Reihe von Komponenten, darunter einige Skripte wie Image Target Behavior, Turn Off Behavior und Default Tracker Event Handler. Wenn Sie die Funktionsweise des Systems gründlich verstehen möchten, lesen Sie diese Skripte und versuchen Sie, ihre Beziehung zu anderen Komponenten zu verstehen.

Für dieses Tutorial werden wir jedoch nicht zu tief graben. Wir müssen uns nur auf den Standard-Tracker-Ereignishandler konzentrieren, der Anrufe empfängt, wenn sich der Tracking-Status des Bildziels ändert. Lassen Sie uns dieses Skript also als Grundlage verwenden, um unser eigenes Skriptverhalten zu erstellen.

Erstellen Sie eine Kopie dieses Skripts, die wir erweitern können. Wählen Sie zuerst Standard-Tracker-Ereignishandler, klicken Sie auf Optionen und wählen Sie Skript bearbeiten. Erstellen Sie nun eine Kopie des Skripts. Wenn Sie MonoDevelop verwenden, klicken Sie auf Datei > Speichern unter und speichern Sie es als ImageTargetBehavior im Ordner Scripts.

Das TargetBehaviorScript-Skript

Wir werden den Vuforia-Namespace in unserem Skript nicht benötigen. Entfernen Sie die Zeile „namespace Vuforia“ und die Klammern. Das bedeutet, dass wir explizit auf den Vuforia-Namespace verweisen müssen, wenn wir auf seine Klassen zugreifen möchten:

Die wichtigste Methode in dieser Klasse ist die Methode OnTrackableStateChanged, die Aufrufe empfängt, wenn das Bildziel vom Kameragerät gefunden oder verloren wird. Je nach Zielstatus ruft es OnTrackingFound oder OnTrackingLost auf, und wir müssen auch diese Methoden bearbeiten. Aber denken wir zuerst darüber nach, wie sich das Image-Ziel verhalten soll.

In diesem Spiel verteidigt der Benutzer eine Basis, die auf einem Bildziel erscheint. Betrachten wir die folgenden Spielmechaniken:

  • Sobald das Ziel vom System erkannt wird, erscheint die Basis und Feinde beginnen zu spawnen und fliegen im Kamikaze-Stil auf die Basis zu.
  • Jedes Mal, wenn ein Feind die Basis trifft, nimmt die Basis Schaden und der Feind wird zerstört.
  • Um das Spiel zu gewinnen, muss der Benutzer alle Feinde erschießen und zerstören, bevor die Basis zerstört wird.
  • Wenn das Bildziel verloren geht (von der Gerätekamera nicht mehr sichtbar ist), startet das Spiel einen Countdown-Timer. Wenn der Timer auf Null geht, ist das Spiel verloren. Solange das Ziel verloren ist, werden alle Feinde aufhören, sich auf die Basis zu nähern.

Daher müssen wir diese Spielmechanik zusätzlich zu dem anpassen, was wir im letzten Tutorial erstellt haben. Wir werden die Spawning-Logik des Feindes im nächsten Abschnitt mit einem leeren Objekt namens _SpawnController erstellen, wobei die gleiche Logik verwendet wird, die im ersten Teil des Spiels verwendet wurde.

Sehen wir uns zunächst die Logik zum Verfolgen von gefundenen Daten an.

Zurück im Unity-Editor können wir das Basisobjekt erstellen, das vom Spawn-Controller gespawnt wird.

Deaktivieren Sie zunächst für das ImageTarget-Objekt das Skript für den standardmäßigen nachverfolgbaren Ereignishandler.

Klicken Sie anschließend auf Komponente hinzufügen und wählen Sie das Zielverhaltensskript aus. Klicken Sie im Hierarchiebereich mit der rechten Maustaste auf ImageTarget und erstellen Sie einen neuen Cube namens "Base". Dieser Würfel sollte in das ImageTarget-Objekt eingefügt werden.

Stellen Sie sicher, dass in der Basis Box Collider und Mesh Renderer aktiviert sind.

Optional können Sie auch ein Plane-Objekt in das ImageTarget einfügen, indem Sie das zuvor in Vuforia eingereichte ImageTarget als Textur verwenden. Dies würde einen interessanten Effekt erzeugen, Schatten vom Ziel projizieren und ein reicheres Erlebnis schaffen.

Hierarchy and Image Target final settingsHierarchy and Image Target final settingsHierarchy and Image Target final settings

Das SpawnScript anpassen

Nun werden wir den im letzten Tutorial verwendeten _SpawnController anpassen. Speichern Sie die aktuelle Szene und öffnen Sie ShootTheCubesMain aus dem letzten Tutorial. Wählen Sie im Hierarchiebedienfeld den _SpawnController aus und ziehen Sie ihn in den Prefabs-Ordner, um ihn zu einem Unity-Prefab zu machen.

Speichern Sie diese neue Szene und öffnen Sie DefendTheBase erneut. Ziehen Sie _SpawnController aus dem Prefabs-Ordner in das Hierarchie-Panel. Klicken Sie bei ausgewähltem _SpawnController im Inspektorfenster auf Tag hinzufügen. Benennen Sie das neue Tag _SpawnController und wenden Sie es auf das Objekt an.

Wählen Sie im Projektfenster das Cube-Element im Prefab-Ordner aus und setzen Sie sein Tag wieder im Inspektor auf 'Enemy'.

Set Cubes tag to EnemySet Cubes tag to EnemySet Cubes tag to Enemy

Öffnen Sie schließlich den Ordner Scripts und öffnen Sie SpawnScript. Wir müssen dafür sorgen, dass sich dieses Skript an die geladene Szene anpasst.

Als Nächstes müssen wir zwei öffentliche Methoden erstellen, um Aufrufe von TargetBehaviorScript zu empfangen, wenn das Ziel gefunden oder verloren wird:

  • BaseOn (Vector3 basePosition) wird aufgerufen, wenn das Ziel von der Kamera gefunden und das Basisobjekt angezeigt wird. Es ändert die Spawnposition, startet den Prozess und informiert alle Würfel, die zuvor der Bühne hinzugefügt wurden, dass die Basis sichtbar ist.

  • Die BaseOff()-Methode wird verwendet, wenn das Ziel verloren geht. Es stoppt den Staging-Prozess und informiert alle Würfelelemente, dass die Basis verloren gegangen ist.

Die SetPosition (System.Nullable<Vector3> pos) verwendet die aktuelle Position des Ziels, um die X-, Y- und Z-Achsen des Objekts zu ändern, und kann auch einen null wert erhalten, wenn die geladene Szene ShootTheCubesMain ist.

InformBaseOnToCubes() und InformBaseOffToCubes() sind dafür verantwortlich, alle bereitgestellten Cubes über den aktuellen Basisstatus zu informieren.

Die Methoden SpawnLoop() und SpawnElement() verwenden fast dieselbe Logik wie das letzte Tutorial.

Die Feinde erschaffen

Jetzt müssen wir einige Feinde erstellen. Wir verwenden das Cube-Objekt, das wir im letzten Tutorial erstellt haben, und nehmen einige Änderungen an seinem Skript vor.

Fügen Sie im Ordner Prefabs ein Cube-Objekt zur Hierarchie hinzu. Wählen Sie dann das Objekt aus und bearbeiten Sie das CubeBehaviorScript.

Wir behalten in diesem Skript fast dieselbe Logik bei, jedoch mit den folgenden Unterschieden:

  • Der Cube verfolgt die Basis, wenn das Ziel von der Kamera gefunden wird.
  • Wenn der Cube die Basis trifft, zerstört er sich selbst und fügt der Basis etwas Schaden zu.
  • Das Skript muss den Namen der geladenen Szene kennen und sich entsprechend anpassen.

Wenn der Name der Szene DefendTheBase lautet, muss sie das Basisobjekt finden und sich darauf zubewegen.

Die CubeSettings() müssen sich auch entsprechend der geladenen Szene anpassen. Der Cube kreist für die DefendTheBase-Szene nur auf der y-Achse.

Wir werden der RotateCube()-Methode eine neue Logik hinzufügen. Die Würfelobjekte drehen sich um die Basis, während das Ziel sichtbar ist. Wenn das Ziel nicht sichtbar ist, drehen sie sich weiter um die Kamera, wobei dieselbe Logik wie im letzten Tutorial verwendet wird.

Um das Objekt in Richtung der Basis zu bewegen, müssen wir zuerst prüfen, ob die Basis vorhanden ist, und dann die Positionsschritte auf das Objekt anwenden.

Die Methode DestroyCube() ist dieselbe wie zuvor, aber jetzt fügen wir eine neue Methode hinzu – die Methode TargetHit (GameObject) – die aufgerufen wird, wenn die Basis getroffen wird. Beachten Sie, dass das in TargetHit() referenzierte BaseHealthScript noch nicht erstellt wurde.

Schließlich fügen wir die öffentlichen Methoden hinzu, die aufgerufen werden, wenn der Würfel einen Treffer erleidet, mit der Basis kollidiert oder wenn die Basis ihren Status ändert.

Kontrolle der Basisgesundheit

Die Feinde werden inszeniert und fliegen auf die Basis zu, aber sie verursachen keinen Schaden, wenn sie kollidieren – weder der Basis noch dem Feind. Wir müssen ein Skript erstellen, um auf Kollisionen zu reagieren und dem Bildschirm eine Gesundheitsleiste hinzuzufügen, damit der Benutzer weiß, wie gut es ihm geht.

Beginnen wir mit dem Hinzufügen der Gesundheitsleiste. Klicken Sie im Hierarchiebereich des Unity-Editors auf Erstellen > UI > Schieberegler. Der Hierarchie wird ein neues Canvas-Element hinzugefügt. Es enthält UI-Elemente, einschließlich des neuen Slider. Erweitern Sie die Canvas und wählen Sie den Schieberegler.

Ändern Sie den Namen des Schiebereglerelements in UIHealth. Erweitern Sie im Inspektor-Bedienfeld Rect Transform und setzen Sie Width auf 400 und Height auf 40. Setzen Sie Pos X auf -220, Pos Y auf 30 und Pos Z auf 0.

Erweitern Sie nun das Slider-Skript in der Hierarchie. Deaktivieren Sie die Option Interagierbar. Klicken Sie für Zielgrafik auf den kleinen „Punkt“ auf der rechten Seite und wählen Sie das Hintergrundbild aus.

  • Setzen Sie den Min-Wert auf 0 und den Max-Wert auf 100.
  • Wählen Sie Ganze Zahlen.
  • Wert auf 100 setzen.
UIHealth SettingsUIHealth SettingsUIHealth Settings

Erweitern Sie nun das Slider-Bedienfeld, um seine untergeordneten Elemente anzuzeigen: Hintergrund, Füllbereich und Grifffolienbereich.

  • Grifffolienbereich löschen.
  • Wählen Sie Hintergrund und stellen Sie seine Farbe auf einen dunkleren Grünton ein, z. B. #12F568FF.
  • Erweitern Sie Füllbereich, wählen Sie das Füllobjekt aus und legen Sie seine Farbe auf #7FEA89FF fest.

So sollte das Spielfenster mit der Gesundheitsleiste aussehen.

Game window with health barGame window with health barGame window with health bar

Das Basis-Health-Skript

Der Code ist sehr einfach; Es zieht nur den Schaden der Feinde von der Gesamtgesundheit der Basis ab. Sobald die Gesundheit Null erreicht, verliert der Spieler das Spiel. Außerdem wird der Basis eine Rotationsanimation hinzugefügt. Erstellen Sie ein neues C#-Skript namens MyBase.

Jetzt müssen wir das Skript hinzufügen und konfigurieren.

Wählen Sie die Basis in der Hierarchie aus, klicken Sie auf Komponente hinzufügen und fügen Sie eine Audioquelle hinzu. Ziehen Sie nun MyBase auf das Basiselement und erweitern Sie im Inspektorfenster MyBase. Wählen Sie einen Soundeffekt für die Explosion und schlagen Sie zu. Ich habe den im letzten Tutorial verwendeten Explosionsclip verwendet, aber Sie können gerne Ihren eigenen hinzufügen. Wählen Sie schließlich im Health Slider das UISlider-Element aus.

Base settingsBase settingsBase settings

Verteidigung der Basis

Unser neues Spielerlebnis ist fast fertig. Wir müssen nur ein paar Laser abfeuern, um unsere Basis zu verteidigen. Lassen Sie uns ein Skript für den Laser erstellen!

Ziehen Sie zuerst den _PlayerController aus dem Prefab-Ordner in die Hierarchie. Erweitern Sie _PlayerController und wählen Sie _LaserController. Suchen Sie im Inspektorfenster nach Laser Script und klicken Sie auf Bearbeiten.

Das einzige, was wir in diesem Skript ändern müssen, ist die Position des Lasers.

Das Spiel ausprobieren

Das war viel Arbeit, aber jetzt ist es an der Zeit, das Spiel zu spielen! Drucken Sie das Zielbild aus und versuchen Sie, Ihr Spiel auf Ihrem Telefon oder Tablet auszuführen. Viel Spaß damit und sehen Sie, ob Sie einige Möglichkeiten finden, das Spiel zu verbessern!

An dieser Stelle haben Sie ein gutes Verständnis dafür, wie das Vuforia-System funktioniert und wie es mit Unity verwendet wird. Ich gehe davon aus, dass Sie diese Reise genauso genossen haben wie ich. Bis bald!

Um mehr über Augmented Reality mit Vuforia und Unity zu erfahren, sehen Sie sich unseren Videokurs hier auf Envato Tuts+ an!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.