Schaltflächen

Schaltfläche "Main"

Eine Schaltfläche ermöglicht dem Benutzer das unmittelbare Auslösen einer Aktion. Es ist eine der grundlegenden 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 dem Ordner

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

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

Colliderbasierte Schaltflächen

PressableButtonHoloLens2 PressableButtonHoloLens2

PressableButtonHoloLens2Unplated PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular PressableButtonHoloLens2Circular

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

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

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

PressableButtonHoloLens2_32x96 PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3H PressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3V PressableButtonHoloLens2Bar3V

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

Horizontale HoloLens 2 schaltflächenleiste mit freigegebener Backplate

Vertikale HoloLens 2 schaltflächenleiste mit freigegebener Backplate

PressableButtonHoloLens2ToggleCheckBox_32x32 PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32 PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32 PressableButtonHoloLens2ToggleRadio_32x32

HoloLens 2 des Shell-Kontrollkästchens 32x32mm

HoloLens 2 32x32mm des Shell-Switches

HoloLens 2 des Shell-Radios 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96 PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96 PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96 PressableButtonHoloLens2ToggleRadio_32x96

HoloLens 2 des Shell-Kontrollkästchens 32x96mm

HoloLens 2 32x96mm des Shell-Switches

HoloLens 2 des Shell-Radios 32x96mm

Radial radial

Kontrollkästchen

ToggleSwitch ToggleSwitch

Radiale Schaltfläche

Checkbox

Umschalter

ButtonHoloLens1 ButtonHoloLens1

PressableRoundButton PressableRoundButton

Schaltfläche "Basisschaltfläche"

HoloLens der Shellformatschaltfläche der 1. Generation

Schaltfläche zum Runden der Form

Schaltfläche "Basic"

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

PressableButtonHoloLens2(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) ist die Shell-Stilschaltfläche von HoloLens 2, die die genaue Bewegung der Schaltfläche für die Direkte Handverfolgungseingabe unterstützt. Dabei werden Interactable Skript und Skript PressableButton kombiniert.

Für HoloLens 2 wird empfohlen, Schaltflächen mit einer nicht transparenten Backplate zu verwenden. Transparente Schaltflächen werden aufgrund dieser 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 HoloLens 2 LSR-Stabilität instabil sein.

Schaltflächenknättung

Verwenden von gedrückten Schaltflächen

Auf der Unity-Benutzeroberfläche basierende Schaltflächen

Erstellen Sie eine Canvas in Ihrer Szene (GameObject -> UI -> Canvas). Im Inspektorbereich für Ihre Canvas:

  • Klicken Sie auf "Convert to MRTK Canvas" (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 anschließend PressableButtonUnityUI (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) im Zeichenbereich.

Colliderbasierte Schaltflächen

Ziehen Sie PressableButtonHoloLens2 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 Audiofeedback für die verschiedenen Eingabetypen erhalten, einschließlich artikulierter Handeingabe und Anvisieren.

Die Ereignisse, die im Prefab selbst sowie in der Interactable-Komponente verfügbar gemacht werden, 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. Anvisch, Tippen in die Luft, Handstrahl und physische Tastendrucke über das druckbare Schaltflächenskript.

How to Use Interactable

Sie können konfigurieren, wann die bedruckbare Schaltfläche das OnClick-Ereignis über auf PhysicalPressEventRouter der Schaltfläche ausschaltet. 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 to Event On Press (Interagierbar beim Klicken auf Ereignis beim Drücken von ) festlegen.

How to use events

Um bestimmte artikulierte Informationen zum Eingabezustand der Hand zu nutzen, können Sie ereignisse mit gedrückten Schaltflächen verwenden: Touch Begin, Touch End, Button Pressed, Button Released. Diese Ereignisse werden jedoch nicht als Reaktion auf Eingaben in die Luft, den Handstrahl oder die Augen gezippt. Zur Unterstützung von Nah- und Ferninteraktionen wird empfohlen, das OnClick-Ereignis von Interactable zu verwenden.

How to use Pressable Buttons

Interaktionszustände

Im Leerlaufzustand ist die Vorderseite der Schaltfläche nicht sichtbar. Wenn sich ein Finger nähert oder ein Cursor von der Anvingeingabe auf die Oberfläche zusteuert, wird der leuchtende Rahmen der vorderen Tafel sichtbar. Es gibt zusätzliche Hervorhebungen der Fingerspitzenposition auf der vorderen Schildoberfläche. Wenn sie mit einem Finger bewegt wird, bewegt sich die vordere Platte mit der Fingerspitze. Wenn die Fingerspitze die Oberfläche des vorderen Schilds berührt, zeigt sie einen feinen Pulseffekt, um visuelles Feedback zum Berührungspunkt zu geben.

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

Näherungslicht Hervorhebung des Fokus Komprimieren von Gittern Pulse on trigger
Näherungslicht Hervorhebung des Fokus Komprimieren von Gittern Pulse on trigger

Der feinen Pulseffekt wird durch die bedruckbare Schaltfläche ausgelöst, die nach Näherungslicht(en) sucht, die auf dem aktuell interagierenden Zeiger leben. Wenn Näherungslichter gefunden werden, wird die -Methode aufgerufen, die automatisch Shaderparameter animiert, ProximityLight.Pulse um einen Puls anzuzeigen.

Inspektoreigenschaften

Schaltflächenstruktur

Box Collider Box Collider für die Vorderseite der Schaltfläche.

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

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

Interaktivierbar Interactable verarbeitet verschiedene Arten von Interaktionszuständen und Ereignissen. HoloLens Anvieren, Gesten- und Spracheingabe sowie immersive Headset-Motion Controller-Eingaben werden direkt von diesem Skript verarbeitet.

Audioquelle Unity-Audioquelle für die Audiofeedbackclips.

NearInteractionTouchable.cs Erforderlich, damit jedes Objekt mit einer artikulierten Handeingabe berührt werden kann.

Prefab-Layout

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

Schaltflächenlayout

Ändern von Symbol und Text

MRTK-Schaltflächen verwenden eine ButtonConfigHelper Komponente, die Sie beim Ändern von Symbol, Text und 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.)

Button Config Helper

Erstellen und Ändern von Symbolsätzen

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

  • Quad-Symbole werden mithilfe eines auf einem Quader gerendert. MeshRenderer Dies ist der Standardsymbolstil.
  • Sprite-Symbole werden mit einem SpriteRenderer gerendert. Dies ist nützlich, wenn Sie Ihre Symbole lieber als Spriteblatt importieren möchten oder wenn Sie möchten, dass Ihre Symbolobjekte für Unity-Benutzeroberflächenkomponenten freigegeben werden. Um diesen Stil zu verwenden, müssen Sie das Sprite-Editor-Paket (Windows -> Paket-Manager -> 2D Sprite) installieren.
  • Zeichensymbole werden mithilfe einer Komponente gerendert. TextMeshPro Dies ist nützlich, wenn Sie lieber eine Symbolschriftart verwenden möchten. Um die Schriftart HoloLens Symbol zu verwenden, müssen Sie ein TextMeshPro Schriftartobjekt erstellen.

Um zu ändern, welchen Stil Ihre Schaltfläche verwendet, erweitern Sie die Dropdownliste Symbole in ButtonConfigHelper, und wählen Sie aus der Dropdownliste Symbolstil aus.

Sie können ein neues Schaltflächensymbol mit dem Medienobjektmenü erstellen: > Mixed Reality Toolkit erstellen > Symbolsatz. Um Quad- und Sprite-Symbole hinzuzufügen, ziehen Sie sie einfach in ihre jeweiligen Arrays. Um Char-Symbole hinzuzufügen, müssen Sie zunächst ein Schriftartobjekt erstellen und zuweisen.

In MRTK 2.4 und darüber hinaus wird empfohlen, benutzerdefinierte Symboltexturen in ein IconSet zu verschieben. Verwenden Sie ButtonConfigHelperMigrationHandler, um die Objekte für alle Schaltflächen in einem Projekt auf das neue empfohlene Format zu aktualisieren. (Mixed Reality Toolkit -> Utilities -> Migration Window -> Migration Handler Selection -> Microsoft.MixedReality.Toolkit.Utilities.ButtonConfigHelperMigrationHandler)

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

Dialogfeld "Upgradefenster"

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 erfolgt ist.

Benachrichtigung über benutzerdefinierte Symbole

Erstellen eines HoloLens Symbol-Schriftartobjekts

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 Schriftartat atlas. 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

Schaltflächenerstellung 1

Sobald das Schriftartobjekt generiert wurde, speichern Sie es in Ihrem Projekt, und weisen Sie es dem Feld Char Icon Font (Zeichensymbolschriftart) Ihres Symbolsatzes zu. Die Dropdownliste Verfügbare Symbole wird jetzt aufgefü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 in der Option Sie können dem Symbol optional ein Tag ButtonConfigHelper. geben angezeigt. Dies ermöglicht das Festlegen des Symbols zur Laufzeit.

Schaltflächenerstellung 3

Schaltflächenerstellung 2

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

Um die Schaltfläche Symbolsatz zu verwenden, erweitern Sie die Dropdownliste Symbole in , ButtonConfigHelper und weisen Sie sie dem Feld Symbolsatz zu.

Schaltflächensymbolsatz

Ändern der Größe einer Schaltfläche

HoloLens 2 Die Größe der Schaltfläche im Shellstil 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 im Stamm

Klicken Sie dann im NearInteractionTouchable-Skript im Stammverzeichnis der Schaltfläche auf die Schaltfläche Fix Bounds (Begrenzungen korrigieren).

Aktualisieren der Größe der Anpassung der  FrontPlate-Schaltflächengröße 1

Aktualisieren der Größe der Anpassung der  Quad-Schaltflächengröße 2

Aktualisieren der Größe der Anpassung der Box  Collider-Schaltflächengröße 3

Klicken Sie auf "Fix Bounds" Button Size customization 4 (Anpassung der Größe der Schaltfläche "Fix Bounds"  (Begrenzungen korrigieren) 4

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

Spracheingabehandler Das Interaktionsfähige Skript in der Schaltfläche "Betätigbar" implementiert bereits IMixedRealitySpeechHandler . Ein Sprachbefehlsschlüsselwort kann hier festgelegt werden.

Buttons Speech

Spracheingabeprofil Darüber hinaus müssen Sie das Schlüsselwort voice command im globalen Speech Commands Profile registrieren.

Button speech 2

See-it, Say-it label 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 das Schlüsselwort für den Sprachbefehl für die Schaltfläche mitzuteilen.

Button Speech 3

Erstellen einer Schaltfläche von Grund auf

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

Pressable button cube 0

1. Erstellen einer betätigbaren Schaltfläche mit Cube (nur nah an der Interaktion)

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

Weisen Sie im PressableButton Inspektorbereich das Cubeobjekt den Visuals für die schaltflächen bewegende Zuweisung zu.

pressable button cube 3

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

Pressable Buton cube 1 Pressable button cube 2

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

Pressable button cube run 1

Problembehandlung

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

Skriptkomponente mit gedrückter Schaltfläche mit hervorgehobener Eigenschaft "Front Push erzwingen"

Animiertes Beispiel für das Verschieben des Startschiebeabstands vor der touchierbaren Interaktionsebene in der Nähe

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

Pressable button cube 4

Aktivieren Sie Hover Light und unter Fluent Proximity Light Optionen. Dies ermöglicht visuelles Feedback sowohl für Nahhandinteraktionen (Näherungslicht) als auch für Interaktionen mit fernen Zeigern (Hover Light).

pressable button cube 5 pressable button cube run 2

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 problemlos Audiofeedback zuweisen. Fügen Sie dem Cubeobjekt unity-Objekte Audio Source hinzu, und weisen Sie dann Audioclips zu, indem Sie AudioSource.PlayOneShot() auswählen. Sie können audioclips MRTK_Select_Main und MRTK_Select_Secondary ordner /SDK/StandardAssets/Audio/ verwenden.

pressable button cube 7 Pressable Button Cube 6

4. Hinzufügen visueller Zustände und Behandeln von Ferninteraktionsereignissen

Interactable ist ein Skript, das das Erstellen eines visuellen Zustands für die verschiedenen Arten von Eingabeinteraktionen vereinfacht. Außerdem werden Ferninteraktionsereignisse behandelt. Fügen Interactable.cs Sie das Cubeobjekt hinzu, und ziehen Sie es in 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 Skalierung und Offset steuern. Überprüfen Sie Die Beschleunigung, und legen Sie die Dauer fest, um den visuellen Übergang reibungslos zu machen.

Profildesign auswählen

Sie sehen, dass das Objekt sowohl auf ferne Interaktionen (Handstrahl oder Anvitätscursor) als auch auf Nah-(Hand-)Interaktionen reagiert.

Pressable Button Cube Run 3 Pressable Button Cube Run 4

Beispiele für benutzerdefinierte Schaltflächen

Sehen Sie sich in der HandInteractionExample-Szenedie Beispiele für Die Runde Schaltfläche und an, die beide PressableButton verwenden.

Pressable Custom1 Pressable Custom2

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

Pressable Custom3

Siehe auch