UMG e teclado no UnrealUMG and keyboard in Unreal

O UMG (elementos gráficos de movimento inreal) é um sistema de interface do usuário interno do mecanismo não real, usado para criar interfaces como menus e caixas de texto.Unreal Motion Graphics (UMG) is Unreal Engine’s built-in UI system, used to create interfaces such as menus and text boxes. Interfaces de usuário criadas com UMG consistem em widgets.User interfaces built with UMG consist of widgets. Nós o orientaremos na criação de um novo widget, no acréscimo ao espaço mundial e na habilitação da interação usando o teclado do sistema como um exemplo.We'll guide you through creating a new widget, adding it to world space, and enabling interaction using the system keyboard as an example. Você pode aprender mais sobre o UMG na documentaçãooficial do mecanismo inreal.You can learn more about UMG in the official Unreal Engine documentation.

Criar um novo widgetCreate a new widget

  • Crie um gráfico de widget para definir o layout da interface do usuário do jogo:Create a Widget Blueprint to lay out the game’s UI:

Captura de tela da adição de um plano gráfico do widget no menu não real

  • Abra o novo Blueprint e adicione componentes da paleta à tela.Open the new blueprint and add components from the Palette to the canvas. Nesse caso, adicionamos dois componentes de caixa de texto da seção "entrada":In this case, we've added two Text Box components from the “Input” section:

Captura de tela da janela de hierarquia com componente de widget de texto realçado e expandido

  • Selecione um widget na janela hierarquia ou designer e modifique os parâmetros no painel de detalhes.Select a widget in the Hierarchy or Designer window and modify parameters in the details panel. Nesse caso, adicionamos um "texto de dica" padrão e uma cor de tonalidade que aparece quando você passa o mouse sobre a caixa de texto.In this case, we’ve added some default “Hint Text” and a tint color that appears when you hover over the text box. Uma caixa de texto exibirá um teclado virtual no HoloLens quando ele estiver interagindo com:A text box will pop up a virtual keyboard on HoloLens when it's interacted with:

Captura de tela de parâmetros modificados na janela hierarquia

  • Os eventos também podem ser assinados no painel de detalhes:Events can also be subscribed to in the details panel:

Captura de tela dos eventos no painel de detalhes

Adicionar um widget ao espaço de mundoAdd a Widget to World Space

  • Crie um novo ator, adicione um componente de widget e adicione o ator à cena:Create a new Actor, add a Widget component, and add the actor to the scene:

Captura de tela de um ator com um widget anexado

  • No painel de detalhes do widget, defina a classe Widget como o plano gráfico do widget criado anteriormente:In the details panel for the Widget, set the Widget Class to the Widget Blueprint created earlier:

Captura de tela do painel detalhes do plano gráfico com o conjunto de classes widget

  • Para um widget de texto, verifique se a entrada do hardware de recebimento está desmarcada, portanto, atualizamos apenas o texto do teclado virtual:For a text Widget, ensure Receive Hardware Input is unchecked so we only update its text from the virtual keyboard:

Captura de tela da seção de interação com entrada de hardware de recebimento está desmarcada

Interação do widgetWidget Interaction

Os widgets do UMG normalmente recebem a entrada de um mouse.UMG Widgets typically receive input from a mouse. No HoloLens ou VR, precisamos simular um mouse com um componente de interação do widget para obter os mesmos eventos.On HoloLens or VR, we need to simulate a mouse with a Widget Interaction component to get the same events.

  • Crie um novo ator, adicione um componente de interação do widget e adicione o ator à sua cena:Create a new Actor, add a Widget Interaction component, and add the actor to your scene:

Captura de tela de um novo ator com um componente de interação do widget realçado

  • No painel de detalhes do componente de interação do widget:In the details panel for the Widget Interaction component:
    • Defina a distância de interação com o valor de distância desejadoSet the interaction distance to the distance value you want
    • Definir a origem da interação como personalizadaSet the Interaction Source to custom
    • Para desenvolvimento, defina Mostrar depuração como true:For development, set Show Debug to true:

Captura de tela da interação do widget e das propriedades do componente de depuração

O padrão para a origem da interação é "mundo", que deve enviar raycasts com base na posição mundial do componente de interação do widget.The default for Interaction Source is “World”, which should send raycasts based on the world position of the Widget Interaction component. No AR e VR, esse não é o caso.In AR and VR, that's not the case. Habilitar a "mostrar depuração" e adicionar um tom de foco aos widgets é importante para verificar se o componente de interação do widget está fazendo o que você espera.Enabling “Show Debug” and adding a hover tint to widgets is important to check the widget interaction component is doing what you expect. A solução alternativa é usar uma fonte personalizada e definir o Raycast no grafo de eventos a partir do raio da mão.The workaround is to use a custom source and set the raycast in the event graph from the hand ray.

Aqui, estamos chamando isso a partir do tique do evento:Here we're calling this from Event Tick:

Plano gráfico de tiques de eventos

Em seguida, adicione eventos de ponteiro do mouse virtual ao componente de interação do widget reagindo à entrada do HoloLens.Then add virtual mouse pointer events to the widget interaction component reacting to HoloLens input. Nesse caso, envie um evento de pressionamento do mouse à esquerda quando a mão estiver segurando e um evento de liberação do mouse esquerdo quando não for compreendido:In this case, send a Left Mouse press event when the hand is grasped, and a Left Mouse release event when not grasped:

Plano gráfico com eventos de ponteiro de mouse virtual adicionados

Agora, ao implantar o aplicativo no HoloLens 2, você verá uma extensão de raio à direita do seu lado direito.Now, when you deploy the app to the HoloLens 2, you’ll see a hand ray extending from your right hand. Se você o direcionar a uma das caixas de texto editáveis e ao toque do ar, o teclado do sistema aparecerá na frente de você e permitirá que você insira o texto.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.

Observação

O teclado do sistema do HoloLens requer um mecanismo inreal 4,26 ou posterior.The HoloLens system keyboard requires Unreal Engine 4.26 or later. Além disso, o teclado não será exibido quando seu aplicativo estiver sendo transmitido do editor inreal para o headset, somente quando o aplicativo estiver em execução no 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.

Consulte Também:See Also: