Schaltflächen — MRTK2

Button Main

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ächenvorräfabs in MRTK

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

Unity UI Image/Grafikbasierte Schaltflächen

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

Collider-basierte Schaltflächen

PressableButtonHoloLens2 PressableButtonHoloLens2

PressableButtonHoloLens2Unplated PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular PressableButtonHoloLens2Circular

HoloLens 2-Shell-Style-Schaltfläche mit Backplate, die verschiedene visuelle Feedbacks wie Rahmenlicht, Näherungslicht und komprimierte Frontplatte unterstützt

HoloLens 2-Shell-Formatschaltfläche ohne Backplate

HoloLens 2's Shell-Style-Schaltfläche mit kreisförmiger Form

PressableButtonHoloLens2_32x96PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3HPressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3VPressableButtonHoloLens2Bar3V

Breite HoloLens 2-Shell-Formatschaltfläche 32x96mm

Horizontale HoloLens 2 Schaltflächenleiste mit freigegebener Backplate

Vertikale HoloLens 2 Schaltflächenleiste mit freigegebener Backplate

PressableButtonHoloLens2ToggleCheckBox_32x32PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32PressableButtonHoloLens2ToggleRadio_32x32

Kontrollkästchen "32x32mm" HoloLens 2

HoloLens 2-Shell-Stilschalter 32x32mm

HoloLens 2-Shell-Stil radio 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96PressableButtonHoloLens2ToggleRadio_32x96

Kontrollkästchen "32x96mm" HoloLens 2

HoloLens 2-Shell-Stil-Switch 32x96mm

HoloLens 2-Shell-Format radio 32x96mm

RadialRadiale

CheckboxCheckbox

ToggleSwitchUmschaltschalter

Radialschaltfläche

Checkbox

Umschalter

ButtonHoloLens1ButtonHoloLens1

PressableRoundButtonPressableRoundButton

Button BaseSchaltfläche

Schaltfläche "HoloLens 1. Generation"

Schaltfläche "Runde Form"

Schaltfläche "Basis"

Das Button (Assets/MRTK/SDK/Features/UX/Interagable/Prefabs/Button.prefab) basiert auf dem interagierbaren Konzept, um einfache UI-Steuerelemente für Schaltflächen oder andere Arten interaktiver Oberflächen bereitzustellen. Die Basisschaltfläche unterstützt alle verfügbaren Eingabemethoden, einschließlich artikulierter Handeingaben für die nahen Interaktionen sowie Blick + Luft tippen für die weit stehenden Interaktionen. Sie können auch sprachbefehl verwenden, um die Schaltfläche auszulösen.

PressableButtonHoloLens2(Assets/MRTK/SDK/Features/UX/Interagable/Prefabs/PressableButtonHoloLens2.prefab) ist HoloLens 2's Shell-Style-Schaltfläche, die die genaue 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 Backplate zu verwenden. Transparente Schaltflächen werden aufgrund dieser Benutzerfreundlichkeits- und Stabilitätsprobleme nicht empfohlen:

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

Button plated

Verwenden von drückenden Schaltflächen

Unity UI-basierte Schaltflächen

Erstellen Sie eine Canvas in Ihrer Szene (GameObject -> UI -> Canvas). Im Inspektorbereich 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/Interagable/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 dem Canvas.

Collider-basierte Schaltflächen

PressableButtonHoloLens2 Ziehen Sie einfach (Assets/MRTK/SDK/Features/UX/Interagable/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 audio-visuelles Feedback für die verschiedenen Eingabentypen vorhanden ist, einschließlich artikulierter Handeingabe und Blick.

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 InterClickable, um eine Änderung in der Farbe eines Cubes auszulösen. Dieses Ereignis wird für verschiedene Arten von Eingabemethoden ausgelöst, z. B. Blick, Luft tippen, Handstrahl sowie physische Schaltflächen drücken durch das druckbare Schaltflächenskript.

How to Use Interactable

Sie können konfigurieren, wenn die drückende Schaltfläche das OnClick-Ereignis über die PhysicalPressEventRouter Schaltfläche ausgelöst. Sie können z. B. "OnClick " festlegen, wenn die Schaltfläche zuerst gedrückt wird, anstatt gedrückt und freigegeben zu werden, indem Sie " Interagierbares Klicken aufEreignis auf Drücken" festlegen.

How to use events

Um bestimmte Eingabestatusinformationen für die Hand zu nutzen, können Sie druckbare Schaltflächenereignisse verwenden – Touch Begin, Touch-End, Schaltfläche gedrückt, Schaltfläche veröffentlicht. Diese Ereignisse werden jedoch nicht auf Luft tippen, Handstrahl oder Augeneingaben ausgelöst. Um sowohl nahe als auch weit zu unterstützen, empfiehlt es sich, das OnClick-Ereignis von Interactable zu verwenden.

How to use Pressable Buttons

Interaktionszustände

Im Leerlaufzustand ist die Frontplatte der Schaltfläche nicht sichtbar. Als Finger nähert sich ein Finger oder ein Cursor aus der Blickeingabe auf die Oberfläche, wird der leuchtende Rahmen der Frontplatte sichtbar. Es gibt zusätzliche Hervorhebung der Fingerspitzenposition auf der Frontplatte. Wenn Sie mit einem Finger gedrückt werden, bewegt sich die Frontplatte mit der Fingerspitze. Wenn die Fingerspitze die Oberfläche der Frontplatte berührt, zeigt es einen subtilen Pulseffekt, um visuelles Feedback des Touchpunkts zu geben.

In HoloLens 2 Shell-Style-Schaltfläche gibt es viele visuelle Hinweise und Leisten, um das Vertrauen des Benutzers auf interaktion zu erhöhen.

Proximity light Focus highlight Compressing cage Pulse on trigger
Näherungslicht Fokus-Hervorhebung Komprimieren des Käfigs Puls auf Trigger

Der subtile Pulseffekt wird durch die drückende Schaltfläche ausgelöst, die nach Näherungslicht(n) sucht, die auf dem derzeit interagierenden Zeiger leben. Wenn Näherungslichter gefunden werden, wird die ProximityLight.Pulse Methode aufgerufen, die Shaderparameter automatisch animiert, um einen Puls anzuzeigen.

Inspektoreigenschaften

Button Structure

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

Drückende Schaltfläche Die Logik für die Schaltflächenbewegung mit Hand drücken Interaktion.

Physischer Presseereignisrouter Dieses Skript sendet Ereignisse aus der Hand drückende Interaktion an Interaktionsfähige.

Interaktionsfähige Interaktion behandelt verschiedene Arten von Interaktionszuständen und Ereignissen. HoloLens Blick, Geste und Spracheingabe und immersive Headset-Bewegungscontrollereingaben werden direkt von diesem Skript behandelt.

Audioquelle Unity-Audioquelle für die Audiofeedbackclips.

NearInteractionTouchable.cs Erforderlich, um ein beliebiges Objekt mit artikulierter Handeingabe zu berühren.

Prefab-Layout

Das ButtonContent-Objekt enthält Frontplatte, Textbeschriftung und Symbol. Die FrontPlate reagiert auf die Näherung der Index-Fingerspitze mithilfe des Button_Box Shaders. Es zeigt leuchtende Rahmen, Näherungslicht und einen Pulseffekt auf Berührung. Die Textbezeichnung wird mit TextMesh Pro erstellt. SeeItSayItLabels Sichtbarkeit wird vom Design interagierbar gesteuert.

Button Layout

So ändern Sie das Symbol und den Text

MRTK-Schaltflächen verwenden eine ButtonConfigHelper Komponente, um Sie beim Ändern des Symbols, des 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.)

Button Config Helper

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 einer MeshRenderer. Dies ist die Standardsymbolart.
  • Sprite-Symbole werden mithilfe 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. Zum Verwenden der HoloLens Symbolschriftart müssen Sie eine TextMeshPro Schriftart erstellen.

Um zu ändern, 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 fenster Project mit der rechten Maustaste auf "Objekte", um das Kontextmenü zu öffnen. (Sie können auch mit der rechten Maustaste auf einen beliebigen Leerraum im Ordner "Ressourcen " oder einen seiner Unterordner klicken.)

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

    Screenshot of the Icon Set menu item.

Wenn Sie Quad- und Sprite-Symbole hinzufügen möchten, ziehen Sie sie einfach in ihre jeweiligen Arrays. Um Zeichensymbole hinzuzufügen, müssen Sie zuerst ein Schriftartenobjekt erstellen und zuweisen.

In MRTK 2.4 und darüber hinaus empfehlen wir, benutzerdefinierte Symboltexturen in ein IconSet zu verschieben. Um die Ressourcen in allen Schaltflächen in einem Projekt auf das neue empfohlene Format zu aktualisieren, verwenden Sie den ButtonConfigHelperMigrationHandler. (Mixed Reality Toolkit - Dienstprogramme -> Migrationsfenster ->> Migrationshandlerauswahl -> Microsoft.MixedReality.Toolkit.Utilities.ButtonConfigHelperMigrationHandler)

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

Upgrade window dialogue

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

Custom icon notification

Erstellen eines HoloLens Symbolschriftartobjekts

Importieren Sie zuerst 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 Schriftatlass. Um alle Symbole einzuschließen, fügen Sie den folgenden Unicode-Bereich in das Zeichensequenzfeld 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

Button creation 1

Nachdem das Schriftartenobjekt generiert wurde, speichern Sie es in Ihrem Projekt, und weisen Sie es dem Feld "Zeichensymbolschriftart" des Symbolsatzes zu. Die Dropdownliste "Verfügbare Symbole " wird jetzt ausgefüllt. Um ein Symbol für die Verwendung durch eine Schaltfläche verfügbar zu machen, klicken Sie darauf. Sie wird zur Dropdownliste "Ausgewählte Symbole " hinzugefügt und wird nun im ButtonConfigHelper. Symbol angezeigt. Sie können optional dem Symbol ein Tag zuweisen. Dadurch wird das Festlegen des Symbols zur Laufzeit aktiviert.

Button creation 3

Button creation 2

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

Um Ihre Symbolmappe zu verwenden, wählen Sie eine Schaltfläche aus, erweitern Sie die Dropdownliste "Symbole" im ButtonConfigHelper Feld "Symbolsatz", und weisen Sie sie dem Feld "Symbolsatz " zu.

Button Icon set

So ändern Sie die Größe einer Schaltfläche

die Größe der Shell-Schaltfläche HoloLens 2 beträgt 32 x 32mm. 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 dem Stamm

Klicken Sie dann im Skript "NearInteractionTouchable" auf die Schaltfläche "Fix Bounds ", die sich im Stammverzeichnis der Schaltfläche befindet.

Aktualisieren der Größe der FrontPlate Button Size customization 1

Aktualisieren der Größe des Quads Button Size customization 2

Aktualisieren der Größe des Box Colliders Button Size customization 3

Klicken Sie auf "Grenzen beheben" Button Size customization 4

Sprachbefehl ('siehe-it, sagen')

Spracheingabehandler Das interagierbare Skript in pressable Button implementiert IMixedRealitySpeechHandlerbereits . Hier kann ein Sprachbefehlswort festgelegt werden.

Buttons Speech

Spracheingabeprofil Darüber hinaus müssen Sie das Sprachbefehlswort im globalen Sprachbefehlsprofil registrieren.

Button speech 2

See-it, Say-it-Bezeichnung Die Druckschaltfläche prefab verfügt über einen Platzhalter TextMesh Pro Bezeichnung unter dem SeeItSayItLabel-Objekt. Sie können diese Bezeichnung verwenden, um das Sprachbefehlswort für die Schaltfläche an den Benutzer zu kommunizieren.

Button Speech 3

So erstellen Sie eine Schaltfläche von Grund auf neu

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

Pressable button cube 0

1. Erstellen einer druckbaren Schaltfläche mit Cube (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 PressableButtonBereich "Inspektor" das Cubeobjekt der Visuals der Verschieben-Schaltfläche zu.

pressable button cube 3

Wenn Sie den Würfel auswählen, wird auf dem Objekt mehrere farbige Ebenen angezeigt. Dadurch werden die Abstandswerte unter "Drücken Einstellungen" dargestellt. Mit den Handlen können Sie konfigurieren, wann Sie mit dem Drücken beginnen (das Objekt verschieben) und wann das Ereignis ausgelöst werden soll.

Pressable Buton cube 1Pressable button cube 2

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

Pressable button cube run 1

Problembehandlung

Wenn Ihre Schaltfläche einen Doppeldruck ausführt, stellen Sie sicher, dass die Eigenschaft "Front-Push erzwingen " aktiv ist und das Start-Push-Distanz-Flugzeug vor der Nahinteraktion touchable-Ebene platziert wird. Die nahinteraktionsfähige Ebene wird durch die blaue Ebene angezeigt, die vor dem Ursprung des weißen Pfeils im GIF unten platziert ist:

Pressable button script component with Enforce Front Push property highlighted

Animated example of moving the start push distance in front of the near interaction touchable plane

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

MRTK Standard-Shader bietet verschiedene Features, mit denen visuelles Feedback leicht hinzugefügt werden kann. 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.

Pressable button cube 4

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

pressable button cube 5pressable button cube run 2

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

Da PressableButton.cs Skript Ereignisse wie TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased() verfügbar macht, können wir audiofeedback problemlos zuweisen. Fügen Sie einfach Unitys Audio Source dem Cubeobjekt hinzu, und weisen Sie 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.

pressable button cube 7Pressable Button Cube 6

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

Interagierbar ist ein Skript, das das Erstellen eines visuellen Zustands für die verschiedenen Eingabeinteraktionen erleichtert. Es behandelt auch weit bezogene Interaktionsereignisse. Fügen Sie das Cubeobjekt in das Zielfeld unter Profile hinzu, und ziehen Sie Interactable.cs es, und legen Sie es ab. Erstellen Sie dann ein neues Design mit einem 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 die Beschleunigung und legen Sie die Dauer fest, um den visuellen Übergang reibungslos zu gestalten.

Select profile theme

Sie sehen, dass das Objekt sowohl weit (Handstrahl- oder Blickcursor) als auch nah(hand) Interaktionen reagiert.

Pressable Button Cube Run 3Pressable Button Cube Run 4

Beispiele für benutzerdefinierte Schaltflächen

In der HandInteractionExample-Szene finden Sie die Beispiele für Klavier- und Runde Schaltflächen, die beide verwenden PressableButton.

Pressable Custom1Pressable Custom2

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

Pressable Custom3

Siehe auch