HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

0 Shares

Wir haben mit unserem Systemmanager in der vorherigen Lektion unserer Serie zum Erstellen dynamischer Benutzeroberflächen begonnen. Um jedoch dorthin zu gelangen, müssen wir neben den eigentlichen Transformations-, Rotations- und Skalierungsobjekten Objekte auf verschiedene Weise aus Code erstellen und Delegaten einrichten und Ereignisse und verwenden Sie die Oberfläche eines Objekts, um unsere Toolset-Platzierung zu informieren.

Diese Reihe ist groß und breit gefächert in Ideen und Ansätzen. Unser Endspiel besteht darin, eine Reihe von Werkzeugen zu erstellen, mit denen Objekte in unserem holographischen Raum einfach mit einem Blick und einem Lufthahn transformiert, gedreht und skaliert werden können. Unser Ziel ist es, Tools zu erstellen, die sich natürlicher anfühlen und weniger Aufwand erfordern als das, was wir in den letzten 20 Jahren auf 2D-Bildschirmen verwendet haben – um den aktuellen Paradigmen der grafischen Benutzeroberfläche zu entkommen.

Vorher: Erstellen einer dynamischen Benutzeroberfläche für die HoloLens, Teil 2 (Der Systemmanager)

In dieser Anleitung wird erläutert, wie Sie den Blick und den Fokus des Benutzers nutzen können, um Änderungen an unserem System vorzunehmen. Wir werden auch einige Grundlagen der Renderer-Komponente und ein wichtiges Element in Bezug auf diese Komponente behandeln: Materialien.

Lassen Sie uns mit der kleinen Präambel gleich hineinspringen. Wir werden die wirklich leckeren Stücke kauen, wenn sie dort ankommen.

Schritt 1: Erstellen Sie die Bounding Box-Klasse

Unsere Bounding-Box-Klasse zeichnet das umgebende Netz für unsere Benutzeroberfläche. Wir werden es als Indikator für den Benutzer verwenden, dass ein Objekt ausgewählt oder fokussiert ist.

Erstellen Sie zunächst eine Skripte Ordner in unserer Projektansicht, indem Sie mit der rechten Maustaste in die Ansicht klicken, “Erstellen” und dann “Ordner” auswählen und schließlich den Ordner benennen Skripte.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

Ziehen Sie die NRSRManager.cs Datei aus dem Hauptordner in unsere neu erstellte Skripte Mappe. Wenn dieser Ordner in unserer Projektansicht geöffnet ist, klicken Sie erneut mit der rechten Maustaste, klicken Sie auf “Erstellen” und dann auf “C # -Skript”. Nennen Sie diese Datei BoundingBox und doppelklicken Sie darauf.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

Eine Sache, die Microsoft mit den Tools für HoloLens und Windows Mixed Reality wirklich gut gemacht hat, ist, es Entwicklern einfach zu machen, die verschiedenen Formen der Eingabe auf diesen Geräten zum Laufen zu bringen. Wie Sie gleich sehen werden, sind nur wenige Codezeilen erforderlich, um die HoloLens dazu zu bringen, mit Objekten in Unity zu interagieren.

Alles beginnt mit einem Schnittstelle.

Schritt 2: Richten Sie die Schnittstelle ein

Schnittstellen sind etwas schwer zu erklären. Nicht zu verwechseln mit einer Benutzeroberfläche. Schnittstellen sind ein Weg, um das Fehlen mehrerer Vererbungen in C # zu umgehen. Sie implementieren keinen Code. Sie listen nur Methoden und die zugehörigen Signaturen auf.

Um dies zu verdeutlichen, werden wir eine Schnittstelle aus dem MRTK namens IFocusable verwenden. Wenn Sie diese Schnittstelle aufrufen, sehen Sie genau das.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

Wie Sie sehen können, enthält die Schnittstelle wirklich keinen Code, nur ein paar leere Methodenaufrufe. Wenn Sie eine Schnittstelle implementieren, stimmen Sie, wie viele zu diesem Thema sagen werden, einem Vertrag zu. Sie stimmen zu, diese Methodenaufrufe durchzuführen, was wir jetzt tun werden.

Erstens in unserem BoundingBox Klasse, fügen Sie in der Klassendeklarationszeile ein Komma nach Monoverhalten und dann das Wort IFocusable. Darunter wird eine Fehlerzeile angezeigt. Dies liegt daran, dass wir noch keinen Zugriff auf diese Schnittstelle haben.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

Klicken Sie auf die Glühbirne und dann auf “using HoloToolkit.Unity.InputModule;”

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

Das Wort IFocusable wird gelb, hat aber immer noch eine Fehlerzeile darunter. Dies liegt daran, dass wir zwar jetzt Zugriff auf die Schnittstelle haben, diese jedoch noch nicht implementiert haben.

Klicken Sie erneut auf die Glühbirne. Wählen Sie diesmal die Option “Schnittstelle implementieren”.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

Es werden zwei Methoden angezeigt. Dies sind zufällig die gleichen Methoden, die wir in der Schnittstellendeklaration gesehen haben.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

Visual Studio fügt das hinzu neue NotImplementedException () auslösen; die Sie ohne Probleme löschen können. Wenn Projekte groß werden, können diese Ausnahmen hilfreich sein, um herauszufinden, ob etwas vergessen wurde, dies ist jedoch nicht erforderlich.

Schritt 3: Fügen Sie der Szene einige Objekte hinzu

Bevor wir uns auf Objekte konzentrieren und sehen, wie sie sich ändern, benötigen wir einige Objekte in der Szene, mit denen wir arbeiten können. Da ich möchte, dass dies mit jedem Objekt funktioniert, das in die Szene eintritt, nicht nur mit Standardprimitiven, dachte ich mir, ich würde zufällig ein kostenloses Modell aus dem Unity Asset Store holen.

Mach eine schnelle Suche nach Uhrfrei und klicken Sie auf die Schaltfläche “Download”.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

Klicken Sie nach dem Herunterladen auf die Schaltfläche “Importieren”.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

Stellen Sie mit dem Inspector die Position der Uhr unter ein Verwandeln zu:

Position: X (0), Y (0), Z (3) Drehung: X (0), Y (180), Z (0) Rahmen: X (4), Y (4), Z (4)

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

Erstellen Sie dann zwei weitere Objekte und setzen Sie sie zu beiden Seiten der Uhr ab.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

Schritt 4: Erstellen Sie das Material

Materialien sind ein Asset-Typ, der auf Objekte angewendet wird. Sie enthalten normalerweise mindestens eine Bitmap-Grafik in einer Form namens a Texturund einen algorithmischen Befehlssatz namens a Shader. Der Zweck eines Materials besteht darin, dem Motor genau mitzuteilen, wie er gerendert werden soll. Farbtönung, Textur und Lichtreaktion sind einige Möglichkeiten, wie das Material den Objekten, auf die sie angewendet werden, hilft, auf das System zu reagieren.

Jetzt müssen wir das Material erstellen, mit dem wir reagieren, wenn wir uns auf ein Objekt konzentrieren. Klicken Sie erneut mit der rechten Maustaste in die Fenster “Assets”, klicken Sie auf “Erstellen” und dann auf “Material”. Benennen Sie dieses neue Asset BoundingBoxMat.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

Während der Standard-Unity-Shader für unsere Zwecke gut funktioniert, ist der MRTK-Shader so konzipiert, dass er für ein mobiles Gerät etwas schnell ist. In diesem Sinne klicken Sie im Inspektor auf die Dropdown-Liste mit der Aufschrift “Standard”. Wählen Sie “HoloToolkit” und dann “Schnell konfigurierbar”.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

Klicken Sie im Abschnitt “Grundtextur und Farbe” neben dem Wort “Albedo” auf das Kontrollkästchen, um die Farbe für unser Material zu aktivieren. Klicken Sie dann auf das weiße Kästchen rechts neben dem Kontrollkästchen.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

Ändern Sie im angezeigten Farbwähler die RGBA-Elemente in Rot: 90, Grün: 90, Blau: 200, Alpha: 50 (siehe Abbildung unten).

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

Nachdem dies aus dem Weg geräumt ist, werden wir uns nun damit befassen, wie wir dieses Material verwenden können, wenn wir uns auf ein Objekt in der Szene konzentrieren.

Schritt 5: Nehmen Sie einige Änderungen an der NRSRManager-Klasse vor

Da die Objekte, auf die wir uns konzentrieren werden, nicht unbedingt diejenigen sind, die wir erstellt haben – da wir versuchen, ein offenes System zu erstellen -, müssen wir unseren Manager verwenden, um einen Verweis auf unser Material zu speichern. Auf diese Weise kann das Material an Klassen übergeben werden, die zur Laufzeit zugewiesen werden. Es gibt zwar verschiedene Ansätze, die wir verfolgen könnten, aber dies schien am besten zum Schema zu passen.

Alles was wir in unserem tun müssen NRSRManager deklariert eine Variable “public Material BoundingBoxMat”; unter den anderen Variablen, die wir im vorherigen Kapitel deklariert haben, wie im Bild unten.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

Jetzt müssen wir unsere BoundingBox-Klasse zur Laufzeit zu jedem Objekt hinzufügen, das in die Szene eintritt. Zum Glück sind wir dafür bereit. Wir müssen einfach zu unserem scrollen FixedUpdate () Methode in der NRSRManger und fügen Sie die hervorgehobenen Codezeilen unten hinzu.

Dieser Codeblock:

Vergleicht unsere Gesamtzahl der Objekte in der Szene mit der Gesamtzahl des vorherigen Frames. Filtert die Objekte, die wir benötigen. Durchläuft die Sammlung von Objekten und prüft, ob jedes der Objekte bereits eine BoundingBox-Komponente enthält. Wenn das Objekt keine BoundingBox hat, fügt es diese Komponente dem Objekt hinzu.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

Also haben wir den materiellen Verweis auf die hinzugefügt NRSRManager Mit diesem Manager wurde jedem gültigen Objekt die BoundingBox-Komponente hinzugefügt.

Schritt 6: Fügen Sie das Material zur Laufzeit hinzu

Für den letzten Abschnitt dieser Lektion erhalten wir einen Verweis auf unser Material aus dem NRSRManager und erstellen Sie einen Ort zum Speichern des aktuellen Materials des Objekts. So können wir es ersetzen, wenn der Benutzer wegschaut.

Fügen Sie unserer leeren BoundingBox-Klasse die folgenden zwei Materialdeklarationen hinzu:

Material BoundingBoxMat Material currentMat

Dann in der Start() Methode, fügen Sie die Zeile BoundingBoxMat = NRSRManager.Instance.BoundingBoxMat;.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

Jetzt müssen wir zwei einfache Methoden erstellen. Geben Sie den folgenden Code für das ein ObjectFocused () Methode. Hier erhalten wir einen Verweis auf die Renderer-Komponente und eine Kopie des aktuellen Materials in currentMat. Und dann die zuweisen BoundingBoxMat an den Renderer.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

Geben Sie außerdem Folgendes ein ObjectUnfocused () Methode. Wieder erhalten wir einen Verweis auf den Renderer und dieses Mal wird das gespeicherte Material wieder seinem Objekt zugewiesen.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

Schließlich müssen wir diese beiden neuen Methoden unter Verwendung der Schnittstellenaufrufe von früher aufrufen.

Hinzufügen ObjectFocused (); auf die OnFocusEnter () -Methode. Hinzufügen ObjectUnFocused (); auf die OnFocusExit () -Methode.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

Und wir sind fertig! Erstellen, kompilieren und bereitstellen, und Sie werden so etwas wie das sehen, was wir hier in den folgenden Bildern haben. Wenn Sie ein Objekt betrachten, sollte es vor Ihren Augen das Material wechseln.

HoloLens Dev 101: Erstellen einer dynamischen Benutzeroberfläche, Teil 3 (Fokus & Materialien)

In der nächsten Lektion werden wir unseren Begrenzungsrahmen erstellen und dabei die Größe und Form des fokussierten Objekts verwenden, um die Größe des neu erstellten Objekts zu ermitteln.

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

0 Shares