Schaltflächen — MRTK2

Eine Schaltfläche bietet dem Benutzer eine Möglichkeit, eine sofortige Aktion auszulösen. Es ist eine der grundlegendsten Komponenten in Mixed Reality. MRTK bietet verschiedene Arten von Schaltflächen-Prefabs.

Schaltflächen-Prefabs im MRTK

Beispiele für die Schaltflächen-Prefabs im MRTK/SDK/Features/UX/Interactable/Prefabs Ordner

Bild-/Grafikbasierte Schaltflächen der Unity-Benutzeroberfläche

• UnityUIInteractableButton.prefab
• PressableButtonUnityUI.prefab
• PressableButtonUnityUICircular.prefab
• PressableButtonHoloLens2UnityUI.prefab

Collider-basierte Schaltflächen

Das Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) basiert auf dem Interaktiven Konzept, um einfache Ui-Steuerelemente für Schaltflächen oder andere Arten interaktiver Oberflächen bereitzustellen. Die Baselineschaltfläche unterstützt alle verfügbaren Eingabemethoden, einschließlich artikulierter Handeingaben für die Nahinteraktionen sowie Anvisieren und Tippen auf die fernen Interaktionen. Sie können auch den Sprachbefehl verwenden, um die Schaltfläche auszulösen.

PressableButtonHoloLens2(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) ist HoloLens 2 Shell-Stilschaltfläche, die die präzise Bewegung der Schaltfläche für die direkte Handverfolgungseingabe unterstützt. Es kombiniert Interactable Skript mit PressableButton Skript.

Für HoloLens 2 empfiehlt es sich, Schaltflächen mit einer undurchsichtigen Hintergrundplatte zu verwenden. Transparente Schaltflächen werden aufgrund der folgenden Benutzerfreundlichkeits- und Stabilitätsprobleme nicht empfohlen:

• Symbol und Text sind in der physischen Umgebung schwer zu lesen
• Es ist schwer zu verstehen, wann das Ereignis ausgelöst wird.
• Hologramme, die über eine transparente Ebene angezeigt werden, können mit der Tiefen-LSR-Stabilisierung von HoloLens 2 instabil sein

Verwenden von druckbaren Schaltflächen

Auf der Unity-Benutzeroberfläche basierende Schaltflächen

Erstellen Sie eine Canvas in Ihrer Szene (GameObject -> Ui -> Canvas). Gehen Sie im Bereich Inspektor für Ihre Canvas wie vor:

• Klicken Sie auf "In MRTK-Canvas konvertieren".
• Klicken Sie auf "NearInteractionTouchableUnityUI hinzufügen".
• Legen Sie die X-, Y- und Z-Skalierung der Rect Transform-Komponente auf 0,001 fest.

Ziehen Sie PressableButtonUnityUI dann (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUI.prefab), PressableButtonUnityUICircular (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUICircular.prefab) oder PressableButtonHoloLens2UnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2UnityUI.prefab) auf der Canvas.

Collider-basierte Schaltflächen

Ziehen PressableButtonHoloLens2 Sie einfach (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) oder PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2Unplated.prefab) in die Szene. Diese Schaltflächen-Prefabs sind bereits so konfiguriert, dass sie audio-visuelles Feedback für die verschiedenen Arten von Eingaben haben, einschließlich artikulierter Handeingabe und Anvisieren.

Die Ereignisse, die im Prefab selbst verfügbar gemacht werden, sowie die Interaktionskomponente können verwendet werden, um zusätzliche Aktionen auszulösen. Die drückenden Schaltflächen in der HandInteractionExample-Szene verwenden das OnClick-Ereignis von Interactable, um eine Änderung der Farbe eines Cubes auszulösen. Dieses Ereignis wird für verschiedene Arten von Eingabemethoden ausgelöst, z. B. Anvisieren, Tippen in der Luft, Handstrahl sowie physische Tastendrücke durch das Skript für die druckbare Schaltfläche.

Sie können konfigurieren, wann die drückende Schaltfläche das OnClick-Ereignis über die PhysicalPressEventRouter auf der Schaltfläche auslöst. Sie können beispielsweise Festlegen, dass OnClick ausgelöst wird, wenn die Schaltfläche zum ersten Mal gedrückt wird, anstatt gedrückt und losgelassen zu werden, indem Sie Interactable On Click auf Event On Press festlegen.

Um bestimmte Informationen zum Artikulierten Zustand der Handeingabe zu nutzen, können Sie ereignisse für druckbare Schaltflächen verwenden: Touch Begin, Touch End, Button Pressed, Button Released. Diese Ereignisse werden jedoch nicht als Reaktion auf Lufteingaben, Handstrahlen oder Augeneingaben ausgelöst. Zur Unterstützung von Nah- und Ferninteraktionen wird empfohlen, das OnClick-Ereignis von Interactable zu verwenden.

Interaktionszustände

Im Leerlaufzustand ist die Frontplatte der Taste nicht sichtbar. Wenn sich ein Finger nähert oder ein Cursor von der Anvisierungseingabe auf die Oberfläche abzielt, wird der glühende Rahmen der Frontplatte sichtbar. Es gibt eine zusätzliche Hervorhebung der Fingerspitzenposition auf der Vorderplatte. Wenn sie mit einem Finger gedrückt wird, bewegt sich die Frontplatte mit der Fingerspitze. Wenn die Fingerspitze die Oberfläche der Vorderplatte berührt, zeigt sie einen subtilen Impulseffekt, um visuelles Feedback zum Berührungspunkt zu geben.

In HoloLens 2 Schaltfläche im Shell-Stil gibt es viele visuelle Hinweise und Angebote, um das Vertrauen des Benutzers bei der Interaktion zu erhöhen.

Näherungslicht	Hervorhebung des Fokus	Komprimierungskäfig	Impuls beim Trigger

Der subtile Impulseffekt wird durch die druckbare Taste ausgelöst, die nach ProximityLight(s) sucht, die sich auf dem aktuell interagierenden Zeiger befinden. Wenn Näherungslichter gefunden werden, wird die ProximityLight.Pulse -Methode aufgerufen, die Shaderparameter automatisch animiert, um einen Impuls anzuzeigen.

Inspektoreigenschaften

Box ColliderBox Collider für die Frontplatte der Taste.

Drückende Schaltfläche Die Logik für die Tastenbewegung mit Handdruckinteraktion.

Physischer Press-Ereignisrouter Dieses Skript sendet Ereignisse von der Handdruckinteraktion an Interactable.

InteractableInteractable verarbeitet verschiedene Arten von Interaktionszuständen und -ereignissen. HoloLens-Anvisieren, Gesten und Spracheingaben sowie immersive Headset-Motion-Controller-Eingaben werden direkt von diesem Skript verarbeitet.

Audioquelle Unity-Audioquelle für die Audiofeedbackclips.

NearInteractionTouchable.cs Erforderlich, um jedes Objekt mit artikulierter Handeingabe anfassbar zu machen.

Prefab-Layout

Das ButtonContent-Objekt enthält Frontplatte, Textbeschriftung und Symbol. FrontPlate reagiert mithilfe des Button_Box-Shaders auf die Nähe der Indexspitze. Es zeigt leuchtende Rahmen, Näherungslicht und einen Impulseffekt bei Berührung. Die Textbezeichnung wird mit TextMesh Pro erstellt. Die Sichtbarkeit von SeeItSayItLabel wird durch das Design von Interactable gesteuert.

Ändern des Symbols und des Texts

MRTK-Schaltflächen verwenden eine ButtonConfigHelper Komponente, die Sie beim Ändern des Symbols, des Texts und der Bezeichnung der Schaltfläche unterstützt. (Beachten Sie, dass einige Felder möglicherweise nicht vorhanden sind, wenn auf der ausgewählten Schaltfläche keine Elemente vorhanden sind.)

Erstellen und Ändern von Symbolsätzen

Ein Symbolsatz ist ein freigegebener Satz von Symbolressourcen, die von der ButtonConfigHelper Komponente verwendet werden. Drei Symbolformatvorlagen werden unterstützt.

• Quad-Symbole werden auf einem Quad mit einem MeshRenderergerendert. Dies ist der Standardsymbolstil.
• Sprite-Symbole werden mit einem SpriteRenderergerendert. Dies ist nützlich, wenn Sie Ihre Symbole lieber als Sprite-Blatt importieren möchten oder wenn Sie möchten, dass Ihre Symbolressourcen für Unity-UI-Komponenten freigegeben werden. Um diesen Stil zu verwenden, müssen Sie das Sprite-Editor-Paket (Windows –> Paket-Manager –> 2D-Sprite) installieren.
• Zeichensymbole werden mithilfe einer TextMeshPro Komponente gerendert. Dies ist nützlich, wenn Sie lieber eine Symbolschriftart verwenden möchten. Um die Schriftart HoloLens-Symbol verwenden zu können, müssen Sie ein TextMeshPro Schriftartenobjekt erstellen.

Wenn Sie ändern möchten, welche Formatvorlage Ihre Schaltfläche verwendet, erweitern Sie die Dropdownliste Symbole in ButtonConfigHelper, und wählen Sie aus der Dropdownliste Symbolformat aus.

So erstellen Sie ein neues Schaltflächensymbol:

1. Klicken Sie im Projektfenster mit der rechten Maustaste auf Assets , um das Kontextmenü zu öffnen. (Sie können auch mit der rechten Maustaste auf einen beliebigen Leerraum im Ordner Assets oder in einem seiner Unterordner klicken.)

2. Wählen Sie Mixed Reality >> Toolkit-Symbolsatz > erstellen aus.

   

Um Quad- und Sprite-Symbole hinzuzufügen, ziehen Sie sie einfach in ihre jeweiligen Arrays. Um Char-Symbole hinzuzufügen, müssen Sie zuerst ein Schriftartobjekt erstellen und zuweisen.

In MRTK 2.4 und höher empfiehlt es sich, benutzerdefinierte Symboltexturen in ein IconSet zu verschieben. Um die Ressourcen auf allen Schaltflächen in einem Projekt auf das neue empfohlene Format zu aktualisieren, verwenden Sie buttonConfigHelperMigrationHandler. (Mixed Reality Toolkit –> Hilfsprogramme –> Migrationsfenster –> Auswahl des Migrationshandlers –> Microsoft.MixedReality.Toolkit.Utilities.ButtonConfigHelperMigrationHandler)

Das Importieren des Microsoft.MixedRealityToolkit.Unity.Tools-Pakets ist erforderlich, um die Schaltflächen zu aktualisieren.

Wenn während der Migration kein Symbol im Standardsymbolsatz gefunden wird, wird in MixedRealityToolkit.Generated/CustomIconSets ein benutzerdefinierter Symbolsatz erstellt. Ein Dialog zeigt an, dass dies geschehen ist.

Erstellen einer HoloLens-Symbolschriftart

Importieren Sie zuerst die Symbolschriftart in Unity. Auf Windows-Computern finden Sie die Standardschriftart HoloLens unter Windows/Fonts/holomdl2.ttf. Kopieren Sie diese Datei, und fügen Sie sie in Den Ordner Assets ein.

Öffnen Sie als Nächstes textMeshPro Font Asset Creator über Window > TextMeshPro > Font Asset Creator. Hier finden Sie die empfohlenen Einstellungen zum Generieren eines HoloLens-Schriftartatlas. Um alle Symbole einzuschließen, fügen Sie den folgenden Unicode-Bereich in das Feld Zeichensequenz ein :

E700-E702,E706,E70D-E70E,E710-E714,E718,E71A,E71D-E71E,E720,E722,E728,E72A-E72E,E736,E738,E73F,E74A-E74B,E74D,E74F-E752,E760-E761,E765,E767-E769,E76B-E76C,E770,E772,E774,E777,E779-E77B,E782-E783,E785-E786,E799,E7A9-E7AB,E7AF-E7B1,E7B4,E7C8,E7E8-E7E9,E7FC,E80F,E821,E83F,E850-E859,E872-E874,E894-E895,E8A7,E8B2,E8B7,E8B9,E8D5,E8EC,E8FB,E909,E91B,E92C,E942,E95B,E992-E995,E9E9-E9EA,EA37,EA40,EA4A,EA55,EA96,EB51-EB52,EB65,EB9D-EBB5,EBCB-EBCC,EBCF-EBD3,EC03,EC19,EC3F,EC7A,EC8E-EC98,ECA2,ECD8-ECDA,ECE0,ECE7-ECEB,ED17,EE93,EFA9,F114-F120,F132,F181,F183-F186

Nachdem das Schriftartenobjekt generiert wurde, speichern Sie es in Ihrem Projekt, und weisen Sie es dem Feld Zeichensymbolschriftart Ihres Symbolsatzes zu. Die Dropdownliste Verfügbare Symbole wird nun aufgefüllt. Um ein Symbol zur Verwendung durch eine Schaltfläche verfügbar zu machen, klicken Sie darauf. Es wird der Dropdownliste Ausgewählte Symbole hinzugefügt und wird nun unter ButtonConfigHelper. Sie können dem Symbol optional ein Tag geben angezeigt. Dies ermöglicht das Festlegen des Symbols zur Laufzeit.

public void SetButtonToAdjust()
{
    ButtonConfigHelper buttonConfigHelper = gameObject.GetComponent<ButtonConfigHelper>();
    buttonConfigHelper.SetCharIconByName("AppBarAdjust");
}

Um den Symbolsatz zu verwenden, wählen Sie eine Schaltfläche aus, erweitern Sie die Dropdownliste Symbole in der , ButtonConfigHelper und weisen Sie sie dem Feld Symbolsatz zu.

Ändern der Größe einer Schaltfläche

die Größe der Schaltfläche im Shell-Stil HoloLens 2 beträgt 32 x 32 mm. Um die Dimension anzupassen, ändern Sie die Größe dieser Objekte im Schaltflächen-Prefab:

1. FrontPlate
2. Quad unter BackPlate
3. Box Collider am Stamm

Klicken Sie dann im Skript NearInteractionTouchable im Stamm der Schaltfläche auf die Schaltfläche Begrenzungen korrigieren .

Aktualisieren der Größe der

Aktualisieren der Größe der

Aktualisieren der Größe der Box

Klicken Sie auf die Schaltfläche "Fix Bounds" (Begrenzungen korrigieren

Sprachbefehl ('see-it, say-it')

Spracheingabehandler Das interaktionsfähige Skript in Pressable Button implementiert IMixedRealitySpeechHandlerbereits . Hier kann ein Sprachbefehl Schlüsselwort (keyword) festgelegt werden.

Spracheingabeprofil Darüber hinaus müssen Sie den Sprachbefehl Schlüsselwort (keyword) im globalen Sprachbefehlsprofil registrieren.

See-it, Say-it-Bezeichnung Das Prefab für die druckbare Schaltfläche verfügt über einen Platzhalter TextMesh Pro-Bezeichnung unter dem SeeItSayItLabel-Objekt . Sie können diese Bezeichnung verwenden, um dem Benutzer den Sprachbefehl Schlüsselwort (keyword) für die Schaltfläche mitzuteilen.

Erstellen einer Schaltfläche von Grund auf neu

Die Beispiele für diese Schaltflächen finden Sie in der Szene PressableButtonExample .

1. Erstellen einer druckbaren Schaltfläche mit Würfel (nur in der Nähe der Interaktion)

1. Erstellen eines Unity-Cubes (GameObject > 3D-Objektcube > )
2. Skript hinzufügen PressableButton.cs
3. Skript hinzufügen NearInteractionTouchable.cs

Weisen Sie im PressableButtonInspektorbereich das Cubeobjekt den Visuals für die schaltflächenbewegende Schaltfläche zu.

Wenn Sie den Cube auswählen, werden mehrere farbige Ebenen im Objekt angezeigt. Dadurch werden die Entfernungswerte unter "Einstellungen drücken" visualisiert. Mithilfe der Handles können Sie konfigurieren, wann sie mit dem Drücken (Verschieben des Objekts) beginnen und wann das Ereignis ausgelöst werden soll.

Wenn Sie die Schaltfläche drücken, wird sie verschoben und generiert die richtigen Ereignisse, die PressableButton.cs im Skript verfügbar gemacht werden, z. B. TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased().

Problembehandlung

Wenn die Schaltfläche einen doppelten Druck ausführt, stellen Sie sicher, dass die Eigenschaft Frontpush erzwingen aktiv ist und die Ebene Start Push Distance vor der Nahinteraktion touchable-Ebene platziert ist. Die Nahinteraktions-Touchable-Ebene wird durch die blaue Ebene angezeigt, die sich vor dem Ursprung des weißen Pfeils in der gif-Datei unten befindet:

2. Hinzufügen von visuellem Feedback zur einfachen Cubeschaltfläche

MRTK Standard Shader bietet verschiedene Features, die das Hinzufügen von visuellem Feedback erleichtern. Erstellen Sie ein Material, und wählen Sie Shader Mixed Reality Toolkit/Standardaus. Alternativ können Sie eines der vorhandenen Materialien unter /SDK/StandardAssets/Materials/ verwenden oder duplizieren, die MRTK Standard Shader verwenden.

Aktivieren Sie Hover Light und Proximity Light unter Fluent-Optionen. Dies ermöglicht visuelles Feedback für Nah-Hand-Interaktionen (Näherungslicht) und Fernzeiger (Hover Light).

3. Hinzufügen von Audiofeedback zur einfachen Cubeschaltfläche

Da PressableButton.cs das Skript Ereignisse wie TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased() verfügbar macht, können wir ganz einfach Audiofeedback zuweisen. Fügen Sie dem Cubeobjekt einfach Unity hinzu Audio Source , und weisen Sie dann Audioclips zu, indem Sie AudioSource.PlayOneShot() auswählen. Sie können MRTK_Select_Main und MRTK_Select_Secondary Audioclips im /SDK/StandardAssets/Audio/ Ordner verwenden.

4. Hinzufügen von visuellen Zuständen und Behandeln von Ferninteraktionsereignissen

Interagierbar ist ein Skript, das es einfach macht, einen visuellen Zustand für die verschiedenen Arten von Eingabeinteraktionen zu erstellen. Es behandelt auch Weitaben-Interaktionsereignisse. Fügen Sie das Cubeobjekt hinzu Interactable.cs , ziehen Sie es auf das Feld Ziel unter Profile, und legen Sie es ab. Erstellen Sie dann ein neues Design mit dem Typ ScaleOffsetColorTheme. Unter diesem Design können Sie die Farbe des Objekts für die spezifischen Interaktionszustände angeben, z. B. Fokus und Gedrückt. Sie können auch Die Skalierung und den Offset steuern. Überprüfen Sie die Beschleunigung, und legen Sie die Dauer fest, um den visuellen Übergang reibungslos zu gestalten.

Sie sehen, dass das Objekt sowohl auf Ferninteraktionen (Handstrahl oder Anvisierencursor) als auch auf Nahinteraktionen (Hand) reagiert.

Beispiele für benutzerdefinierte Schaltflächen

Sehen Sie sich in der HandInteractionExample-Szene die Beispiele für Klavier und runde Schaltflächen an, die beide verwenden PressableButton.

Jeder Klaviertaste ist ein PressableButton und ein NearInteractionTouchable Skript zugewiesen. Es ist wichtig, zu überprüfen, ob die lokale Vorwärtsrichtung von NearInteractionTouchable richtig ist. Sie wird im Editor durch einen weißen Pfeil dargestellt. Stellen Sie sicher, dass der Pfeil von der Vorderseite der Schaltfläche weg zeigt:

Siehe auch

• Interagierbar
• Visuelle Designs