UMG e tastiera in UnrealUMG and keyboard in Unreal

Unreal Motion Graphics (UMG) è il sistema di interfaccia utente incorporato del motore di Unreal, usato per creare interfacce quali menu e caselle di testo.Unreal Motion Graphics (UMG) is Unreal Engine’s built-in UI system, used to create interfaces such as menus and text boxes. Le interfacce utente compilate con UMG sono costituite da widget.User interfaces built with UMG consist of widgets. Verranno fornite istruzioni per la creazione di un nuovo widget, per aggiungerlo allo spazio globale e per abilitare l'interazione utilizzando la tastiera di sistema come esempio.We'll guide you through creating a new widget, adding it to world space, and enabling interaction using the system keyboard as an example. Per altre informazioni su UMG, vedere la documentazioneufficiale di Unreal Engine.You can learn more about UMG in the official Unreal Engine documentation.

Creare un nuovo widgetCreate a new widget

  • Creare un progetto widget per il layout dell'interfaccia utente del gioco:Create a Widget Blueprint to lay out the game’s UI:

Screenshot dell'aggiunta di un progetto widget dal menu Unreal

  • Aprire il nuovo progetto e aggiungere componenti dalla tavolozza all'area di disegno.Open the new blueprint and add components from the Palette to the canvas. In questo caso sono stati aggiunti due componenti della casella di testo dalla sezione "input":In this case, we've added two Text Box components from the “Input” section:

Screenshot della finestra della gerarchia con componente del widget di testo evidenziato ed espanso

  • Selezionare un widget nella gerarchia o nella finestra di progettazione e modificare i parametri nel pannello dei dettagli.Select a widget in the Hierarchy or Designer window and modify parameters in the details panel. In questo caso, è stato aggiunto un "testo suggerimento" predefinito e un colore tinta visualizzato quando si passa il mouse sulla casella di testo.In this case, we’ve added some default “Hint Text” and a tint color that appears when you hover over the text box. In una casella di testo viene visualizzata una tastiera virtuale in HoloLens quando viene interagito con:A text box will pop up a virtual keyboard on HoloLens when it's interacted with:

Screenshot dei parametri modificati nella finestra gerarchia

  • È anche possibile sottoscrivere gli eventi nel pannello dei dettagli:Events can also be subscribed to in the details panel:

Screenshot degli eventi nel pannello dei dettagli

Aggiungere un widget allo spazio globaleAdd a Widget to World Space

  • Creare un nuovo attore, aggiungere un componente widget e aggiungere l'attore alla scena:Create a new Actor, add a Widget component, and add the actor to the scene:

Screenshot di un attore con un widget collegato

  • Nel pannello dei dettagli per il widget impostare la classe Widget sul progetto widget creato in precedenza:In the details panel for the Widget, set the Widget Class to the Widget Blueprint created earlier:

Screenshot del pannello Dettagli progetto con la classe Widget impostata

  • Per un widget di testo, verificare che la ricezione dell'input hardware sia deselezionata, in modo da aggiornare solo il testo dalla tastiera virtuale:For a text Widget, ensure Receive Hardware Input is unchecked so we only update its text from the virtual keyboard:

Screenshot della sezione interazione con l'input hardware di ricezione non selezionata

Interazione widgetWidget Interaction

I widget UMG ricevono in genere l'input da un mouse.UMG Widgets typically receive input from a mouse. In HoloLens o VR è necessario simulare un mouse con un componente di interazione widget per ottenere gli stessi eventi.On HoloLens or VR, we need to simulate a mouse with a Widget Interaction component to get the same events.

  • Creare un nuovo attore, aggiungere un componente di interazione widget e aggiungere l'attore alla scena:Create a new Actor, add a Widget Interaction component, and add the actor to your scene:

Screenshot di un nuovo attore con un componente di interazione widget evidenziato

  • Nel pannello dei dettagli per il componente interazione widget:In the details panel for the Widget Interaction component:
    • Impostare la distanza di interazione sul valore della distanza desideratoSet the interaction distance to the distance value you want
    • Impostare l' origine interazione su personalizzataSet the Interaction Source to custom
    • Per lo sviluppo, impostare Mostra debug su true:For development, set Show Debug to true:

Screenshot delle proprietà del componente interazione e debug del widget

Il valore predefinito per l'origine interazione è "World", che deve inviare raycasts in base alla posizione globale del componente di interazione del widget.The default for Interaction Source is “World”, which should send raycasts based on the world position of the Widget Interaction component. In AR e VR, questo non è il caso.In AR and VR, that's not the case. L'abilitazione di "Mostra debug" e l'aggiunta di una tinta al passaggio del mouse ai widget è importante per verificare che il componente interazione widget stia eseguendo le operazioni desiderate.Enabling “Show Debug” and adding a hover tint to widgets is important to check the widget interaction component is doing what you expect. La soluzione alternativa consiste nell'usare un'origine personalizzata e impostare Raycast nel grafico eventi dal raggio della mano.The workaround is to use a custom source and set the raycast in the event graph from the hand ray.

Questa operazione viene chiamata dal segno di evento:Here we're calling this from Event Tick:

Progetto del segno di evento

Aggiungere quindi gli eventi del puntatore del mouse virtuale al componente di interazione del widget che reagisce all'input HoloLens.Then add virtual mouse pointer events to the widget interaction component reacting to HoloLens input. In questo caso, inviare un evento di pressione del mouse sinistro quando la mano viene afferrata e un evento di rilascio del mouse a sinistra quando non viene afferrato:In this case, send a Left Mouse press event when the hand is grasped, and a Left Mouse release event when not grasped:

Progetto con eventi di puntatore del mouse virtuale aggiunti

A questo punto, quando si distribuisce l'app in HoloLens 2, verrà visualizzato un raggio a mano che si estende da destra.Now, when you deploy the app to the HoloLens 2, you’ll see a hand ray extending from your right hand. Se viene indirizzato a una delle caselle di testo modificabili e al tocco aereo, la tastiera di sistema viene visualizzata davanti all'utente e consente di immettere il testo.If you direct it at one of the editable text boxes and air tap, the system keyboard will appear in front of you and allow you to enter text.

Nota

La tastiera di sistema HoloLens richiede Unreal Engine 4,26 o versione successiva.The HoloLens system keyboard requires Unreal Engine 4.26 or later. Inoltre, la tastiera non verrà visualizzata quando l'app viene trasmessa da un editor non reale all'auricolare, solo quando l'app è in esecuzione nel dispositivo.Additionally, the keyboard will not appear when your app is being streamed from the Unreal editor to the headset, only when the app is running on device.

Vedere anche:See Also: