Pulsanti - MRTK2

Button Main

Un pulsante offre all'utente un modo per attivare un'azione immediata. È uno dei componenti più fondamentali della realtà mista. MRTK offre diversi tipi di prefab dei pulsanti.

Prefab dei pulsanti in MRTK

Esempi di prefab dei pulsanti nella MRTK/SDK/Features/UX/Interactable/Prefabs cartella

Pulsanti basati su immagine/grafica dell'interfaccia utente di Unity

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

Pulsanti basati su collisori

PressableButtonHoloLens2 PressableButtonHoloLens2

PressableButtonHoloLens2Unplated PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular PressableButtonHoloLens2Circular

pulsante dello stile shell di HoloLens 2 con backplate che supporta vari feedback visivi, ad esempio la luce del bordo, la luce di prossimità e la lastra anteriore compressa

pulsante dello stile shell di HoloLens 2 senza backplate

pulsante dello stile shell di HoloLens 2 con forma circolare

PressableButtonHoloLens2_32x96PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3HPressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3VPressableButtonHoloLens2Bar3V

Pulsante dello stile shell di HoloLens 2 largo 32x96mm

Barra dei pulsanti HoloLens 2 orizzontale con backplate condiviso

Barra dei pulsanti HoloLens 2 verticale con backplate condiviso

PressableButtonHoloLens2ToggleCheckBox_32x32PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32PressableButtonHoloLens2ToggleRadio_32x32

Casella di controllo di tipo shell di HoloLens 2 32x32mm

switch dello stile shell di HoloLens 2 32x32mm

radio in stile shell di HoloLens 2 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96PressableButtonHoloLens2ToggleRadio_32x96

casella di controllo di tipo shell di HoloLens 2 32x96mm

switch shell-style di HoloLens 2 32x96mm

radio in stile shell di HoloLens 2 32x96mm

RadialRadiale

CheckboxCasella

ToggleSwitchToggleswitch

Pulsante radiale

Casella di controllo

Interruttore Attiva/Disattiva

ButtonHoloLens1ButtonHoloLens1

PressableRoundButtonPressableRoundButton

Button BasePulsante

HoloLens pulsante dello stile della shell di prima generazione

Pulsante a forma arrotondata

Pulsante Di base

Il Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) si basa sul concetto di interazione per fornire semplici controlli dell'interfaccia utente per pulsanti o altri tipi di superfici interattive. Il pulsante baseline supporta tutti i metodi di input disponibili, incluso l'input a mano articolato per le interazioni vicine, nonché lo sguardo fisso e il tocco dell'aria per le interazioni lontane. È anche possibile usare il comando vocale per attivare il pulsante.

PressableButtonHoloLens2(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) è HoloLens 2 pulsante dello stile della shell che supporta lo spostamento preciso del pulsante per l'input diretto del tracciamento della mano. Combina Interactable lo script con PressableButton lo script.

Per HoloLens 2, è consigliabile usare pulsanti con un backplate opaco. I pulsanti trasparenti non sono consigliati a causa di questi problemi di usabilità e stabilità:

  • Icona e testo sono difficili da leggere con l'ambiente fisico
  • È difficile capire quando viene attivato l'evento
  • Ologrammi visualizzati tramite un piano trasparente può essere instabile con la stabilizzazione Depth LSR di HoloLens 2

Button plated

Come usare i pulsanti premuti

Pulsanti basati sull'interfaccia utente di Unity

Creare un canvas nella scena (GameObject -> UI -> Canvas). Nel pannello Inspector (Controllo) per canvas:

  • Fare clic su "Convert to MRTK Canvas" (Converti in canvas MRTK)
  • Fare clic su "Aggiungi NearInteractionTouchableUnityUI"
  • Impostare la scala X, Y e Z del componente Rect Transform su 0.001

Trascinare PressableButtonUnityUI quindi (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUI.prefab), PressableButtonUnityUICircular (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Prefabs/PressableButtonUnityUICircular.prefab) o PressableButtonHoloLens2UnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2UnityUI.prefab) nell'area di disegno.

Pulsanti basati su collisori

Trascinare PressableButtonHoloLens2 semplicemente (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) o PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2Unplated.prefab) nella scena. Questi prefab dei pulsanti sono già configurati per avere feedback audio-visivo per i vari tipi di input, tra cui input a mano e sguardo fisso articolati.

Gli eventi esposti nel prefab stesso e il componente Interactable possono essere usati per attivare azioni aggiuntive. I pulsanti premuti nella scena HandInteractionExample usano l'evento OnClick di Interactable per attivare una modifica del colore di un cubo. Questo evento viene attivato per diversi tipi di metodi di input, ad esempio sguardo fisso, tocco dell'aria, raggio della mano e pressione fisica dei pulsanti tramite lo script del pulsante premuto.

How to Use Interactable

È possibile configurare quando il pulsante premuto attiva l'evento OnClick tramite il PhysicalPressEventRouter pulsante . Ad esempio, è possibile impostare OnClick per attivare quando il pulsante viene premuto per la prima volta, anziché essere premuto e rilasciato, impostando Interactable On Click su Event On Press.

How to use events

Per sfruttare informazioni specifiche sullo stato di input della mano articolata, puoi usare gli eventi dei pulsanti pressabili - Touch Begin, Touch End, Button Pressed, Button Released.To leverage specific hand input state information, you can use pressable buttons events - Touch Begin, Touch End, Button Pressed, Button Released. Questi eventi non verranno attivati in risposta a input di tocco, raggio della mano o occhio, tuttavia. Per supportare le interazioni sia vicine che lontane, è consigliabile usare l'evento OnClick di Interactable.

How to use Pressable Buttons

Stati di interazione

Nello stato di inattività, la lastra anteriore del pulsante non è visibile. Quando un dito si avvicina o un cursore dall'input dello sguardo fisso punta alla superficie, il bordo incandescente della lastra anteriore diventa visibile. C'è ulteriore evidenziazione della posizione del dito sulla superficie della piastra anteriore. Quando viene premuto con un dito, la piastra anteriore si muove con la punta del dito. Quando la punta del dito tocca la superficie della piastra anteriore, mostra un effetto di impulso sottile per dare un feedback visivo del punto di tocco.

In HoloLens 2 pulsante dello stile shell sono disponibili molti segnali visivi e inviti per aumentare la fiducia dell'utente sull'interazione.

Proximity light Focus highlight Compressing cage Pulse on trigger
Luce di prossimità Evidenziazione dello stato attivo Compressione gabbia Impulso al trigger

L'effetto impulso sottile viene attivato dal pulsante premuto, che cerca ProximityLight(s) che vivono sul puntatore attualmente in interazione. Se vengono trovate luci di prossimità, viene chiamato il ProximityLight.Pulse metodo , che anima automaticamente i parametri dello shader per visualizzare un impulso.

Proprietà del controllo

Button Structure

CollisoreBox Collider box per il piatto anteriore del pulsante.

Pulsante premuto Logica per il movimento del pulsante con l'interazione con la pressione della mano.

Router eventi Di stampa fisica Questo script invia eventi dall'interazione tramite pressione manuale a Interactable.

Interactable Interactable gestisce vari tipi di stati di interazione ed eventi. HoloLens'input dello sguardo fisso, del movimento e dell'input vocale e dell'input del controller di movimento vr immersive vengono gestiti direttamente da questo script.

Origine audio Origine audio Unity per i clip di feedback audio.

NearInteractionTouchable.cs Obbligatorio per rendere qualsiasi oggetto toccabile con input di mano articolato.

Layout prefab

L'oggetto ButtonContent contiene la lastra anteriore, l'etichetta di testo e l'icona. FrontPlate risponde alla prossimità del dito dell'indice usando il Button_Box shader. Mostra bordi luminosi, luce di prossimità e un effetto pulsante sul tocco. L'etichetta di testo viene creata con TextMesh Pro. La visibilità di SeeItSayItLabel è controllata dal tema di Interactable.

Button Layout

Come modificare l'icona e il testo

I pulsanti MRTK usano un ButtonConfigHelper componente per facilitare la modifica dell'icona, del testo e dell'etichetta del pulsante. Si noti che alcuni campi potrebbero essere assenti se gli elementi non sono presenti nel pulsante selezionato.

Button Config Helper

Creazione e modifica di set di icone

Un set di icone è un set condiviso di asset icona usati dal ButtonConfigHelper componente. Sono supportati tre stili di icona.

  • Le icone quad vengono visualizzate in un quad usando un MeshRendereroggetto . Si tratta dello stile dell'icona predefinito.
  • Le icone sprite vengono sottoposte a rendering usando un SpriteRendereroggetto . Questo è utile se si preferisce importare le icone come foglio sprite o se si desidera che gli asset dell'icona vengano condivisi con i componenti dell'interfaccia utente di Unity. Per usare questo stile, è necessario installare il pacchetto Editor Sprite (Windows - Gestione pacchetti ->> Sprite 2D)
  • Le icone char vengono sottoposte a rendering usando un TextMeshPro componente. Questo è utile se si preferisce usare un tipo di carattere icona. Per usare il tipo di carattere icona HoloLens, è necessario creare un TextMeshPro asset del tipo di carattere.

Per modificare lo stile usato dal pulsante, espandere l'elenco a discesa Icone nell'elenco a discesa ButtonConfigHelper e selezionare nell'elenco a discesa Stile icona .

Per creare una nuova icona del pulsante:

  1. Nella finestra Project fare clic con il pulsante destro del mouse su Asset per aprire il menu di scelta rapida. È anche possibile fare clic con il pulsante destro del mouse su qualsiasi spazio vuoto all'interno della cartella Asset o in una delle relative sottocartelle.

  2. Selezionare Crea > Realtà mista > Toolkit > Set di icone.

    Screenshot of the Icon Set menu item.

Per aggiungere icone quad e sprite, è sufficiente trascinarle nelle rispettive matrici. Per aggiungere icone Char, è prima necessario creare e assegnare un asset di tipo carattere.

In MRTK 2.4 e oltre, è consigliabile spostare trame di icone personalizzate in un IconSet. Per aggiornare gli asset in tutti i pulsanti in un progetto al nuovo formato consigliato, usare ButtonConfigHelperMigrationHandler. (Realtà mista Toolkit - Utilità -> Finestra di migrazione ->> Selezione gestore migrazione -> Microsoft.MixedReality.Toolkit. Utilities.ButtonConfigHelperMigrationHandler)

Importazione del pacchetto Microsoft.MixedRealityToolkit.Unity.Tools necessario per aggiornare i pulsanti.

Upgrade window dialogue

Se un'icona non viene trovata nell'icona predefinita impostata durante la migrazione, verrà creato un set di icone personalizzato in MixedRealityToolkit.Generated/CustomIconSets. Una finestra di dialogo indicherà che questa operazione è stata eseguita.

Custom icon notification

Creazione di un asset del tipo di carattere icona HoloLens

Prima di tutto, importare il carattere dell'icona in Unity. Nei computer Windows è possibile trovare il tipo di carattere HoloLens predefinito in Windows/Font/holomdl2.ttf. Copiare e incollare questo file nella cartella Asset.

Aprire quindi TextMeshPro Font Asset Creator tramite > Window TextMeshPro > Font Asset Creator. Ecco le impostazioni consigliate per la generazione di un atlas del tipo di carattere HoloLens. Per includere tutte le icone, incollare l'intervallo Unicode seguente nel campo Sequenza di caratteri :

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

Dopo aver generato l'asset del tipo di carattere, salvarlo nel progetto e assegnarlo al campo Carattere icona del set di icone. L'elenco a discesa Icone disponibili verrà popolato. Per rendere disponibile un'icona per l'uso da parte di un pulsante, fare clic su di esso. Verrà aggiunto all'elenco a discesa Icone selezionate e verrà ora visualizzato nell'elenco ButtonConfigHelper. a discesa È possibile assegnare facoltativamente un tag all'icona. Ciò consente di impostare l'icona in fase di esecuzione.

Button creation 3

Button creation 2

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

Per usare il set di icone selezionare un pulsante, espandere l'elenco a discesa Icone nell'oggetto ButtonConfigHelper e assegnarlo al campo Set di icone .

Button Icon set

Come modificare le dimensioni di un pulsante

le dimensioni del pulsante della shell di HoloLens 2 sono pari a 32x32mm. Per personalizzare la dimensione, modificare le dimensioni di questi oggetti nel prefab del pulsante:

  1. FrontPlate
  2. Quad in BackPlate
  3. Collider box sulla radice

Fare quindi clic sul pulsante Correzione limiti nello script NearInteractionTouchable che si trova nella radice del pulsante.

Aggiornare le dimensioni di FrontPlate Button Size customization 1

Aggiornare le dimensioni del quad Button Size customization 2

Aggiornare le dimensioni del collider box Button Size customization 3

Fare clic su 'Correzione limiti' Button Size customization 4

Comando vocale ('see-it, say-it')

Gestore input vocale Lo script interagiscibile in Pulsante premuto implementa IMixedRealitySpeechHandlergià . Una parola chiave del comando vocale può essere impostata qui.

Buttons Speech

Profilo di input vocale È inoltre necessario registrare la parola chiave del comando vocale nel profilo dei comandi vocali globali.

Button speech 2

See-it, Etichetta Say-it Il prefab del pulsante premuto ha un segnaposto TextMesh Pro etichetta sotto l'oggetto SeeItSayItLabel. È possibile usare questa etichetta per comunicare la parola chiave del comando vocale per il pulsante all'utente.

Button Speech 3

Come creare un pulsante da zero

È possibile trovare gli esempi di questi pulsanti nella scena PressableButtonExample .

Pressable button cube 0

1. Creazione di un pulsante premuto con cubo (solo interazione vicina)

  1. Creare un cubo Unity (GameObject > 3D Object > Cube)
  2. Aggiungere PressableButton.cs script
  3. Aggiungere NearInteractionTouchable.cs script

PressableButtonNel pannello Inspector assegnare l'oggetto cubo agli oggetti visivi del pulsante di spostamento.

pressable button cube 3

Quando si seleziona il cubo, verranno visualizzati più livelli colorati sull'oggetto. In questo modo vengono visualizzati i valori di distanza in Premere Impostazioni. Usando gli handle, è possibile configurare quando avviare la pressione (spostare l'oggetto) e quando attivare l'evento.

Pressable Buton cube 1Pressable button cube 2

Quando si preme il pulsante, verrà spostato e generato eventi appropriati esposti nello PressableButton.cs script, ad esempio TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased().

Pressable button cube run 1

Risoluzione dei problemi

Se il pulsante esegue una doppia pressione, assicurarsi che la proprietà Applica push front-end sia attiva e che il piano Start Push Distance venga posizionato davanti al piano Near Interaction Touchable . Il piano Near Interaction Touchable è indicato dal piano blu posizionato davanti all'origine della freccia bianca nella gif seguente:

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. Aggiunta di feedback visivi al pulsante del cubo di base

MRTK Standard Shader offre varie funzionalità che semplificano l'aggiunta di feedback visivi. Creare un materiale e selezionare shader Mixed Reality Toolkit/Standard. Oppure è possibile usare o duplicare uno dei materiali esistenti in /SDK/StandardAssets/Materials/ che usa MRTK Standard Shader.

Pressable button cube 4

Controllare Hover Light e Proximity Light in opzioni Fluent. Ciò consente il feedback visivo per le interazioni vicino (Prossimità luce) e puntatore lontano (Hover Light).

pressable button cube 5pressable button cube run 2

3. Aggiunta di commenti e suggerimenti audio al pulsante del cubo di base

Poiché PressableButton.cs lo script espone eventi come TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased(), è possibile assegnare facilmente commenti audio. È sufficiente aggiungere Unity all'oggetto Audio Source cubo e quindi assegnare clip audio selezionando AudioSource.PlayOneShot(). È possibile usare MRTK_Select_Main e MRTK_Select_Secondary clip audio nella /SDK/StandardAssets/Audio/ cartella.

pressable button cube 7Pressable Button Cube 6

4. Aggiunta di stati visivi e gestione di eventi di interazione lontano

L'interazione è uno script che semplifica la creazione di uno stato visivo per i vari tipi di interazioni di input. Gestisce anche gli eventi di interazione di gran lunga. Aggiungere Interactable.cs e trascinare l'oggetto cubo nel campo Target in Profili. Creare quindi un nuovo tema con un tipo ScaleOffsetColorTheme. In questo tema è possibile specificare il colore dell'oggetto per gli stati di interazione specifici, ad esempio Focus e Pressed. È anche possibile controllare Scalabilità e Offset. Controllare l'interpolazione e impostare la durata per rendere la transizione visiva uniforme.

Select profile theme

L'oggetto risponderà sia lontano (raggio della mano o cursore dello sguardo) sia interazioni vicino(mano).

Pressable Button Cube Run 3Pressable Button Cube Run 4

Esempi di pulsanti personalizzati

Nella scena HandInteractionExample vedere gli esempi di piano e pulsante arrotondamento che usano PressableButtonentrambi .

Pressable Custom1Pressable Custom2

Ogni chiave di piano ha uno PressableButtonNearInteractionTouchable script assegnato. È importante verificare che la direzione inoltro locale di NearInteractionTouchable sia corretta. È rappresentato da una freccia bianca nell'editor. Assicurarsi che la freccia punti lontano dal viso anteriore del pulsante:

Pressable Custom3

Vedi anche