Os Widgets de Usuário são projetados no Editor de Widgets com widgets UMG.
Widgets de Usuário são como mapas, pois rastreiam a rota entre um widget UMG e as funções do dispositivo. Ser capaz de ler um Widget de Usuário ajudará você a entender a composição de uma IU. No Editor de Widgets, você pode examinar:
O layout e o design da interface do usuário.
As vinculações de widgets em Vinculações de Visualização.
No modelo de funcionalidade, abra a pasta Controlador do HUD e clique duas vezes no widget UW_HCD01 para saber mais sobre como ele foi criado e vinculado ao dispositivo Controlador do HUD.
Layout do widget
O layout do widget é a fase de design na criação de uma IU personalizada. No Editor de Widgets, você pode usar widgets UMG do painel Paleta para criar o visual e planejar a funcionalidade da sua IU. A ordem na qual você usa os widgets UMG determina a aparência da IU.
Para saber mais sobre o que os widgets UMG fazem, consulte a seção Paleta da documentação do Editor de Widgets.
Com o widget UW_HCD01 aberto, procure no painel Hierarquia. O painel Hierarquia mostra quais widgets UMG foram usados e a ordem na qual foram adicionados à janela de visualização.
Widgets UMG podem ser renomeados no painel Hierarquia depois de serem adicionados à janela de visualização.
Todos os designs de widgets devem ter um widget raiz que atue como a tela. Um widget Sobreposição chamado Raiz fica na raiz do design e atua como a tela. A janela de visualização é definida com a opção Preencher tela, o que faz o design preencher a área designada de Raiz.
Um Painel de Grade é usado para abrigar o design das barras de vida e escudo. Os Painéis de Grade são grades flexíveis que organizam seus widgets filho em linhas e colunas.
Você pode personalizar ainda mais linhas e colunas porque o Painel de Grade adiciona opções aos seus widgets filhos que controlam o número de linhas e colunas, o espaço que as linhas e colunas ocupam, a camada que o widget ocupa no design e uma opção especial de movimento chamada Deslocamento.
O deslocamento lateral permite mover o widget filho pelos eixos X e Y sem ocupar espaço. Isso significa que apenas o conteúdo dentro do contêiner é deslocado, mas o contêiner mantém sua posição e o espaço que ocupa no layout.
O widget Sobreposição, chamado ShieldBarContainer, é o primeiro widget filho do Painel de Grade. Esse widget fica na Linha 1, Coluna 0 e é exibido na Extensão da Linha 1, Extensão da Coluna 0. Os widgets ShieldBarContainer são exibidos na Camada 1.
Isso significa que todos os widgets filhos de ShieldContainer são exibidos na frente do design porque estão na Camada 1, mas ficam à direita dos widgets atrás dela porque estão na Linha 1. A barra de escudo se estende por 2 linhas (0 e 1), o que determina o seu comprimento.
Usando a opção Deslocamento > Y, você pode mover o widget ShieldBarContainer -25.0 Unidades de Slate para baixo de sua posição padrão, de forma que cubra levemente a Barra de Vida atrás dele.
O widget Sobreposição chamado HealthBarContainer é o segundo widget filho do Painel de Grade. Esse widget fica na Linha 1, Coluna 0 e é exibido na Extensão da Linha 1, Extensão da Coluna 0. Os widgets HealthBarContainer são exibidos na Camada 0.
Isso significa que todos os widgets filhos de HealthBarContainer são exibidos na parte de trás do design, pois estão na Camada 0. A barra de vida fica na Linha 0 e, portanto, é exibida à esquerda da barra de escudo. O HealthBarContainer também abrange as Linhas 0 e 1, o que determina o comprimento da barra de vida.
Confira abaixo o detalhamento dos widgets UMG que compõem as barras de escudo e vida, bem como sua finalidade no design geral.
ShieldBarContainer
O ShieldBarContainer abriga todos os widgets UMG que compõem o design da barra de escudo. A barra de escudo é composta pelos seguintes elementos:
| Widget UMG | Nome do widget | Objetivo |
|---|---|---|
Imagem | ShieldBar_backing | Usado como um contêiner que envolve todo o design da barra de escudo. É uma instância de material chamada MI_HCD01_Backplate. |
Caixa de empilhamento | ShieldContent | Organiza seus widgets filhos (ícone da barra de escudo e material da barra de escudo) da esquerda para a direita dentro do material ShieldBar_Backing e ShieldBarContainer. |
Imagem | ShieldIcon | O material do ícone de escudo usado como a camada frontal. |
Sobreposição | ShieldBarContainer | Usado para colocar seus widgets filhos em camadas na segunda coluna da caixa de empilhamento ShieldContent. Esses widgets compõem o material da barra de escudo. |
Imagem | ShieldBarStroke | Usado como um contêiner que envolve toda a barra de escudo. É uma instância de material chamada MI_HCD01_BarStroke. |
Imagem | ShieldBar | O material M_ProgressBar_Basic é um material dinâmico de dois tons que usa uma função de material para se mover para a esquerda e direita na barra de escudo, dependendo das informações que o widget recebe do dispositivo Controlador do HUD. |
HealthBarContainer
O HealthContainer abriga todos os widgets UMG que compõem o design da barra de vida. A barra de vida é composta pelos seguintes elementos:
| Widget UMG | Nome do widget | Objetivo |
|---|---|---|
Caixa de empilhamento | Health Content | Organiza seus widgets filhos (design do ícone da barra de vida e material da barra de vida) da esquerda para a direita dentro do HealthContainer. Esta caixa de empilhamento se estende ao redor do widget de sobreposição ShieldContainer e centraliza a barra de escudo no design geral da IU. Isso ocorre porque a caixa de empilhamento HealthContent tem uma dimensão de eixo X maior do que a caixa de empilhamento ShieldContent. |
Imagem | HPIcon | O material do ícone de saúde usado como a camada frontal. |
Sobreposição | HPBarContainer | Usado para colocar seus widgets filhos em camadas na segunda coluna da caixa de empilhamento HealthContent. Estes widgets compõem o material da barra de vida. |
Imagem | HPBarStroke | Usado como um contêiner que envolve toda a barra de vida. É uma instância de material chamada MI_HCD01_BarStroke. |
Imagem | HPBar | Um material dinâmico de dois tons que usa uma função de material para se mover para a esquerda e direita na barra de vida, dependendo das informações que o widget recebe do dispositivo Controlador do HUD. |
Em seguida, você aprenderá a selecionar um modelo de visualização para atualizar os materiais de IU para que exibam o status atual do escudo e da vida do jogador no jogo.
Modelo de visualização
Um modelo de visualização controla as informações do jogador por meio de uma lista de funções. As funções fornecem uma maneira de controlar as informações do jogador por meio do widget UMG e da funcionalidade do dispositivo. Modelos de visualização fornecem uma maneira específica de vincular widgets UMG a dispositivos do Modo Criativo.
Os modelos de visualização escutam as funções em execução no dispositivo usando o Widget de Usuário para substituir a interface do usuário padrão. O modelo de visualização então usa as funções do dispositivo para atualizar a IU por meio de Vinculações de Visualização.
Por exemplo, os modelos de visualização das barras Escudo e Vida escutam as funções Escudo e Vida do Controlador do HUD. Quando a função do Controlador do HUD é executada nos escudos e na vida do jogador, o modelo de visualização escuta essas funções e passa as informações por meio de Vinculações de Visualização para atualizar a IU.
Há vários modelos de visualização diferentes para escolher. Na lista de modelos de visualização abaixo, observe que existem modelos de visualização específicos de dispositivos. Eles contêm as funções específicas desse dispositivo.
Os seguintes modelos de visualização controlam mais que uma parte da IU por meio das funções do dispositivo nas listas de funções.
O item Device - HUD Controller Team/Squad Player Info List do HUD é usado com o widget UW_HCD01. Ele usa as informações do jogador controlador para importar suas informações do Controlador do HUD, porque o modelo deve ser jogado por um jogador: você!
Para este exemplo de IU, sua Vida e seu Escudo são controlados por meio deste modelo de visualização, ouvindo as funções do Controlador do HUD.
A seguir, você aprenderá como vincular os materiais de IU de Vida e Escudo à funcionalidade do Controlador do HUD em Vinculações de Visualização.
Ver Vinculações
A seção Vinculações de Visualização mapeia a funcionalidade do widget UMG para as funções do dispositivo vinculado e atualizam a interface do usuário no HUD. No widget UW_HCD01, os materiais ShieldBar e HPBar estão vinculados às funções Escudo e Vida do Controlador do HUD. Essas funções monitoram seus escudos e vida no jogo e atualizam o material da barra com base na quantidade de escudo e vida que você tem.
Para tornar as interfaces de vida e escudo funcionais, você começa selecionando um widget UMG e vinculando as propriedades do widget a uma função específica de dispositivo. As vinculações devem ser criadas no painel Vinculações de Visualização.
Como adicionar um widget UMG
Widgets de imagem (ShieldBar e HPBar) são selecionados primeiro no painel Hierarquia e, em seguida, no painel Vinculações de Visualização. Você pode clicar no botão +Adicionar widget para abrir a lista de funções do modelo de visualização. Uma função é adicionada ao widget para controlar a informação da propriedade do widget. Nesse caso, é a função Pincel para controlar os materiais ShieldBar e HPBar.
Como adicionar uma vinculação de dispositivo
Depois de determinar qual widget vincular, o tipo de vinculação de dispositivo é selecionado. Há um campo vazio ao lado do campo do widget. Clicar no campo vazio abre uma lista de vinculações de dispositivo disponíveis. As opções de vinculação de dispositivo aparecem automaticamente nos campos widget e de vinculação de dispositivo. As opções determinam como o widget é atualizado com base nas informações que recebe do dispositivo.
O widget UW_HCD01 usa um Definir parâmetro escalar para atualizar as propriedades do Pincel.
Ver Vinculações
| Propriedade do Pincel de ShieldBar | Propriedade do Pincel de HealthBar |
|---|---|
 |  |
Painel Detalhes
| Material de ShieldBar | Material de HealthBar |
|---|---|
 |  |
No widget UW_HCD01, os widgets de imagem (ShieldBar e HPBar) possuem materiais dinâmicos em suas propriedades de Pincel (encontradas no painel Detalhes).
Como definir parâmetros do dispositivo
Para fazer com que o material reflita o estado atual do escudo e vida do jogador, as vinculações de dispositivo têm parâmetros que precisam ser definidos para enviar as informações do dispositivo aos widgets UMG.
Neste exemplo, o widget de imagem e sua função Pincel são adicionados automaticamente ao parâmetro Pincel do Controlador do HUD. Essa vinculação determina qual propriedade de pincel do widget de imagem deve ser atualizada.
Em seguida, o campo Nome do Parâmetro especifica qual parâmetro atualizar no material de Pincel. Aqui, Progresso é inserido no campo.
Por último, o campo Valor para a vinculação é determinado pelo modelo de visualização. No campo Valor da vinculação, as funções HUDPlayerInfoListViewmode > Informações do Jogador Controlador > Escudo e Vida são definidas.
Agora a funcionalidade do Controlador do HUD atualiza a propriedade Pincel no widget de imagem por meio da função de conversão Parâmetro Escalar, observando a propriedade Progresso e passando o valor de Vida e Escudo para ela.
Progresso é o valor que move a barra para frente e para trás entre os valores ProgressStart e ProgressEnd. Isso significa que o valor de Progresso está vinculado entre 0 e 1.
| Grupos de parâmetros de material de ShieldBar | Grupos de parâmetros de material de HealthBar |
|---|---|
 |  |
Se você iniciar o jogo com vida e escudos completos, os danos farão com que a barra se mova para a esquerda com base nas propriedades Progresso e Normalizar Progresso. Essas propriedades determinam o quanto o material se move para a esquerda quando o jogador sofre dano.
O material se moverá pela barra para a direita quando a vida e os escudos forem restaurados na mesma taxa em que se deterioram usando as propriedades Progresso e Normalizar Progresso.
Abra outros widgets de usuário e veja se consegue lê-los e entender a ordem em que os widgets UMG foram adicionados à hierarquia, o tipo de modelo de visualização selecionado para o widget de usuário e como os parâmetros do widget UMG e as funções do dispositivo são vinculados em Vinculações de Visualização.
Modelo de visualização de item equipado
Este modelo de visualização pode ser usado com o dispositivo Controlador do HUD para rastrear as estatísticas de um item equipado usando o espaço do widget Substituir Widget de Informações do Item Equipado. Todas as amostras de IU usam o Rifle de Assalto WID_Assault_AutoHigh_Athena_C_Ore_T03 como o item equipado.
Abra a pasta Dispositivos > Controlador do HUD > Widgets e clique duas vezes no widget UW_HCD03_SelectedItem. Nesse modelo de visualização, você pode monitorar várias informações e estatísticas de armas na IU:
Ícone do item
Nome do item
Ícone da munição
Contagem de munição
Excedente de munição
É Arma com Pente de Munição
