Codierung für die HoloLens mit Unity 5 – Teil 7 – Erstellen eines einfachen HUD

Codierung für die HoloLens mit Unity 5 – Teil 7 – Erstellen eines einfachen HUD

Eines der wohl bekanntesten Elemente der Augmented Reality ist ein HUD – das ist ein Heads Up Display. Wenn Sie ein FPS-Computerspiel gespielt haben, kennen Sie dies als den Bereich des Bildschirms, der Ihre Gesundheit, Ihren Punktestand oder die Anzahl der Leben anzeigt, die Sie noch im Spiel haben.

Das ist nicht wirklich ein Hologramm als solches, aber es ist immer noch etwas, das wir für die HoloLens entwickeln können. Der Schlüssel liegt darin sicherzustellen, dass die von der HoloLens gerenderten Artefakte in derselben Position vor Ihnen bleiben – und im Wesentlichen bedeutet es, diese Artefakte zu untergeordneten Objekten der Kamera zu machen.

Sehen wir uns das genauer an.

Ein Objekt an einem Ort aufbewahren

In den folgenden Schritten demonstriere ich das Prinzip, ein Objekt an einem Ort zu halten – später sehen wir uns an, wie Text gerendert wird.

Erstellen Sie zunächst ein neues Projekt in Unity für die HoloLens (wie das geht, habe ich hier bereits beschrieben).

Klicken Sie als Nächstes mit der rechten Maustaste auf das Hauptkamera-Objekt in der Hierarchie. Fügen Sie ein neues Cube GameObject hinzu.

Ändern Sie die Position dieses Würfelobjekts so, dass es sich 2 m vor Ihnen befindet, und skalieren Sie es auf 0,1 seiner ursprünglichen Größe. Dies sollte ein weißer Würfel sein, der 2 m vor der Kamera steht und eine Seitenlänge von etwa 10 cm hat.

Wenn Sie dieses Projekt nun bauen und auf dem Emulator bereitstellen, sehen Sie einen White Cube wie oben beschrieben. Wenn Sie versuchen, sich im Emulator zu bewegen, passiert (anscheinend) nichts. Dies liegt daran, dass sich der Würfel in einer statischen Position vor der Kamera befindet, sodass sich der Würfel mit Ihnen bewegt, obwohl Sie sich bewegen.

Lassen Sie uns dies beweisen, indem wir ein weiteres Objekt hinzufügen. Fügen Sie dieses Mal einen weiteren Würfel zum Hauptbereich Hierarchie hinzu, jedoch nicht als untergeordnetes Element des Kameraobjekts. Machen Sie es 2 m vor sich und 1 m nach links, ändern Sie die Größe auf eine Skala von 0,1 und fügen Sie ein Material hinzu, um den Würfel rot zu färben (ich schreibe hier darüber, wie man die Farbe eines Objekts ändert).

Erstellen Sie erneut dieses Projekt, stellen Sie es im Emulator bereit und versuchen Sie, sich zu bewegen. Dieses Mal können Sie sich um den roten Würfel herum umsehen und Ihre Position relativ dazu bewegen, aber der weiße Würfel bleibt an der gleichen Stelle.

Wenn Sie eine HoloLens haben, versuchen Sie es mit der Bereitstellung auf der HoloLens und Sie können dies deutlicher sehen – während Sie um den roten Würfel herumgehen können, bleibt der weiße Würfel ruhig vor Ihnen.

Ein nützlicheres Beispiel

Einen weißen Würfel als HUD zu haben ist also nicht sehr nützlich – aber das sollte nur zeigen, wie man ein Objekt in einer statischen Position vor sich hält. Sehen wir uns nun an, wie wir Text zu unserem HUD hinzufügen.

Öffnen Sie das HUD-Projekt erneut und entfernen Sie die weißen und roten Würfel, die wir im letzten Schritt erstellt haben.

Fügen Sie nun ein Canvas-Objekt als untergeordnetes Objekt der Hauptkamera hinzu – dies ist verfügbar, indem Sie mit der rechten Maustaste auf die Hauptkamera klicken, UI aus dem Kontextmenü auswählen und dann Canvas aus dem Flyout-Menü auswählen.

  • Positionieren Sie die Leinwand so, dass sie 1 m vor Ihnen liegt – ändern Sie also die Z-Position auf 1.
  • Ändern Sie die Breite auf 460 und die Höhe auf 280.
  • Ändern Sie die Skalierung auf 0,001 für die X-, Y- und Z-Achse.
  • Ändern Sie außerdem die dynamischen Pixel pro Einheit in der Canvas Scaler-Komponente von 1 auf 10 (dadurch wird der Text, den wir später hinzufügen, weniger verschwommen).

Fügen Sie als Nächstes ein Text-GUI-Objekt als untergeordnetes Element dieses Canvas-Objekts hinzu (dies ist auch über dasselbe UI-Menü verfügbar).

  • Positionieren Sie dies so, dass es sich oben links auf der Leinwand befindet, indem Sie die Optionen Absatz -> Ausrichtung verwenden.
  • Ändern Sie den Text in „Oben links“.
  • Ändern Sie die Schriftart in 14.
  • Ändern Sie die Farbe so, dass sie unverwechselbar ist. Ich habe in meinem Beispiel Grün verwendet.
  • Stellen Sie sicher, dass die Positionen in der X-, Y- und Z-Achse alle Null sind und dass die Skalen alle auf 1 eingestellt sind.
  • Vergewissern Sie sich schließlich in der Rect Transform-Komponente des Textobjekts, dass das Objekt so eingestellt ist, dass es sich sowohl in vertikaler als auch in horizontaler Richtung dehnt.

Erstellen Sie jetzt Ihr Projekt und stellen Sie es dem Emulator bereit.

Dieses Mal sollten Sie einen grünen Text in der oberen linken Ecke Ihres Sichtfelds sehen.

Sie können dies noch etwas weiter ausführen, wie ich im Bild unten gezeigt habe, wo Sie Text an verschiedenen Positionen auf der Leinwand ausrichten können.

Dies ist eine sehr leistungsfähige Technik – Sie können Skripte verwenden, um diesen Text abhängig von Aktionen in Ihrer Umgebung anzupassen. Außerdem sind Sie nicht darauf beschränkt, nur Textobjekte zu verwenden – Sie können ein Bild oder etwas anderes verwenden.

Hoffentlich ist dies eine nützliche Inspiration für die Erstellung eines HUD für Ihre HoloLens.