4. Rendere la scena interattiva4. Making your scene interactive

Nell'esercitazione precedente sono stati aggiunti un asset ARSession, il pedone e la modalità gioco per completare la configurazione della realtà mista per l'app per gli scacchi.In the previous tutorial, you added an ARSession, Pawn, and Game Mode to complete the mixed reality setup for the chess app. Questa sezione è dedicata al plug-in open source UX Tools di Mixed Reality Toolkit, che include gli strumenti necessari per rendere la scena interattiva.This section focuses on using the open source Mixed Reality Toolkit UX Tools plugin, which provides tools to make the scene interactive. Al termine di questa sezione, i pezzi degli scacchi si muoveranno in base all'input dell'utente.By the end of this section, your chess pieces will be moving by user input.

ObiettiviObjectives

  • Installazione del plug-in UX Tools di Mixed Reality Toolkit da GitHubInstalling the Mixed Reality UX Tools plugin from GitHub
  • Aggiunta di attori di interazione manuale sulla punta delle ditaAdding Hand Interaction Actors to your fingertips
  • Creazione e aggiunta di manipolatori agli oggetti nella scenaCreating and adding Manipulators to objects in the scene
  • Uso della simulazione dell'input per convalidare il progettoUsing input simulation to validate the project

Download del plug-in UX Tools di Mixed Reality ToolkitDownloading the Mixed Reality UX Tools plugin

Prima di iniziare a usare l'input dell'utente, è necessario aggiungere il plug-in al progetto.Before you start working with user input, you'll need to add the plugin to the project.

  1. Nella pagina delle versioni del plug-in UX Tools di Mixed Reality Toolkit su GitHub passare alla versione UX Tools for Unreal v0.10.0 e scaricare UXTools.0.10.0.zip.On the Mixed Reality UX Tools releases page on GitHub, navigate to the UX Tools for Unreal v0.10.0 release and download UXTools.0.10.0.zip. Decomprimere i file.Unzip the file.

  2. Crea una nuova cartella denominata Plugins (Plug-in) nella cartella radice del progetto.Create a new folder called Plugins in the root folder of the project. Copia il plug-in UXTools decompresso in questa cartella e riavvia l'editor Unreal.Copy the unzipped UXTools plugin into this folder and restart the Unreal editor.

Creare una cartella dei plug-in del progetto

  1. Il plug-in UX Tools include una cartella Content (Contenuto) con sottocartelle per i componenti, tra cui Buttons (Pulsanti), Input Simulation (Simulatori di input) e Pointers (Puntatori), oltre a una cartella C++ Classes (Classi C++) con codice aggiuntivo.The UXTools plugin has a Content folder with subfolders for components, including Buttons, Input Simulation, and Pointers, and a C++ Classes folder with additional code.

Nota

Se non viene visualizzata la sezione UXTools Content (Contenuto UXTools) in Content Browser (Browser contenuto), fai clic su View Options > Show Plugin Content (Opzioni visualizzazione > Mostra contenuto plug-in).If you don’t see the UXTools Content section in the Content Browser, click View Options > Show Plugin Content.

Mostra contenuto plug-in

La documentazione aggiuntiva per il plug-in è reperibile nel repository Mixed Reality UX Tools su GitHub.Additional plugin documentation can be found on the Mixed Reality UX Tools GitHub repository.

Una volta installato il plug-in, è possibile iniziare a usare gli strumenti che include, partendo dagli attori di interazione manuale.With the plugin installed, you're ready to start using the tools it has to offer, starting with hand interaction actors.

Generazione di attori di interazione manualeSpawning Hand Interaction Actors

L'interazione manuale con gli elementi UX avviene con gli attori di interazione manuale, che creano e guidano i puntatori e gli oggetti visivi per le interazioni da vicino e da lontano.Hand interaction with UX elements is done with Hand Interaction Actors, which create and drive the pointers and visuals for near and far interactions.

  • Le interazioni da vicino vengono eseguite avvicinando le dita e afferrando gli elementi tra l'indice e il pollice, oppure colpendoli con la punta del dito.Near interactions - pinching elements between index finger and thumb or by poking them with a fingertip.
  • Le interazioni da lontano avvengono puntando un raggio dalla mano virtuale su un elemento e premendo indice e pollice insieme.Far interactions - pointing a ray from the virtual hand at an element and pressing index and thumb together.

In questo caso, l'aggiunta di un attore di interazione manuale a MRPawn consentirà di:In our case, adding a Hand Interaction Actor to MRPawn will:

  • Aggiungere un cursore sulla punta degli indici del pedone.Add a cursor to the tips of the Pawn’s index fingers.
  • Specificare eventi di input della mano articolata che possono essere manipolati tramite il pedone.Provide articulated hand input events that can be manipulated through the Pawn.
  • Prevedere eventi di input di interazione da lontano tramite raggi che si estendono dai palmi delle mani virtuali.Allow far interaction input events through hand rays extending from the palms of the virtual hands.

Prima di continuare, è consigliabile leggere la documentazione sulle interazioni manuali.We recommend reading through the documentation on hand interactions before continuing.

Quando sei pronto, apri il progetto MRPawn e passa a Event Graph (Grafico eventi).Once you're ready, open the MRPawn Blueprint and go to the Event Graph.

  1. Trascina e rilascia il segnaposto di esecuzione da Event BeginPlay (Evento BeginPlay) per inserire un nuovo nodo.Drag and release the execution pin from Event BeginPlay to place a new node.

    • Seleziona Spawn Actor from Class (Genera attore da classe), fai clic sull'elenco a discesa accanto al segnaposto Class (Classe) e cerca Uxt Hand Interaction Actor (Attore di interazione manuale Uxt).Select Spawn Actor from Class, click the dropdown next to the Class pin and search for Uxt Hand Interaction Actor.
  2. Generare un secondo Uxt Hand Interaction Actor (Attore di interazione manuale Uxt), questa volta impostando Hand (Mano) su Right (Destra).Spawn a second Uxt Hand Interaction Actor, this time setting the Hand to Right. All'avvio dell'evento, verrà generato un attore di interazione manuale Uxt su ogni mano.When the event begins, a Uxt Hand Interaction Actor will be spawned on each hand.

La finestra Event Graph (Grafico eventi) dovrebbe risultare analoga alla seguente:Your Event Graph should match the following screenshot:

Generare attori di interazione manuale Uxt

Entrambi gli attori di interazione manuale Uxt devono avere proprietari e posizioni di trasformazione iniziale.Both Uxt Hand Interaction Actors need owners and initial transform locations. La trasformazione iniziale non è rilevante in questo caso perché nel plug-in UX Tools sono inclusi attori di interazione manuale che passano alle mani virtuali non appena sono visibili.The initial transform doesn’t matter in this case because UX Tools will have the Hand Interaction Actors will jump to the virtual hands as soon as they're visible. La funzione SpawnActor, tuttavia, richiede un input di trasformazione per evitare un errore del compilatore, quindi useremo i valori predefiniti.However, the SpawnActor function requires a Transform input to avoid a compiler error, so you'll use the default values.

  1. Trascina e rilascia il segnaposto fuori da uno dei segnaposto Spawn Transform (Genera trasformazione) per inserire un nuovo nodo.Drag and release the pin off one of the Spawn Transform pins to place a new node.

    • Cerca il nodo Make Transform (Crea trasformazione) e quindi trascina Return Value (Valore restituito) su Spawn Transform (Genera trasformazione) dell'altra mano, in modo che entrambi i nodi SpawnActor (Genera attore) siano connessi.Search for the Make Transform node, then drag the Return Value to the other hand’s Spawn Transform so that both SpawnActor nodes are connected.
  2. Selezionare la freccia giù nella parte inferiore di entrambi i nodi SpawnActor (Genera attore) per visualizzare il segnaposto Owner (Proprietario).Select the down arrow at the bottom of both SpawnActor nodes to reveal the Owner pin.

    • Trascina il segnaposto fuori da uno dei segnaposto Owner (Proprietario) e rilascialo per inserire un nuovo nodo.Drag the pin off one of the Owner pins and release to place a new node.
    • Cercare self e selezionare la variabile Get a reference to self (Ottieni riferimento a Self).Search for self and select the Get a reference to self variable.
    • Creare un collegamento tra il nodo di riferimento all'oggetto Self e l'altro segnaposto Owner (Proprietario) dell'attore di interazione manuale.Create a link between the Self object reference node and the other Hand Interaction Actor’s Owner pin.
  3. Infine, selezionare la casella Show Near Cursor on Grab Targets (Mostra cursore di prossimità sui target di cattura) per entrambi gli attori di interazione manuale.Lastly, check the Show Near Cursor on Grab Targets box for both Hand Interaction Actors. Verrà visualizzato un cursore sul target di cattura quando il dito indice si avvicina per consentire di vedere più facilmente la posizione del dito rispetto al target.A cursor should appear on the grab target as your index finger gets close, so you can see where your finger is relative to the target.

    • Compila, Salva e torna alla finestra principale.Compile, save, and return to the Main window.

Assicurarsi che le connessioni corrispondano allo screenshot seguente, ma trascinare liberamente i nodi per rendere più leggibile il progetto.Make sure the connections match the following screenshot, but feel free to drag around nodes to make your Blueprint more readable.

Configurazione completa dell'attore di interazione manuale Uxt

Per altre informazioni sugli attori di interazione manuale, vedere la documentazione di UX Tools.You can find more information about Hand Interaction Actors in the UX Tools documentation.

Ora le mani virtuali nel progetto sono in grado di selezionare gli oggetti, ma non possono ancora manipolarli.Now the virtual hands in the project have a way of selecting objects, but they still can't manipulate them. L'ultima attività prima di testare l'app consiste nell'aggiungere i componenti del manipolatore agli attori nella scena.Your last task before testing the app is to add Manipulator components to the actors in the scene.

Collegamento di manipolatoriAttaching Manipulators

Un manipolatore è un componente che risponde agli input della mano articolata e può essere afferrato, ruotato o spostato.A Manipulator is a component that responds to articulated hand input and can be grabbed, rotated, and translated. Quando si applica la trasformazione del manipolatore a quella degli attori, gli attori possono essere manipolati direttamente.Applying the Manipulator’s transform to an Actors transform allows direct Actor manipulation.

  1. Apri il progetto Board (Tavola), fai clic su Add Component (Aggiungi componente) e cerca Uxt Generic Manipulator (Manipolatore generico Uxt) nel pannello Components (Componenti).Open the Board blueprint, click Add Component and search for Uxt Generic Manipulator in the Components panel.

Aggiungere un manipolatore generico

  1. Espandi la sezione Generic Manipulator (Manipolatore generico) nel panello Details (Dettagli).Expand the Generic Manipulator section in the Details panel. Da qui puoi impostare la manipolazione a una mano o a due mani, la modalità di rotazione e i movimenti uniformi.You can set one-handed or two-handed manipulation, rotation mode, and smoothing from here. Seleziona la modalità desiderata e quindi Compile (Compila) e Save (Salva) per salvare la tavola.Feel free to select whichever modes you wish, then Compile and Save Board.

Impostare la modalità

  1. Ripeti i passaggi precedenti per l'attore WhiteKing (Re bianco).Repeat the steps above for the WhiteKing Actor.

Nella documentazione è possibile trovare altre informazioni sui componenti del manipolatore disponibili nel plug-in UX Tools di Mixed Reality Toolkit.You can find more information about the Manipulator Components provided in the Mixed Reality UX Tools plugin in the documentation.

Test della scenaTesting the scene

Ottimo!Good news everyone! A questo punto puoi testare l'app con le nuove mani virtuali e l'input utente.You're ready to test out the app with its new virtual hands and user input. Premere Play (Gioca) nella finestra principale. Verranno visualizzate due mani con mesh i cui raggi si estendono dal palmo.Press Play in the Main Window and you'll see two mesh hands with rays extending from each hand’s palm. Puoi controllare le mani e le relative interazioni nel modo seguente:You can control the hands and their interactions as follows:

  • Tieni premuto ALT di sinistra per controllare la mano sinistra e MAIUSC di sinistra per controllare la mano destra.Hold down the left Alt key to control the left hand and the left Shift key to control the right hand.
  • Sposta il mouse per muovere la mano e scorri con la rotellina del mouse per spostare la mano avanti o indietro.Move your mouse to move the hand and scroll with your mouse wheel to move the hand forwards or backwards.
  • Usare il pulsante sinistro del mouse per avvicinare le dita e il pulsante centrale del mouse per picchiettare con le dita.Use the left mouse button to pinch and the middle mouse button to poke.

Nota

La simulazione di input potrebbe non funzionare se sono collegati più visori VR al computer.Input simulation may not work if you have multiple headsets plugged into your PC. In caso di problemi, provare a scollegare gli altri visori VR.If you're having issues, try unplugging your other headsets.

Mani simulate nel riquadro di visualizzazione

Prova a usare le mani simulate per sollevare, spostare e appoggiare il re bianco e manipolare la scacchiera.Try using the simulated hands to pick up, move, and set down the white chess king and manipulate the board! Provare a usare l'interazione da vicino e da lontano. Tenere presente che, quando le mani si avvicinano abbastanza da poter afferrare direttamente la scacchiera e il re, il raggio della mano viene sostituito da un cursore a forma di dito sulla punta dell'indice.Experiment with both near and far interaction - notice that when your hands get close enough to grab the board and king directly, a finger cursor at the tip of the index finger replaces the hand ray.

Per altre informazioni sulla funzionalità delle mani simulate fornita dal plug-in UX Tools di MRTK, consulta la documentazione.You can find more information about the simulated hands feature provided by the MRTK UX Tools plugin in the documentation.

Ora che le mani virtuali possono interagire con gli oggetti, puoi passare all'esercitazione successiva e aggiungere interfacce utente ed eventi.Now that your virtual hands can interact with objects, you're ready to move on to the next tutorial and add user interfaces and events.

Sezione successiva: 5. Aggiunta di un pulsante e reimpostazione delle posizioni della parteNext Section: 5. Adding a button & resetting piece locations