HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 5 (Erstellen der UI-Elemente)

0 Shares

Okay, beruhige dich und atme ein! Ich weiß, dass das Kapitel zur Objekterstellung viel Code war. Ich werde euch allen einen kleinen Aufschub geben; Dieser Abschnitt sollte zumindest im Vergleich schön und einfach sein.

In dieser Serie zum Erstellen dynamischer Benutzeroberflächen erstellen wir schließlich ein Werkzeug, das direkt auf einem Objekt angezeigt wird, das beweglich, skalierbar oder drehbar ist. Es bleibt hinter dem Blick des Benutzers zurück, so dass es nicht immer direkt vor dem Benutzer ist, was ärgerlich wäre. Das Werkzeug verschwindet vollständig, wenn der Benutzer den Blick vom Objekt abwendet.

In dieser Lektion werden wir die eigentlichen UI-Elemente für unseren neuen Werkzeugsatz erstellen. Wir könnten etwas Aufwändiges für unser UI-System entwickeln, und obwohl wir ihm wahrscheinlich einige coole Verhaltensweisen hinzufügen werden, möchten wir es vorerst einfach halten. Wir werden nur das Fertighaus erstellen, das unsere Basis-Benutzeroberfläche für dieses Projekt sein wird.

Vorher: Erstellen einer dynamischen Benutzeroberfläche für die HoloLens, Teil 4 (Erstellen von Objekten aus Code)

Schritt 1: Finden Sie UI-Elemente

In erster Linie benötigen wir einige Symbole, um Bewegung, Skalierung und Rotation zu veranschaulichen. Glücklicherweise gibt es im Unity Store ein kostenloses Asset Pack namens 139 Vektorsymbole das hat ein paar solche Gegenstände, die gut ausreichen werden.

Öffnen Sie den Unity Asset Store-Browser und geben Sie ein 139 in die Forschungsleiste.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 5 (Erstellen der UI-Elemente)

Klicken Sie auf die Schaltfläche “Herunterladen” und klicken Sie erneut darauf, sobald die Schaltfläche “Importieren” angezeigt wird.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 5 (Erstellen der UI-Elemente)

Wenn das Fenster “Unity-Paket importieren” angezeigt wird, haben Sie hier einige Möglichkeiten.

Klicken Sie auf die Schaltfläche “Importieren”, um alle zu importieren. Klicken Sie auf die Schaltfläche “Importieren”. Wenn alle importiert sind, löschen Sie alle außer den Dateien mit den Nummern 79-01, 35-01 und 37-01. Aktivieren Sie die Kontrollkästchen für die Dateien 79-01, 35-01 und 37-01 und klicken Sie auf “Importieren”.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 5 (Erstellen der UI-Elemente)

Sobald Sie die drei benötigten Dateien heruntergeladen haben, erstellen Sie eine Texturen Verzeichnis und legen Sie sie dort ab.

Schritt 2: Erstellen Sie ein UI-Fertighaus

Beginnen wir nun mit dem Aufbau unseres UI-Elements.

Klicken Sie im Hierarchiefenster auf “Erstellen” und wählen Sie “Leer erstellen”. Nennen Sie dann das neu erstellte Objekt “TransformUITools”. Stellen Sie sicher, dass die Position ist X: 0, Y: 0, und Z: 0.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 5 (Erstellen der UI-Elemente)

In der Texturen Ordner greifen Sie die 79-01 Datei und ziehen Sie es auf die neu erstellte TransformUITool Spielobjekt.

Bewegen Sie als nächstes 37-01 zum selben Objekt. Gefolgt von 35-01.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 5 (Erstellen der UI-Elemente)

Umbenennen 79-01 zu Bewegung und setzen Sie die Transformationseigenschaften auf:

Position: X: -0,5, Y: 0, Z: 0 Rahmen: X: 0,2, Y: 0,2, Z: 0,2

Wiederholen Sie diesen Vorgang für 37-01 , umbenennen in Rahmen und setzen Sie seine Koordinaten auf:

Position: X: 0, Y: 0, Z: 0 Rahmen: X: 0,2, Y: 0,2, Z: 0,2

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 5 (Erstellen der UI-Elemente)

Zum Schluss umbenennen 35-01 zu Drehen und stellen Sie seine Position und Skalierung auf ein:

Position: X: 0,5, Y: 0, Z: 0 Rahmen: X: 0,2, Y: 0,2, Z: 0,2

Und das ist mehr oder weniger das, was Sie sehen sollten. Sobald unsere Position und Skala für jeden festgelegt ist.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 5 (Erstellen der UI-Elemente)

Schritt 3: Machen Sie Texturen zu Schaltflächen

Damit dieses Tool erfolgreich ist, müssen wir eventuell mit den UI-Elementen interagieren, die als Schaltflächen betrachtet werden sollten.

Klicken Sie im Inspektor auf die Schaltfläche “Komponente hinzufügen” und geben Sie ein Box in das Suchfeld. Wählen Sie die angezeigte Option “Box Collider”. Stellen Sie in der angezeigten Komponente “Box Collider” folgende Größe ein:

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 5 (Erstellen der UI-Elemente)

Klicken Sie auf das Symbol “Einstellungen”, das kleine Zahnrad in der oberen Ecke des Box Collider Komponente und wählen Sie “Komponente kopieren”.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 5 (Erstellen der UI-Elemente)

Wählen Sie nun die Rahmen Unterobjekt und in der Sprite-Renderer Klicken Sie erneut auf das Symbol “Einstellungen”. Klicken Sie diesmal jedoch auf “Komponente als neu einfügen”.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 5 (Erstellen der UI-Elemente)

Wiederholen Sie den letzten Schritt auch für die Schaltfläche “Drehen”.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 5 (Erstellen der UI-Elemente)

Schritt 4: Fügen Sie ein paar Finishing Touches hinzu

Finde deinen BoundingBoxMat im Stammverzeichnis. Ein … kreieren Materialien Ordner und legen Sie es dort ab.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 5 (Erstellen der UI-Elemente)

Wenn unser Material noch ausgewählt ist, klicken Sie auf das Farbfeld, um das Fenster “Farbe” aufzurufen. Speichern wir unsere Farbe für das Material, um sie als Voreinstellung leicht nachschlagen zu können.

Gehen Sie nun zu unserer Schaltfläche “Verschieben”, wählen Sie sie aus und klicken Sie in der Komponente “Sprite Renderer” auf das Feld “Farbe”. Klicken Sie auf die soeben erstellte Voreinstellung. Wie Sie feststellen werden, passt diese Farbe auch mit mehr Alpha zu gut zu unserem Begrenzungsrahmen. Passen Sie die Farbe an:

Farbe: R: 90, G: 152, B: 255, A: 229

Dies scheint eine ziemlich komplementäre Farbe zu sein.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 5 (Erstellen der UI-Elemente)

Ein … kreieren Fertighäuser Mappe. Klicken Sie auf das “TranformUITool” -Objekt, das wir gerade per Drag & Drop in das Objekt verschoben haben Fertighäuser Mappe.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 5 (Erstellen der UI-Elemente)

Okay, wir haben ein einfaches UI-Element bereit. Als nächstes werden wir es in direktem Zusammenhang mit unserem Blick an das aktuell betrachtete Objekt anhängen.

Next Up: Erstellen einer dynamischen Benutzeroberfläche für die HoloLens, Teil 6 (Delegierte und Ereignisse)

0 Shares