5. Aggiunta di un pulsante e ripristino delle posizioni dei pezzi5. Adding a button & resetting piece locations

Nell'esercitazione precedente hai aggiunto attori di interazione manuale al pedone e componenti manipolatore alla scacchiera per renderli entrambi interattivi.In the previous tutorial, you added Hand Interaction Actors to the Pawn and Manipulator components to the chess board to make them both interactive. In questa sezione si continuerà a usare il plug-in UX Tools di Mixed Reality Toolkit per creare l'app per gli scacchi con le nuove funzioni e i riferimenti agli attori nei progetti.In this section, you'll continue to use the Mixed Reality Toolkit UX Tools plugin to build out your chess app with new functions and Actor references in Blueprints. Al termine di questa sezione sarai in grado di creare un pacchetto dell'app di realtà mista e distribuirla in un dispositivo o emulatore.By the end of this section, you'll be ready to package and deploy the mixed reality app on a device or emulator.

ObiettiviObjectives

  • Aggiunta di un pulsante interattivoAdding an interactive button
  • Creazione di una funzione per la riportare un pezzo nella posizione inizialeCreating a function to reset a pieces' location
  • Associazione del pulsante in modo che attivi la funzione quando viene premutoHooking the button up to trigger the function when pressed

Creazione di una funzione di reimpostazioneCreating a reset function

La prima attività consiste nel creare un progetto di funzione che riporta un pezzo degli scacchi nella sua posizione originale nella scena.Your first task is to create a function blueprint that resets a chess piece to its original position in the scene.

  1. Aprire WhiteKing (Re bianco), selezionare l'icona + accanto alla sezione Functions (Funzioni) in My Blueprint (Progetto personale) e assegnare alla funzione il nome Reset Location (Ripristina posizione).Open WhiteKing, select the + icon next to the Functions section in the My Blueprint and name it Reset Location.

  2. Trascina e rilascia l'esecuzione da Reset Location (Ripristina posizione) nella griglia del progetto per creare un nodo SetActorRelativeTransform.Drag and release the execution from Reset Location on the Blueprint grid to create a SetActorRelativeTransform node.

    • Questa funzione imposta la trasformazione (posizione, rotazione e scala) di un attore rispetto al relativo elemento padre.This function sets the transform (location, rotation, and scale) of an actor relative to its parent. Questa funzione verrà usata per ripristinare la posizione del Re sulla scacchiera, anche se è stata spostata dalla posizione originale.You’ll use this function to reset the king’s position on the board, even if the board has been moved from its original position.
  3. Fai clic con il pulsante destro del mouse all'interno di Event Graph (Grafico eventi), scegli Make Transform (Crea trasformazione) e imposta Location (Posizione) su X = -26, Y = 4, Z = 0.Right-click inside the Event Graph, select Make Transform, and change its Location to X = -26, Y = 4, Z = 0.

    • Connetti il relativo Return Value (Valore restituito) al segnaposto New Relative Transform (Nuova trasformazione relativa) in SetActorRelativeTransform.Connect its Return Value to the New Relative Transform pin in SetActorRelativeTransform.

Funzione di ripristino della posizione

Scegli Compile (Compila) e Save (Salva) per compilare e salvare il progetto prima di tornare alla finestra princpale.Compile and Save the project before returning to the Main window.

Aggiunta di un pulsanteAdding a button

Ora che la funzione è stata configurata correttamente, l'attività successiva consiste nel creare un pulsante che la attiva quando viene toccato.Now that the function is set up correctly, your next task is to create a button that fires it off when touched.

  1. Fare clic su Add New > Blueprint Class (Aggiungi nuovo > Classe progetto), espandere la sezione All Classes (Tutte le classi) e cercare UxtPressableButtonActor.Click Add New > Blueprint Class, expand the All Classes section, and search for UxtPressableButtonActor.
    • Assegna il nome ResetButton e fai doppio clic per aprire il progetto.Name it ResetButton and double click to open the Blueprint

Creare il nuovo progetto come sottoclasse del pulsante di stile HoloLens 2

  1. Verificare che sia selezionata l'opzione ResetButton(self) nel pannello Components (Componenti).Ensure ResetButton(self) is selected in the Components panel. Nel pannello Details (Dettagli) passare alla sezione Button (Pulsante).In the Details panel, navigate to the Button section. Cambiare il valore predefinito di Button Label (Etichetta pulsante) in "Reset" (Ripristina), espandere la sezione Button Icon Brush (Pennello icona pulsante) e selezionare il pulsante Open Icon Brush Editor (Apri Icon Brush Editor).Change the default Button Label to "Reset", expand the Button Icon Brush section, and press the Open Icon Brush Editor button.

Impostare l'etichetta e l'icona sul pulsante

Si aprirà Icon Brush Editor, che può essere usato per selezionare una nuova icona per il pulsante.The Icon Brush Editor will open, which you can use to select a new icon for your button.

Selezionare un'icona per il pulsante

È possibile modificare molte altre impostazioni per configurare il pulsante.There are plenty of other settings you can adjust to configure your button. Per altre informazioni sul componente UXT Pressable Button, vedere la documentazione.To learn more about the UXT Pressable Button component, check out the documentation.

  1. Fare clic su ButtonComponent (Inherited) (ButtonComponent - Ereditato) nel pannello Components (Componenti) e scorrere verso il basso nel pannello Details (Dettagli) fino alla sezione Events (Eventi).Click ButtonComponent (Inherited) in the Components panel and scroll down the Details panel to the Events section.
    • Fai clic sul pulsante + verde accanto a On Button Pressed (Alla pressione del pulsante) per aggiungere un evento al grafico degli eventi, che verrà chiamato ogni volta che viene premuto il pulsante.Click the green + button next to On Button Pressed to add an event to the Event Graph, which will be called when the button is pressed.

A questo punto puoi chiamare la funzione Reset Location (Ripristina posizione) di WhiteKing (Re bianco), che necessita un riferimento all'attore WhiteKing (Re bianco) nel livello.From here, you’ll want to call WhiteKing’s Reset Location function, which needs a reference to the WhiteKing Actor in the Level.

  1. Nel pannello My Blueprint (Progetto personale) passare alla sezione Variables (Variabili), fare clic sul pulsante + e assegnare alla variabile il nome WhiteKing.In the My Blueprint panel, navigate to the Variables section, click the + button, and name the variable WhiteKing.
    • Nel pannello Details (Dettagli) selezionare l'elenco a discesa accanto a Variable Type (Tipo di variabile), cercare WhiteKing e selezionare Object Reference (Riferimento oggetto).In the Details panel, select the dropdown next to Variable Type, search for WhiteKing, and select the Object Reference.
    • Selezionare la casella accanto a Instance Editable (Modificabile dell'istanza), che consente di impostare la variabile dal livello principale.Check the box next to Instance Editable, which allows the variable to be set from the Main Level.

Creazione di una variabile

  1. Trascina la variabile WhiteKing da My Blueprint > Variables (Progetto personale > Variabili) in Reset Button Event Graph (Grafico eventi ResetButton) e scegli Get WhiteKing (Ottieni WhiteKing).Drag the WhiteKing variable from My Blueprint > Variables onto the Reset Button Event Graph and choose Get WhiteKing.

Attivazione della funzioneFiring the function

A questo punto non resta che attivare la funzione di reimpostazione alla pressione del pulsante.All that's left is to officially fire off the reset function when the button is pressed.

  1. Trascina il pin di output di WhiteKing e rilascialo per inserire un nuovo nodo.Drag the WhiteKing output pin and release to place a new node. Seleziona la funzione Reset Location (Ripristina posizione).Select the Reset Location function. Trascina infine il pin di esecuzione in uscita da On Button Pressed (Alla pressione del pulsante) al pin di esecuzione in ingresso in Reset Location (Ripristina posizione).Finally, drag the outgoing execution pin from On Button Pressed to the incoming execution pin on Reset Location. Fai clic su Compile (Compila) e quindi su Save (Salva) per salvare il progetto ResetButton e quindi torna alla finestra principale.Compile and Save the ResetButton Blueprint, then return to the Main window.

Chiamata della funzione di ripristino della posizione alla pressione del pulsante

  1. Trascina ResetButton nel viewport e impostane la posizione su X = 50, Y = -25 e Z = 10.Drag ResetButton into the viewport and set its location to X = 50, Y = -25, and Z = 10. Impostarne la rotazione su Z = 180.Set its rotation to Z = 180. In Default (Valore predefinito) imposta il valore della variabile WhiteKing su WhiteKing.Under Default, set the value of the WhiteKing variable to WhiteKing.

Impostazione della variabile

Eseguire l'app, spostare il pezzo in una nuova posizione e premere il pulsante di stile HoloLens 2 per vedere in azione la logica di reimpostazione.Run the app, move the chess piece to a new location, and press your HoloLens 2-style button to see the reset logic in action!

A questo punto si ha un'app di realtà mista con un pezzo degli scacchi interattivo e una scacchiera, insieme a un pulsante completamente funzionante che ripristina la posizione del pezzo.You now have a mixed reality app with an interactable chess piece and board, and a fully functioning button that resets the piece’s location. L'app completata fino a questo punto è disponibile nel repository di GitHub corrispondente.You can find the completed app up to this point in its GitHub repo. Al termine di questa esercitazione è possibile proseguire configurando gli altri pezzi degli scacchi, in modo da ripristinare l'intera scacchiera quando si preme il pulsante per il ripristino.Feel free to go beyond this tutorial and set up the rest of the chess pieces so that the entire board is reset when you press the reset button.

Schermata finale in viewport

È ora possibile passare alla sezione finale di questa esercitazione, in cui viene illustrato come creare un pacchetto dell'app e distribuirla in un dispositivo o emulatore.You're ready to move on to the final section of this tutorial where you'll learn how to package and deploy the app to a device or emulator.

Importante

A questo punto è consigliabile aggiornare il progetto con le Impostazioni per le prestazioni di Unreal consigliate prima di distribuire l'applicazione in un dispositivo o emulatore.At this point, you should update your project with the recommended Unreal performance settings before deploying your application to a device or emulator.

Sezione successiva: 6. Creazione di pacchetti e distribuzione nel dispositivo o nell'emulatoreNext Section: 6. Packaging & deploying to device or emulator