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ächen-Prefabs.

Schaltflächen prefabs in MRTK

Beispiele für die Schaltflächen-Prefabs unter 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

PressableButtonHoloLens2

PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular

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

HoloLens 2-Schaltfläche im Shell-Stil ohne Backplate

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

PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3V

Breite HoloLens 2-Schaltfläche im Shell-Stil 32x96mm

Horizontale HoloLens 2-Schaltflächenleiste mit gemeinsam genutzter Backplate

Vertikale HoloLens 2-Schaltflächenleiste mit gemeinsam genutzter Backplate

PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32

HoloLens 2 Kontrollkästchen im Shell-Stil 32x32mm

HoloLens 2 Shell-Style Switch 32x32mm

HoloLens 2-Radio 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96

32x96mm des Shell-Kontrollkästchens von HoloLens 2

HoloLens 2-Switch im Shell-Stil 32x96mm

HoloLens 2-Radio 32x96mm

radial

Radialschaltfläche

Checkbox

Umschalter

ButtonHoloLens1

PressableRoundButton

Schaltfläche "Shellstil" der 1. Generation von HoloLens

Schaltfläche "Rundform"

Schaltfläche "Basic"

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 handgelenkierter Eingaben für die Nahinteraktionen sowie Blick + Luft tippen für 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-Schaltfläche im Shellformat, die die präzise Bewegung der Schaltfläche für die direkte Eingabe der Handnachverfolgung unterstützt. 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 über eine transparente Ebene angezeigt werden, können mit der Tiefen-LSR-Stabilisierung HoloLens 2 instabil sein.

Verwenden von druckbaren 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".
• 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/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 handgelenkten Eingaben und Blick.

Die Ereignisse, die im Prefab selbst verfügbar gemacht werden, sowie die Interaktivierbare 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 wie Blick, Luft tippen, Handstrahl sowie physische Tastendrucke durch das druckbare Schaltflächenskript ausgelöst.

Sie können konfigurieren, wann die druckbare Schaltfläche das OnClick-Ereignis über die PhysicalPressEventRouter schaltfläche auslöst. Beispielsweise können Sie OnClick so festlegen, dass onClick ausgelöst wird, wenn die Schaltfläche zuerst gedrückt wird, anstatt gedrückt und freigegeben zu werden, indem Sie Interagierbares Beim Klicken aufEreignis bei Drücken festlegen.

Um bestimmte Artikulierte Handeingabezustandsinformationen zu nutzen, können Sie druckbare Schaltflächenereignisse verwenden: Touch Begin, Touch End, Button Pressed, Button Released. Diese Ereignisse werden jedoch nicht als Reaktion auf Lufteingaben, Handstrahlen oder Augeneingaben ausgelöst. Um Nah- und Ferninteraktionen zu unterstützen, 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 der Blickeingabe auf die Oberfläche zielt, wird der glühende Rahmen der Frontplatte sichtbar. Zusätzlich wird die Fingerspitzenposition auf der Frontplatte hervorgehoben. Beim Drücken mit einem Finger bewegt sich die Frontplatte mit der Fingerspitze. Wenn die Fingerspitze die Oberfläche der Frontplatte berührt, zeigt sie einen subtilen Impulseffekt, um visuelles Feedback des Berührungspunkts zu geben.

In HoloLens 2 Schaltfläche im Shellstil gibt es viele visuelle Hinweise und Angebote, um das Vertrauen des Benutzers in die Interaktion zu erhöhen.

Näherungslicht	Fokushervorhebung	Komprimierungskäfig	Impuls am Trigger

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

Eigenschaften des Inspektors

Box ColliderBox Collider für die Frontplatte der Taste.

Druckbare Schaltfläche Die Logik für die Schaltflächenbewegung mit Handdruckinteraktion.

Physischer Presseereignisrouter Dieses Skript sendet Ereignisse von der Handdruckinteraktion an Interagierbar.

InteragierbareInteraktionsfähige verarbeitet verschiedene Arten von Interaktionszuständen und Ereignissen. HoloLens-Blick-, 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 zu berühren.

Prefab-Layout

Das ButtonContent-Objekt enthält eine Frontplatte, eine Textbeschriftung und ein Symbol. FrontPlate reagiert mit dem Button_Box Shader auf die Nähe der Indexspitze. Es zeigt glühende Rahmen, Näherungslicht und einen Impulseffekt bei der 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 Beschriftung 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 die Standardsymbolformatvorlage.
• Sprite-Symbole werden mithilfe von 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 HoloLens-Symbolschriftart zu verwenden, müssen Sie ein TextMeshPro Schriftartobjekt erstellen.

Um zu ändern, welche Formatvorlage Ihre Schaltfläche verwendet, erweitern Sie die Dropdownliste Symbole in ButtonConfigHelper, und wählen Sie in der Dropdownliste Symbolformat 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 leeren Bereich 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 die jeweiligen Arrays. Um Char-Symbole hinzuzufügen, müssen Sie zuerst ein Schriftartobjekt erstellen und zuweisen.

In MRTK 2.4 und darüber hinaus wird empfohlen, 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 –> Migrationshandlerauswahl –> 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 zeigt an, dass dies geschehen ist.

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 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. Fügen Sie den folgenden Unicode-Bereich in das Feld Zeichensequenz ein, um alle Symbole einzuschließen:

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 Schriftartobjekt generiert wurde, speichern Sie sie in Ihrem Projekt, und weisen Sie es dem Zeichensymbolschriftfeld Ihres Symbolsatzes zu. Die Dropdownliste Verfügbare Symbole wird nun aufgefüllt. Klicken Sie darauf, um ein Symbol für die Verwendung durch eine Schaltfläche verfügbar zu machen. Es wird der Dropdownliste Ausgewählte Symbole hinzugefügt und nun in der ButtonConfigHelper. Option Sie können dem Symbol optional ein Tag geben angezeigt. Dadurch wird das Festlegen des Symbols zur Laufzeit aktiviert.

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

Wenn Sie ihren Symbolsatz verwenden möchten, wählen Sie eine Schaltfläche aus, erweitern Sie die Dropdownliste Symbole im 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 im 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 Anpassung von Quad

Aktualisieren der Größe der

Klicken Sie auf die Schaltfläche "Fix Bounds" )

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

Spracheingabehandler Das interaktionsfähige Skript in der Schaltfläche "Pressable" 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 der druckbaren 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.

So erstellen Sie eine Schaltfläche von Grund auf neu

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 von Interaktion)

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

Weisen Sie im PressableButtonInspektorbereich des Inspektors 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 das Drücken (Verschieben des Objekts) gestartet werden soll 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 Front Push erzwingen aktiv ist und die Ebene Start Push Distance vor der Nahinteraktion touchable-Ebene platziert ist. Die Nahinteraktion Touchable-Ebene wird durch die blaue Ebene angezeigt, die vor dem Ursprung des weißen Pfeils im gif unten platziert ist:

2. Hinzufügen von visuellem Feedback zur Schaltfläche "Basic Cube"

DER MRTK Standard-Shader bietet verschiedene Features, mit denen sie einfach visuelles Feedback hinzufügen können. Erstellen Sie ein Material, und wählen Sie Shader Mixed Reality Toolkit/Standardaus. Oder Sie können eines der vorhandenen Materialien unter /SDK/StandardAssets/Materials/ verwenden oder duplizieren, die MRTK Standard Shader verwenden.

Überprüfen Sie Hover Light und Proximity Light unter Fluent-Optionen. Dies ermöglicht visuelles Feedback sowohl für Nahhand-Interaktionen (Näherungslicht) als auch für fernen Zeiger (Hover Light).

3. Hinzufügen von Audiofeedback zur Schaltfläche "Basic Cube"

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 audioclips im /SDK/StandardAssets/Audio/ Ordner MRTK_Select_Secondary.

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

Interaktiv ist ein Skript, das das Erstellen eines visuellen Zustands für die verschiedenen Arten von Eingabeinteraktionen erleichtert. Außerdem werden weit entfernte Interaktionsereignisse behandelt. Fügen Sie das Cubeobjekt hinzu Interactable.cs , ziehen Sie es auf das Feld Ziel unter Profile. 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 Blickcursor) als auch auf Nahinteraktionen 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 Richtung des lokalen Vorwärtss von NearInteractionTouchable korrekt 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:

Weitere Informationen

• Interaktionsfähig
• Visuelle Designs