Unreal Motion Graphics (UMG) é uma ferramenta poderosa para criar interfaces de usuário (IU). Não importa se você está criando um pop-up simples ou sistemas de IU complexos, entender os principais conceitos do trabalho no UMG dá a liberdade de experimentar com essa poderosa ferramenta.
Para levar seus designs de IU do papel para o teste, você precisa entender como o UMG cria a IU. Para apresentar os fluxos de trabalho de criação de IU, esta página está dividida nas seguintes seções:
Como projetar sistemas de IU
Planejar o design da IU é a chave para criar sistemas de IU úteis e com boa aparência. Pense no seguinte:
O tipo de jogo que você está construindo.
O tipo de IU necessária para oferecer suporte aos jogadores e manter a jogabilidade divertida e fácil de entender.
Como será a aparência da IU final.
Por exemplo, no HUD do Fortnite, tudo que o jogador precisa entender sobre o jogo; informações relevantes de vida e escudo para estatísticas gerais do jogo estão espalhadas pela tela.
Faça um esboço das ideias de design da IU que você tem. Use esses esboços para orientar como a IU é criada no UMG.
Abordagens básicas de web design podem ajudar a planejar o layout da interface antes de começar a criar widgets de usuário. Essas abordagens podem ser usadas para decidir quais partes da IU precisam ser rígidas e quais podem ser flexíveis. Use as seguintes abordagens de design web para o layout da IU:
Layout Absoluto
Layouts absolutos geralmente usam cálculos e coordenadas precisas para especificar onde colocar os elementos em uma tela. Isso é útil quando um elemento de IU precisa permanecer no lugar usando as coordenadas x e y. O elemento de IU deve considerar onde o elemento pai é colocado na tela; o elemento pai começa no canto superior esquerdo do layout.
Esse estilo de layout é menos flexível e difícil de manter em vários tamanhos de tela.
Um design de layout absoluto é melhor usado para pequenos elementos que fazem parte de um design maior. Por exemplo, use uma posição absoluta para um ícone. No UEFN, isso pode ser definido usando as configurações de Alinhamento e Preenchimento do widget de imagem.
O ícone permanece no mesmo lugar, independentemente do posicionamento e do tamanho dos outros elementos da IU ao seu redor.
Layout Relativo
Esse tipo de layout funciona melhor para jogos que podem ser jogados em várias plataformas, pois adaptará a IU a uma tela grande de televisão ou a uma tela pequena de celular.
Preenchimento e espaçamento
O preenchimento pode ser usado para ajustar pequenos espaços entre os elementos de um todo. Pode ser difícil gerenciar o preenchimento de widgets individuais no UMG. Em vez disso, use as ferramentas de alinhamento para imagens e blocos de texto; o alinhamento fornece mais controle sobre o espaço e o posicionamento do que o preenchimento.
Isso significa que depois que todas as partes estiverem no lugar, se você ainda precisar de um pouco de espaço entre os elementos, ajustar as configurações de preenchimento de widgets individuais adicionará o espaço necessário.
Para forçar espaços maiores entre os widgets, use uma imagem vazia ou um widget de espaço entre os widgets contêiner e os widgets do usuário. Abaixo, você pode ver que um widget de imagem é usado para forçar o espaço entre cada widget do usuário, fornecendo espaço para que cada widget exiba as informações claramente.
Como entender os widgets UMG
Uma IU deve ser projetada em seções no UMG. Compile a IU criando widgets de usuário individuais e trabalhando em camadas. Quando todos os elementos de uma IU estiverem prontos, coloque as seções individuais sob um widget de usuário-pai. Construir a IU em camadas significa ter mais controle sobre o design e o layout da IU geral.
Para planejar e criar widgets de usuário individuais, você deve primeiro entender os widgets disponíveis no painel Paleta. Existem dois tipos principais de widgets; contêineres e elementos.
Contêineres
Um contêiner contém vários widgets de usuário, elementos e outros contêineres para criar uma parte da IU. Um elemento pode ser uma imagem, material, texto ou mais. O tamanho de um widget de contêiner é determinado pelo tamanho do maior elemento filho.
| Widget de contêiner | Objetivo | Imagem |
|---|---|---|
Grade | Define os elementos dentro de um padrão de grade flexível. Adiciona opções aos elementos-filho para:
|  |
Grade Uniforme | Define os elementos-filho em linhas e colunas com espaçamento igual. Adiciona opções aos elementos-filho para:
|  |
Sobreposição | Elementos de camadas e outros widgets de contêiner, uns sobre os outros. Os contêineres de sobreposição não adicionam opções nem configurações extras a seus elementos-filho. |  |
Caixas de Empilhamento | Define os elementos na horizontal ou na vertical (da esquerda para a direita, de cima para baixo). Esse widget de contêiner não separa bem os elementos sozinho. Use outros widgets de contêiner ou elemento para criar espaço em uma caixa de pilha. |  |
Caixa de Tamanho | Introduz parâmetros que restringem o tamanho de seus elementos-filho. Os contêineres de caixa de tamanho não adicionam opções nem configurações extras a seus elementos-filho. |  |
Caixa de Escala | Especifica como dimensionar a IU para o tamanho da tela. |  |
Caixa de Rolagem | Cria uma caixa de rolagem para conter uma coleção de elementos. Os contêineres de caixa de rolagem não adicionam opções nem configurações extras a seus elementos-filho. |  |
Interruptor de widget | Fornece uma maneira de navegar pelos widgets. Nesse widget de contêiner, um widget de cada vez fica visível no alternador. Os contêineres de alternador de widgets não adicionam opções nem configurações extras a seus elementos-filho. |  |
Canvas | Ancora elementos dentro de um espaço definido. Ele é mais adequado no final do processo de design como o contêiner-pai. Adiciona as seguintes opções aos seus elementos-filho:
|  |
Widgets de elemento
Todos os widgets têm propriedades de Aparência seguidas de configurações específicas do widget selecionado no painel Detalhes.
O tamanho dos elementos-filho pode ser definido no painel Details e herdar as propriedades do widget de contêiner-pai.
| Widget de elemento | Objetivo | Imagens |
|---|---|---|
Widget de ação | Fornece uma maneira de se obter uma entrada a partir de uma tecla de atalho para uma ação específica usando Verse. Por si só, o widget é puramente cosmético. |  |
Imagem | Oferece uma maneira de adicionar texturas (podem ser imagens importadas ou texturas encontradas nativamente no UEFN) e materiais ao plano de fundo ou primeiro plano de um widget de usuário. |  |
Bloco de Texto | Adiciona texto ao widget de usuário. Você pode controlar o tamanho, a fonte, o espaçamento e mais. |  |
Botão Silenciar | Um botão retangular com um fundo transparente. |  |
Botão Comum | Um botão retangular com um fundo opaco. |  |
Botão Alto | Um botão retangular com fundo amarelo. |  |
Barra | Um controle deslizante de valor que aumenta ou diminui dentro de um intervalo especificado. |  |
Para saber mais sobre widgets em Verse, consulte Tipos de widget.
Como criar e colocar widgets de usuário em camadas
Widgets de usuário são arquivos de IU que contêm tudo o que você projetou. Ao criar um widget de usuário, compartilhe seu design o máximo possível. Isso significa usar apenas o que você precisa em um widget de usuário para obter a aparência desejada para seu elemento de IU.
Na imagem abaixo, quatro widgets de usuário foram criados para cada componente da barra de atalho dos itens coletados. Cada widget de usuário rastreia as estatísticas individuais dos diferentes componentes enquanto mantém o mesmo design de IU.
Projetar widgets de usuário separados significa que eles podem ser colocados em camadas dentro de um widget de usuário pai para criar uma aparência mais consistente e controlada para a barra de atalho da barra de coleções. Também é mais fácil para o dispositivo Rastreador rastrear as estatísticas de cada componente individual da barra de acesso rápido de coleção.
Clique para ampliar a imagem.
Projetar a IU dessa maneira requer prática. Siga os tutoriais Como criar um HUD personalizado e os tutoriais Tartarugas Ninja para praticar a criação de widgets de usuário individuais para criar um visual de esquadrão personalizado para um jogo.
Como editar um layout
Usar widgets de usuário individuais para criar a IU facilita a edição da IU. Fornecer uma maneira de editar essa parte sem afetar outras partes do design da IU.
Observe no design da barra de atalho da barra de coleções acima, todos os rótulos de elementos estão centralizados, exceto um. Nesse caso, o membro desenvolvedor simplesmente abre o widget de usuário para esse único elemento e edita o rótulo sem causar problemas para todos os outros elementos da barra de atalho da barra de coleção.
Se estiver projetando algo mais complexo, como um sistema de inventário, você poderá descobrir que está usando widgets de contêiner desnecessários ou está tendo problemas para fazer com que seus widgets de elementos estejam em conformidade com o design. O UMG tem opções que facilitam a edição de um layout:
Substituir por…
Encerrar com…
Substituir widgets
Substitua widgets desnecessários da hierarquia sem desfazer o layout. Clique com o botão direito do mouse no widget desnecessário, selecione Substituir por… e escolha outro widget para substituí-lo. Os widgets substituídos são todos widgets do tipo contêiner.
As opções dos widgets-filho mudam de acordo com o novo contêiner-pai usado.
Quebrar widgets
Uma maneira de modificar o layout sem afetar todos os widgets filho é usar a configuração Quebrar com... na hierarquia. Clique com o botão direito do mouse no widget filho e selecione Quebrar com… e, em seguida, selecione um contêiner no menu suspenso para aproveitar suas propriedades e manter as configurações dos widgets filho.
Teste
Quando o design estiver concluído, teste-o. Você deve procurar o seguinte:
A IU serve a um propósito. Não crie IU por ter uma IU, ela deve ser útil.
A interface de usuário é útil e fácil de usar; os jogadores não devem ter que adivinhar o que a IU faz enquanto jogam.
A IU deve se mesclar com o jogo e complementar a jogabilidade.
Os elementos da IU não atrapalham a experiência de jogo.