Schaltflächen – MRTK2

Eine Schaltfläche ermöglicht dem Benutzer das unmittelbare Auslösen einer Aktion. Sie ist eine der wichtigsten Komponenten in Mixed Reality. MRTK bietet verschiedene Arten von Schaltflächenvorschauen.

Schaltflächenvorfabs in MRTK

Beispiele für die Schaltflächenvorfabs unter MRTK/SDK/Features/UX/Interactable/Prefabs "Ordner"

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

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

Kollidieren basierender Schaltflächen

PressableButtonHoloLens2

PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular

HoloLens 2's Shell-Stil-Schaltfläche mit Backplate, die verschiedene visuelles Feedback unterstützt, z. B. Rahmenlicht, Näherungslicht und komprimierte Frontplatte

Shell-Style-Schaltfläche von HoloLens 2 ohne Backplate

HoloLens 2-Schaltfläche im Shellstil mit kreisförmiger Form

PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3V

Breite HoloLens 2-Shell-Schaltfläche 32x96mm

Horizontale HoloLens 2-Schaltflächenleiste mit freigegebener Backplate

Vertikale HoloLens 2-Schaltflächenleiste mit freigegebener Backplate

PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32

Kontrollkästchen im Shellstil von HoloLens 2 32 x 32mm

Shell-Stilschalter von HoloLens 2 32 x 32mm

HoloLens 2-Shell-Radio 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96

Kontrollkästchen im Shellstil von HoloLens 2 32 x 96mm

Shell-Stilschalter von HoloLens 2 32x96mm

HoloLens 2-Shell-Radio 32x96mm

Radial

Kontrollkästchen

ToggleSwitch

Radialschaltfläche

Kontrollkästchen

Umschalter

ButtonHoloLens1

PressableRoundButton

Knopf

Schaltfläche "Shellstil" der HoloLens 1. Generation

Runder Shape-Knopfdruck

Schaltfläche "Einfach"

Die Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) basiert auf dem interagierbaren Konzept, um einfache UI-Steuerelemente für Schaltflächen oder andere Arten interaktiver Oberflächen bereitzustellen. Die Basisplanschaltfläche unterstützt alle verfügbaren Eingabemethoden, einschließlich artikulierter Handeingaben für die Nahinteraktionen sowie Blick + Lufttippen für die weit stehenden 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's Shell style button that supports the precise movement of the button for the direct hand tracking input. Es kombiniert Interactable Skript mit PressableButton Skript.

Für HoloLens 2 wird empfohlen, Schaltflächen mit einer undurchsichtigen Backplate zu verwenden. Transparente Schaltflächen werden aufgrund dieser Benutzerfreundlichkeits- und Stabilitätsprobleme nicht empfohlen:

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

So verwenden Sie druckbare Schaltflächen

Unity UI-basierte Schaltflächen

Erstellen Sie eine Canvas in Ihrer Szene (GameObject -> UI -> Canvas). Im Bereich "Inspektor" für Ihren Canvas:

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

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

Kollidieren basierender Schaltflächen

Einfach ziehen PressableButtonHoloLens2 (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ächenvorfabs sind bereits so konfiguriert, dass audio-visuelles Feedback für die verschiedenen Eingabetypen vorhanden ist, einschließlich gestikulierter Handeingabe und Blick.

Die Ereignisse, die im Prefab selbst verfügbar gemacht werden, sowie die interagierbare Komponente können verwendet werden, um zusätzliche Aktionen auszulösen. Die druckbaren 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. Blick, Luftzapfen, Handstrahl, sowie physische Tastendrucke durch das Skript für gedrückte Schaltflächen.

Sie können konfigurieren, wann die gedrückte Schaltfläche das OnClick-Ereignis über die PhysicalPressEventRouter 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 "Interagierbar beim Klicken auf Ereignis bei Drücken" festlegen.

Um bestimmte Informationen zum Eingabezustand der Hand zu nutzen, können Sie druckbare Schaltflächenereignisse verwenden : Touch Begin, Touch End, Schaltfläche gedrückt, Schaltfläche losgelassen. Diese Ereignisse werden jedoch nicht als Reaktion auf Lufteingaben, Handstrahl- oder Augeneingaben ausgelöst. Zur Unterstützung von Nah- und Weitinteraktionen wird empfohlen, das OnClick-Ereignis von Interactable zu verwenden.

Interaktionszustände

Im Leerlaufzustand ist die Frontplatte der Schaltfläche nicht sichtbar. Wenn sich ein Finger nähert oder ein Cursor von Blickeingaben auf die Oberfläche zielt, wird der leuchtende Rahmen der Frontplatte sichtbar. Es gibt zusätzliche Hervorhebung der Fingerspitzenposition auf der Frontplatte. Wenn sie mit einem Finger gedrückt wird, bewegt sich die Frontplatte mit der Fingerspitze. Wenn die Fingerspitze die Oberfläche der Frontplatte berührt, zeigt sie einen subtilen Impulseffekt an, um visuelles Feedback des Berührungspunkts zu geben.

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

Näherungslicht	Fokushervorhebung	Komprimierungskäfig	Impuls am Auslöser

Der subtile Impulseffekt wird durch die druckbare Taste ausgelöst, die nach Näherungslicht(n) 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.

Inspector-Eigenschaften

Box ColliderBox Collider für die Frontplatte der Schaltfläche.

Pressable Button The logic for the button movement with hand press interaction.

Physischer Press-Ereignisrouter Dieses Skript sendet Ereignisse von der Interaktion mit der Hand an interaktionsfähig.

Interagierbare Interaktionsfähige behandelt verschiedene Arten von Interaktionszuständen und Ereignissen. HoloLens-Blick-, Gestik- und Spracheingaben und immersive Headset-Bewegungscontrollereingaben werden direkt von diesem Skript behandelt.

Audioquelle Unity-Audioquelle für die Audiofeedbackclips.

NearInteractionTouchable.cs Erforderlich, damit jedes Objekt mit handgelenkten Handeingaben berührt werden kann.

Layout "Prefab"

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 auf Berührung. Die Beschriftung wird mit TextMesh Pro erstellt. Die Sichtbarkeit von SeeItSayItLabel wird durch das Design interagierbar gesteuert.

So ändern Sie das Symbol und den Text

MRTK-Schaltflächen verwenden eine ButtonConfigHelper Komponente, um Sie beim Ändern des Symbols, texts und der Beschriftung der Schaltfläche zu unterstützen. (Beachten Sie, dass einige Felder möglicherweise nicht vorhanden sind, wenn Elemente auf der ausgewählten Schaltfläche nicht vorhanden sind.)

Erstellen und Ändern von Symbolsätzen

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

• Quad-Symbole werden mit einem MeshRendererQuad gerendert. Dies ist die Standardsymbolformatvorlage.
• Sprite-Symbole werden mit einer SpriteRenderer. Dies ist nützlich, wenn Sie Ihre Symbole lieber als Sprite-Blatt importieren möchten oder wenn Ihre Symbolressourcen für Unity-UI-Komponenten freigegeben werden sollen. Um diese Formatvorlage 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 eine Symbolschriftart verwenden möchten. Um die Schriftart des HoloLens-Symbols zu verwenden, müssen Sie eine TextMeshPro Schriftartenressource erstellen.

Um zu ändern, welche Formatvorlage Ihre Schaltfläche verwendet, erweitern Sie das Dropdownmenü "Symbole " in der Schaltfläche "ButtonConfigHelper", und wählen Sie aus der Dropdownliste "Symbolformatvorlage " aus.

So erstellen Sie ein neues Schaltflächensymbol:

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

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 Zeichensymbole hinzuzufügen, müssen Sie zuerst ein Schriftartobjekt erstellen und zuweisen.

In MRTK 2.4 und darüber hinaus empfehlen wir, 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 den ButtonConfigHelperMigrationHandler. (Mixed Reality Toolkit -> Dienstprogramme -> Migrationsfenster -> Auswahl des Migrationshandlers -> Microsoft.MixedReality.Toolkit.Utilities.ButtonConfigHelperMigrationHandler)

Importieren des Microsoft.MixedRealityToolkit.Unity.Tools-Pakets, das zum Aktualisieren der Schaltflächen erforderlich ist.

Wenn während der Migration kein Symbol im Standardsymbolsatz gefunden wird, wird in MixedRealityToolkit.Generated/CustomIconSets ein benutzerdefinierter Symbolsatz erstellt. Ein Dialogfeld gibt an, dass dies stattgefunden hat.

Erstellen einer HoloLens-Symbolschriftart

Importieren Sie zunächst die Symbolschriftart in Unity. Auf Windows-Computern finden Sie die Standardschriftart HoloLens in Windows/Fonts/holomdl2.ttf. Kopieren Sie diese Datei, und fügen Sie sie in Ihren Ordner "Assets" ein.

Öffnen Sie als Nächstes den TextMeshPro Font Asset Creator über Window > TextMeshPro > Font Asset Creator. Hier sind die empfohlenen Einstellungen zum Generieren eines HoloLens-Schriftartatlass. 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 die Schriftartressource generiert wurde, speichern Sie sie in Ihrem Projekt, und weisen Sie es dem Feld "Zeichensymbolschriftart" des Symbolsatzes zu. Das Dropdownmenü "Verfügbare Symbole" wird nun ausgefüllt. Um ein Symbol für die Verwendung durch eine Schaltfläche verfügbar zu machen, klicken Sie darauf. Sie wird der Dropdownliste "Ausgewählte Symbole " hinzugefügt und wird nun im ButtonConfigHelper. Symbol angezeigt. Optional können Sie dem Symbol ein Tag zuweisen. Dadurch wird das Festlegen des Symbols zur Laufzeit aktiviert.

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

Erweitern Sie zum Verwenden Ihres Symbolsatzes eine Schaltfläche, erweitern Sie das Dropdownmenü "Symbole" im ButtonConfigHelper Feld "Symbolsatz", und weisen Sie sie dem Feld "Symbolsatz " zu.

Ändern der Größe einer Schaltfläche

Die Shell-Schaltfläche von HoloLens 2 ist 32 x 32mm groß. Um die Dimension anzupassen, ändern Sie die Größe dieser Objekte im Schaltflächen-Prefab:

1. Frontplate
2. Quad unter BackPlate
3. Box Collider auf der Wurzel

Klicken Sie dann im NearInteractionTouchable-Skript auf die Schaltfläche "Grenzen korrigieren", die sich im Stamm der Schaltfläche befindet.

Aktualisieren der Größe der FrontPlate

Aktualisieren der Größe des Quads

Aktualisieren der Größe der Box Collider

Klicken Sie auf "Grenzen korrigieren".

Sprachbefehl ('siehe', sagen Sie')

Der Spracheingabehandler Das interagierbare Skript in pressable Button implementiert IMixedRealitySpeechHandlerbereits. Hier kann ein Schlüsselwort für Sprachbefehle festgelegt werden.

Darüber hinaus müssen Sie das Schlüsselwort für Sprachbefehle im globalen Sprachbefehlsprofil registrieren.

See-it, Say-it label The pressable button prefab has a placeholder TextMesh Pro label under the SeeItSayItLabel object. Sie können diese Bezeichnung verwenden, um dem Benutzer das Schlüsselwort des Sprachbefehls für die Schaltfläche mitzuteilen.

So erstellen Sie eine Schaltfläche von Grund auf neu

Die Beispiele dieser Schaltflächen finden Sie in der PressableButtonExample-Szene .

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

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

Weisen Sie im PressableButtonInspektorbereich das Cubeobjekt den visuellen Elementen der Bewegungsschaltfläche zu.

Wenn Sie den Würfel auswählen, werden mehrere farbige Ebenen auf dem Objekt angezeigt. Dadurch werden die Abstandswerte unter "Presseeinstellungen" visualisiert. Mithilfe der Handles können Sie konfigurieren, wann das Drücken gestartet werden soll (verschieben Sie das Objekt) und wann das Ereignis ausgelöst werden soll.

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

Problembehandlung

Wenn die Schaltfläche einen Doppeldruck ausführt, stellen Sie sicher, dass die Eigenschaft "Front-Push erzwingen" aktiv ist und die Start-Push-Entfernungsebene vor der Near Interaction Touchable-Ebene platziert wird. Die Near Interaction Touchable-Ebene wird durch die blaue Ebene angezeigt, die vor dem Ursprung des weißen Pfeils in der GIF unten platziert ist:

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

DER 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. Oder Sie können eines der vorhandenen Materialien verwenden oder duplizieren, unter /SDK/StandardAssets/Materials/ denen MRTK Standard-Shader verwendet wird.

Überprüfen Hover Light und Proximity Light unter Fluent-Optionen. Dies ermöglicht visuelles Feedback sowohl für Nahhandinteraktionen (Näherungslicht) als auch für Weitzeigerinteraktionen (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 unitys Audio Source einfach dem Cubeobjekt hinzu, und weisen Sie dann Audioclips zu, indem Sie "AudioSource.PlayOneShot()" auswählen. Sie können MRTK_Select_Main und MRTK_Select_Secondary Audioclips unter /SDK/StandardAssets/Audio/ Ordner verwenden.

4. Hinzufügen visueller Zustände und Behandeln von weit entfernten Interaktionsereignissen

Interagierbar ist ein Skript, das das Erstellen eines visuellen Zustands für die verschiedenen Eingabeinteraktionen erleichtert. Es behandelt auch weit entfernte Interaktionsereignisse. Fügen Sie Interactable.cs das Cubeobjekt im Feld "Ziel" unter "Profile" hinzu, und ziehen Sie es, 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 Skalierung und Offset steuern. Überprüfen Sie Beschleunigungen und legen Sie die Dauer fest, um den visuellen Übergang reibungslos zu gestalten.

Sie sehen, dass das Objekt sowohl weit (Handstrahl- oder Blickcursor) als auch Nah(Hand)-Interaktionen 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.

Jede Klaviertaste hat ein PressableButton und ein NearInteractionTouchable Skript zugewiesen. Es ist wichtig zu überprüfen, ob die Lokale Weiterleitungsrichtung NearInteractionTouchable korrekt ist. Sie wird durch einen weißen Pfeil im Editor dargestellt. Stellen Sie sicher, dass der Pfeil von der Vorderseite der Schaltfläche entfernt ist:

Siehe auch

• Interagierbar
• Visuelle Designs