6. Creazione delle interfacce utente6. Creating user interfaces

In questa esercitazione apprenderai come creare un'interfaccia utente semplice usando i prefab di pulsanti e menu di MRTK insieme al componente TextMeshPro di Unity.In this tutorial, you will learn how to create a simple user interface using MRTK's button and menu prefabs alongside Unity's TextMeshPro component. Apprenderai anche come configurare i pulsanti per attivare gli eventi e aggiungere descrizioni comandi dinamiche come elementi dell'interfaccia utente per fornire all'utente informazioni aggiuntive.You will also learn how to configure the buttons to trigger events and add dynamic tooltip UI elements to provide the user with additional information.

ObiettiviObjectives

  • Apprendere come organizzare i pulsanti in una raccoltaLearn how to organize buttons in a collection
  • Apprendere come usare i prefab di menu di MRTKLearn how to use MRTK's menu prefabs
  • Apprendere come interagire con gli ologrammi usando menu e pulsanti dell'interfaccia utenteLearn how to interact with holograms using UI menus and buttons
  • Apprendere come aggiungere elementi di testoLearn how to add text elements
  • Apprendere come generare le descrizioni comandi per gli oggetti in modo dinamicoLearn how to spawn tooltips on objects dynamically

Creazione di un pannello statico di pulsantiCreating a static panel of buttons

Nella finestra Hierarchy (Gerarchia) fai clic con il pulsante destro del mouse sull'oggetto RoverExplorer e scegli Create Empty (Crea vuoto) per aggiungere un oggetto vuoto come figlio di RoverExplorer, quindi assegna all'oggetto il nome Buttons e configura il componente Transform (Trasformazione) come indicato di seguito:In the Hierarchy window, right-click on the RoverExplorer object and select Create Empty to add an empty object as a child of the RoverExplorer, name the object Buttons, and configure the Transform component as follows:

  • Position (Posizione): X = -0.6, Y = 0.036, Z = -0.5Position: X = -0.6, Y = 0.036, Z = -0.5
  • Rotation (Rotazione): X = 90, Y = 0, Z = 0Rotation: X = 90, Y = 0, Z = 0
  • Scale (Scala): X = 1, Y = 1, Z = 1Scale: X = 1, Y = 1, Z = 1

Unity con l'oggetto Buttons appena creato selezionato e posizionato

Nella finestra Project (Progetto) passa alla cartella Assets (Asset) > MRTK.Tutorials.GettingStarted > Prefabs (Prefab), fai clic e trascina il prefab PressableRoundButton sull'oggetto Buttons, quindi fai clic con il pulsante destro del mouse su PressableRoundButton e scegli Duplicate (Duplica) per creare una copia. Ripeti queste operazioni fino a ottenere un totale di tre oggetti PressableRoundButton:In the Project window, navigate to the Assets > MRTK.Tutorials.GettingStarted > Prefabs folder, click-and-drag the PressableRoundButton prefab on to the Buttons object, then right-click on the PressableRoundButton and select Duplicate to create a copy, repeat until you have a total of three PressableRoundButton objects:

Unity con i prefab PressableRoundButton appena aggiunti

Nella finestra Hierarchy (Gerarchia) seleziona l'oggetto Buttons, quindi nella finestra Inspector (Controllo) usa il pulsante Add Component (Aggiungi componente) per aggiungere il componente GridObjectCollection e configuralo come indicato di seguito:In the Hierarchy window, select the Buttons object, then in the Inspector window, use the Add Component button to add the GridObjectCollection component and configure it as follows:

  • Sort Type (Tipo ordinamento): Child Order (Ordine elementi figlio)Sort Type: Child Order
  • Layout: OrizzontaleLayout: Horizontal
  • Cell Width (Larghezza cella): 0.2Cell Width: 0.2
  • Anchor (Ancoraggio): Middle Left (In mezzo a sinistra)Anchor: Middle Left

Fai quindi clic sul pulsante Update Collection (Aggiorna raccolta) per aggiornare la posizione degli oggetti figlio dell'oggetto Buttons:Then click the Update Collection button to update the position of the Buttons object's child objects:

Oggetto Buttons di Unity con il componente GridObjectCollection aggiunto, configurato e applicato

Nella finestra Hierarchy (Gerarchia) assegna ai pulsanti i nomi Hints, Explode e Reset.In the Hierarchy window, name the buttons Hints, Explode, and Reset.

Per ogni pulsante, seleziona l'oggetto figlio SeeItSayItLabel > TextMeshPro, quindi nella finestra Inspector (Controllo) modifica il rispettivo testo componente TextMeshPro - Text (TextMeshPro - Testo) in modo che corrisponda ai nomi dei pulsanti:For each button, select the SeeItSayItLabel > TextMeshPro child object, then in the Inspector window, change the respective TextMeshPro - Text component text to match the button names:

Unity con le etichette di testo dei pulsanti configurate

Al termine, comprimi gli oggetti figlio dell'oggetto Buttons.Once done, collapse the Buttons object's child objects.

Nella finestra Hierarchy (Gerarchia) selezionare l'oggetto pulsante Hints, quindi nella finestra Inspector (Controllo) configurare l'evento Interactable.OnClick () come indicato di seguito:In the Hierarchy window, select the Hints button object, then in the Inspector window, configure the Interactable.OnClick () event as follows:

  • Assegna l'oggetto RoverAssembly al campo None (Object) (Nessuno - Oggetto)Assign the RoverAssembly object to the None (Object) field
  • Dall'elenco a discesa No Function (Nessuna funzione) seleziona PlacementHintsController > TogglePlacementHints () per impostare questa funzione come l'azione da eseguire quando viene attivato l'eventoFrom the No Function dropdown, select PlacementHintsController > TogglePlacementHints () to set this function as the action to be executed when the event is triggered

Unity con l'evento OnClick dell'oggetto pulsante Hints configurato

Suggerimento

Il componente Interactable è un contenitore all-in-one che consente a tutti gli oggetti di interagire con facilità e rispondere all'input.The Interactable component is an all-in-one container to make any object easily interactable and responsive to input. Interactable agisce come un catch-all per tutti i tipi di input, tra cui il tocco, i raggi della mano, il riconoscimento vocale e così via e incanala tali interazioni in eventi e risposte con temi visivi.Interactable acts as a catch-all for all types of input including touch, hand rays, speech, etc. and funnels these interactions into events and visual theme responses. Per informazioni su come configurarlo per diversi tipi di input e personalizzarne il tema visivo, è possibile fare riferimento all'argomento Interactable nel portale della documentazione di MRTK.To learn how to configure it for different input types and customize it's visual theme, you can refer to the Interactable guide in the MRTK Documentation Portal.

Nella finestra Hierarchy (Gerarchia) selezionare l'oggetto pulsante Explode, quindi nella finestra Inspector (Controllo) configurare l'evento Interactable.OnClick () come indicato di seguito:In the Hierarchy window, select the Explode button object, then in the Inspector window, configure the Interactable.OnClick () event as follows:

  • Assegna l'oggetto RoverAssembly al campo None (Object) (Nessuno - Oggetto)Assign the RoverAssembly object to the None (Object) field
  • Dall'elenco a discesa No Function (Nessuna funzione) seleziona ExplodedViewController > ToggleExplodedView () per impostare questa funzione come l'azione da eseguire quando viene attivato l'eventoFrom the No Function dropdown, select ExplodedViewController > ToggleExplodedView () to set this function as the action to be executed when the event is triggered

Unity con l'evento OnClick dell'oggetto pulsante Explode configurato

Premi il pulsante Play (Riproduci) per attivare la modalità di gioco, quindi tieni premuto il pulsante della barra spaziatrice per attivare la mano e usa il mouse per premere il pulsante Hints per attivare/disattivare la visibilità degli oggetti relativi ai suggerimenti per il posizionamento:Press the Play button to enter Game mode, then press-and-hold the space bar button to activate the hand and use the mouse to press the Hints button to toggle the visibility of the placement hint objects:

Visualizzazione suddivisa della modalità di riproduzione in Unity con il pulsante Hints selezionato

e il pulsante Explode per attivare e disattivare la visualizzazione esplosa:and the Explode button to toggle the exploded view on and off:

Visualizzazione suddivisa della modalità di riproduzione in Unity con il pulsante Explode selezionato

Creazione di un menu dinamico che segue l'utenteCreating a dynamic menu that follows the user

Nella finestra Project (Progetto) passare alla cartella Assets (Asset) > MRTK > SDK > Features (Funzionalità) > UX > Prefabs (Prefab) > Menus (Menu), fare clic e trascinare il prefab NearMenu4x1 nella finestra Hierarchy (Gerarchia), impostare il campo Position (Posizione) della trasformazione su X = 0, Y = -0.4, Z = 0 e configurare il prefab come indicato di seguito:In the Project window, navigate to the Assets > MRTK > SDK > Features > UX > Prefabs > Menus folder, click-and-drag the NearMenu4x1 prefab into the Hierarchy window, set its Transform Position to X = 0, Y = -0.4, Z = 0 and configure it as follows:

  • Verifica che per Tracked Target Type (Tipo destinazione tracciata) del componente SolverHandler sia impostato il valore Head (Testa)Verify that the SolverHandler component's Tracked Target Type is set to Head
  • Seleziona la casella di controllo accanto al componente RadialView in modo che sia abilitato per impostazione predefinitaCheck the checkbox next to the RadialView Solver component so it is enabled by default

Unity con il prefab NearMenu appena aggiunto selezionato

Nella finestra Hierarchy (Gerarchia) rinomina l'oggetto come Menu, quindi espandi il relativo oggetto figlio ButtonCollection per visualizzare i quattro pulsanti:In the Hierarchy window, rename the object to Menu, then expand its ButtonCollection child object to reveal the four buttons:

Unity con l'oggetto Menu selezionato e l'oggetto ButtonCollection espanso

Rinominare il primo pulsante nell'indicatore Buttoncollection in, quindi nella finestra Inspector configurare il componente helper config (script) del pulsante come indicato di seguito:Rename the first button in the ButtonCollection to Indicator, then in the Inspector window, configure the Button Config Helper (Script) component as follows:

  • Modifica il contenuto di Main Label Text (Testo etichetta principale) in modo che corrisponda al nome del pulsanteChange the Main Label Text to match the name of the button
  • Assegnare l'oggetto indicatore simile a una freccia di espansione al campo None (Object).Assign the Indicator object that looks like a chevron, to the None (Object) field
  • Dall'elenco a discesa No Function (Nessuna funzione) seleziona GameObject > SetActive (bool) per impostare questa funzione come l'azione da eseguire quando viene attivato l'eventoFrom the No Function dropdown, select GameObject > SetActive (bool) to set this function as the action to be executed when the event is triggered
  • Verifica che la casella di controllo dell'argomento sia selezionataVerify that the argument checkbox is checked
  • Imposta Icon (Icona) sull'icona di ricercaChange the Icon to the 'search' icon

Unity con il componente Button Config Helper dell'oggetto pulsante Indicator configurato

Per disabilitare l'oggetto indicatore Chevron, nella finestra gerarchia selezionare l'oggetto indicatore simile a Chevron, quindi nella finestra di controllo:To disable the chevron Indicator object, in the Hierarchy window, select the Indicator object that looks like chevron, then in the Inspector window:

  • Deseleziona la casella di controllo accanto al nome per rendere inattivo il componente per impostazione predefinitaUncheck the checkbox next to its name to make it inactive by default
  • Usare il pulsante Add Component (Aggiungi componente) per aggiungere il componente Directional Indicator Controller (Script) (Controller destinazione direzionale - Script)Use the Add Component button to add the Directional Indicator Controller (Script) component

Unity con l'oggetto Indicator selezionato e disabilitato e il componente DirectionalIndicatorController aggiunto

Nota

A questo punto, all'avvio dell'app, l'indicatore della freccia di espansione è disabilitato per impostazione predefinita e può essere abilitato premendo il pulsante dell'indicatore.Now, when the app starts, the chevron Indicator is disabled by default and can be enabled by pressing the Indicator button.

Rinomina il secondo pulsante come TapToPlace, quindi nella finestra Inspector (Controllo) configura il componente Button Config Helper (Script) (Helper configurazione pulsanti - Script) come indicato di seguito:Rename the second button to TapToPlace, then in the Inspector window, configure the Button Config Helper (Script) component as follows:

  • Modifica il contenuto di Main Label Text (Testo etichetta principale) in modo che corrisponda al nome del pulsanteChange the Main Label Text to match the name of the button
  • Assegna l'oggetto RoverExplorer > RoverAssembly al campo None (Object) (Nessuno - Oggetto)Assign the RoverExplorer > RoverAssembly object to the None (Object) field
  • Dall'elenco a discesa No Function (Nessuna funzione) seleziona TapToPlace > bool Enabled per aggiornare il valore di questa proprietà quando viene attivato l'eventoFrom the No Function dropdown, select TapToPlace > bool Enabled to update this property value when the event is triggered
  • Verifica che la casella di controllo dell'argomento sia selezionataVerify that the argument checkbox is checked
  • Imposta Icon (Icona) sull'icona della mano con raggioChange the Icon to the 'hand with ray' icon

Unity con il componente Button Config Helper dell'oggetto pulsante TapToPlace configurato

Nella finestra Hierarchy (Gerarchia) seleziona l'oggetto RoverAssembly, quindi nella finestra Inspector (Controllo) configura il componente Tap To Place (Script) (Tocco per posizionamento - Script) come indicato di seguito:In the Hierarchy window, select the RoverAssembly object, then in the Inspector window, configure the Tap To Place (Script) component as follows:

  • Deseleziona la casella di controllo accanto al nome per rendere inattivo il componente per impostazione predefinitaUncheck the checkbox next to its name to make it inactive by default
  • Nella sezione dell'evento On Placing Stopped () (All'arresto del posizionamento) fare clic sull'icona + per aggiungere un nuovo evento:In the On Placing Stopped () event section, click the + icon to add a new event:
  • Assegna l'oggetto RoverExplorer > RoverAssembly al campo None (Object) (Nessuno - Oggetto)Assign the RoverExplorer > RoverAssembly object to the None (Object) field
  • Dall'elenco a discesa No Function (Nessuna funzione) seleziona TapToPlace > bool Enabled per aggiornare il valore di questa proprietà quando viene attivato l'eventoFrom the No Function dropdown, select TapToPlace > bool Enabled to update this property value when the event is triggered
  • Verifica che la casella di controllo dell'argomento sia deselezionataVerify that the argument checkbox is unchecked

Unity con il componente TapToPlace riconfigurato

Nota

A questo punto, all'avvio dell'app, la funzionalità di tocco per posizionamento è disabilitata per impostazione predefinita e può essere abilitata premendo il pulsante TaptoPlace.Now, when the app starts, the Tap to Place functionality is disabled by default and can be enabled by pressing the Tap to Place button. Inoltre, quando il tocco per posizionamento viene completato, si disabilita automaticamente.Additionally, when the tap to place is completed, it will disable itself.

Aggiunta di testo alla scenaAdding text to the scene

Nella finestra Hierarchy (Gerarchia) fai clic con il pulsante destro del mouse sull'oggetto Table (Tabella) e scegli 3D Object (Oggetto 3D) > Text - TextMeshPro (Testo - TextMeshPro) per aggiungere un oggetto di testo come figlio dell'oggetto Table (Tabella), quindi nella finestra Inspector (Controllo) configura il componente Rect Transform (Trasformazione rettangolare) come indicato di seguito:In the Hierarchy window, right-click on the Table object and select 3D Object > Text - TextMeshPro to add a text object as a child of the Table object, then in the Inspector window, configure the Rect Transform component as follows:

  • Imposta Pos Y (Posizione Y) su 1Change Pos Y to 1
  • Imposta Width (Larghezza) su 1Change Width to 1
  • Imposta Height (Altezza) su 1Change Height to 1
  • Imposta Rotation X (Rotazione X) su 90Change Rotation X to 90

Unity con l'oggetto TextMeshPro appena creato selezionato

Quindi configura il componente TextMeshPro - Text (TextMeshPro - Testo) come indicato di seguito:Then configure the TextMeshPro - Text component as follows::

  • Imposta Text (Testo) su Rover ExplorerChange Text to Rover Explorer
  • Imposta Font Style (Stile carattere) su Bold (Grassetto)Change Font Style to Bold
  • Imposta Font Size (Dimensione carattere) su 1Change Font Size to 1
  • Imposta Extra Settings (Impostazioni aggiuntive) > Margins (Margini) su 0.03Change Extra Settings > Margins to 0.03

Unity con il componente TextMeshPro configurato

Aggiunta di descrizioni comandiAdding tooltips

Nella finestra Project (Progetto) passa alla cartella Assets (Asset) > MRTK > SDK > Features (Funzionalità) > UX > Prefabs (Prefab) > ToolTip (Descrizione comando) per individuare i prefab relativi alle descrizioni comandi:In the Project window, navigate to the Assets > MRTK > SDK > Features > UX > Prefabs > ToolTip folder to locate the tooltip prefabs:

Finestra Project di Unity con la cartella ToolTips selezionata

Nella finestra Hierarchy (Gerarchia) espandi l'oggetto RoverExplorer > RoverParts e seleziona tutti i relativi oggetti parte rover figlio, quindi nella finestra Inspector (Controllo) usa il pulsante Add Component (Aggiungi componente) per aggiungere il componente ToolTipSpawner e configuralo come indicato di seguito:In the Hierarchy window, expand the RoverExplorer > RoverParts object and select all its child rover part objects, then in the Inspector window, use the Add Component button to add the ToolTipSpawner component and configure it as follows:

  • Verifica che la casella di controllo Focus Enabled (Stato attivo abilitato) sia selezionata per richiedere all'utente di guardare la parte per visualizzare la descrizione comandoEnsure the Focus Enabled checkbox is checked to require the user to look at the part for the tooltip to appear
  • Assegnare la Descrizione comando della riga semplice prefabbricata dalla finestra del progetto al campo prefabbricatoAssign the Simple Line ToolTip prefab from the Project window to the Prefab field
  • Imposta ToolTip Override Settings (Impostazioni di override descrizione comando) > Settings Mode (Modalità impostazioni) su OverrideChange the ToolTip Override Settings > Settings Mode to Override
  • Imposta ToolTip Override Settings (Impostazioni di override descrizione comando) > Manual Pivot Local Position Y (Posizione Y locale pivot manuale) su 1.5Change the ToolTip Override Settings > Manual Pivot Local Position Y to 1.5

Unity con tutti gli oggetti parte rover selezionati e il componente ToolTipSpawner aggiunto e configurato

Nella finestra Hierarchy (Gerarchia) seleziona la prima parte rover, RoverParts > Camera_Part, e configura il componente ToolTipSpawner come indicato di seguito:In the Hierarchy window, select the first rover part, RoverParts > Camera_Part, and configure the ToolTipSpawner component as follows:

  • Modifica Tool Tip Text (Testo descrizione comando) in modo che rifletta il nome della parte, ovvero CameraChange Tool Tip Text to reflect the name of the part, i.e., Camera

Unity con l'opzione Tool Tip Text della fotocamera configurata

Ripeti questo passaggio per ogni oggetto parte rover per configurare il componente ToolTipSpawner come indicato di seguito:Repeat this step for each of the rover part objects to configure the ToolTipSpawner component as follows:

  • Per Generator_Part, imposta Tool Tip Text (Testo descrizione comando) su GeneratorFor the Generator_Part, change the Tool Tip Text to Generator
  • Per Lights_Part, imposta Tool Tip Text (Testo descrizione comando) su LightsFor the Lights_Part, change the Tool Tip Text to Lights
  • Per UHFAntenna_Part, imposta Tool Tip Text (Testo descrizione comando) su UHF AntennaFor the UHFAntenna_Part, change the Tool Tip Text to UHF Antenna field
  • Per Spectrometer_Part, imposta Tool Tip Text (Testo descrizione comando) su SpectrometerFor the Spectrometer_Part, change the Tool Tip Text to Spectrometer

Seleziona il pulsante Play (Riproduci) per attivare la modalità di gioco, quindi tieni premuto il pulsante destro del mouse mentre muovi il mouse finché lo sguardo non incontra una delle parti. Verrà così visualizzata la descrizione comando relativa a tale parte:Press the Play button to enter Game mode, then press-and-hold the right mouse button while moving your mouse until the gaze hit's one of the parts and the tooltip for that part will be displayed:

Visualizzazione suddivisa della modalità di riproduzione in Unity con descrizione comando attivata dallo sguardo fisso

Lezione completataCongratulations

In questa esercitazione hai appreso come creare un'interfaccia utente semplice usando i prefab per pulsanti e menu forniti da MRTK insieme al componente TextMeshPro di Unity e come configurare i pulsanti per attivare eventi quando vengono premuti.In this tutorial, you learned how to create a simple user interface using MRTK's provided button and menu prefabs alongside Unity's TextMeshPro component and how to configure the buttons to trigger events when they are pressed. Hai inoltre appreso come aggiungere elementi descrizione comando dinamici per l'interfaccia utente per fornire all'utente informazioni aggiuntive.You also learned how to add dynamic tooltip UI elements to provide the user with additional information.