UMG e teclado no Unreal

Unreal Motion Graphics (UMG) é o sistema de interface do usuário integrado do Unreal Engine, usado para criar interfaces como menus e caixas de texto. As interfaces de usuário construídas com UMG consistem em widgets. Vamos guiá-lo através da criação de um novo widget, adicionando-o ao espaço mundial e permitindo a interação usando o teclado do sistema como exemplo. Você pode aprender mais sobre UMG na documentação oficial do Unreal Engine.

Criar um novo widget

• Crie um Widget Blueprint para dispor a interface do usuário do jogo:

• Abra o novo blueprint e adicione componentes da Paleta à tela. Nesse caso, adicionamos dois componentes de caixa de texto da seção "Entrada":

• Selecione um widget na janela Hierarquia ou Designer e modifique os parâmetros no painel de detalhes. Nesse caso, adicionamos algum "Texto de dica" padrão e uma cor de tonalidade que aparece quando você passa o mouse sobre a caixa de texto. Uma caixa de texto exibirá um teclado virtual no HoloLens quando ele estiver interagindo com:

• Os eventos também podem ser inscritos no painel de detalhes:

Adicionar um widget ao World Space

• Crie um novo ator, adicione um componente Widget e adicione o ator à cena:

• No painel de detalhes do Widget, defina a Classe Widget como o Widget Blueprint criado anteriormente:

• Para um Widget de texto, certifique-se de que a opção Receber Entrada de Hardware esteja desmarcada para que atualizemos apenas o texto a partir do teclado virtual:

Interação com widgets

UMG Widgets normalmente recebem entrada de um mouse. No HoloLens ou VR, precisamos simular um mouse com um componente Widget Interaction para obter os mesmos eventos.

• Crie um novo ator, adicione um componente de interação do widget e adicione o ator à sua cena:

• No painel de detalhes do componente Interação do widget:
  • Defina a distância de interação para o valor de distância desejado
  • Definir a Origem da Interação como personalizada
  • Para desenvolvimento, defina Mostrar depuração como true:

O padrão para Interaction Source é "World", que deve enviar raycasts com base na posição mundial do componente Widget Interaction. Em AR e VR, esse não é o caso. Ativar "Mostrar Depuração" e adicionar uma tonalidade de foco aos widgets é importante para verificar se o componente de interação do widget está fazendo o que você espera. A solução alternativa é usar uma fonte personalizada e definir o raycast no gráfico de eventos a partir do raio de mão.

Aqui estamos chamando isso de Event Tick:

Em seguida, adicione eventos de ponteiro virtual do mouse ao componente de interação do widget reagindo à entrada do HoloLens. Nesse caso, envie um evento de imprensa do mouse esquerdo quando a mão for pressionada e um evento de liberação do mouse esquerdo quando não for pressionado:

Agora, ao implantar o aplicativo no HoloLens 2, você verá um raio de mão se estendendo da mão direita. Se você direcioná-lo em uma das caixas de texto editáveis e tocar no ar, o teclado do sistema aparecerá na sua frente e permitirá que você insira texto.

Observação

O teclado do sistema HoloLens requer o Unreal Engine 4.26 ou posterior. Além disso, o teclado não aparecerá quando seu aplicativo estiver sendo transmitido do editor Unreal para o fone de ouvido, apenas quando o aplicativo estiver sendo executado no dispositivo.

Consulte também:

• Documentação UMG da Unreal
• Tutoriais UMG da Unreal