Placas traseiras exibem vários tipos de informações, como a imagem do avatar de um jogador, a tag de jogador, vida, escudos e muito mais, no HUD.
As placas traseiras executam várias funções, desde ajudar a identificar companheiros de equipe em jogos cooperativos multijogador até identificar estatísticas de baixo nível de vida e escudo.
No Unreal Editor para Fortnite (UEFN), as placas traseiras são feitas usando materiais ou uma mistura de texturase materiais. Texturas são usadas como contêineres que adicionam um enfeite decorativo à placa traseira, adicionando detalhes que um material não pode.
No entanto, texturas podem consumir muita memória. Isso pode sobrecarregar seu orçamento de memória e reduzir o desempenho da ilha. Os nós de textura e amostra de textura no seu material ocupam uma grande quantidade de memória.
Materiais são mais eficientes para criar designs planos e podem adicionar efeitos animados à placa traseira. Materiais consomem menos memória, pois dependem da GPU para executar matemática de álgebra simples. Isso permite que você faça uma variedade de coisas, desde criar formas simples até animar interações complexas em um material.
 |  |
Design de IU plana com materiais | Design de IU com texturas |
Ao optar por usar texturas, certifique-se de usá-las com moderação. É recomendável evitar qualquer coisa acima de 256 x 256 px para texturas de IU.
Materiais consomem menos memória porque usam a GPU para renderizar.
O método usado para as placas traseiras do seu avatar dependerá de vários fatores:
Preferência pessoal pelo design da IU.
Estilo e design da IU que complementam o tipo de experiência de ilha que você cria
Quanta memória você deseja economizar
O design da placa traseira do avatar neste tutorial usa três Instâncias de Material para o design básico. Os seguintes designs de placa traseira foram criados usando o material M_UI_Shape_Rectangle para incluir:
Um plano de fundo rosa translúcido
Um contêiner rosa ao redor do texto do nome e do plano de fundo translúcido
Um círculo verde-água que conterá o avatar do jogador
Crie sua própria IU com materiais! Consulte Criar uma IU personalizada com Instâncias de material.
Configurar um widget personalizado
Use o fluxo de trabalho Widget de usuário do documento Pop-Ups de IU:
Criar um widget de usuário.
Renomeie a miniatura como Player_Info.
Clique duas vezes na miniatura para abrir o Editor de Widget UMG.
O Editor de Widget é onde você definirá a aparência e o posicionamento na tela para o design de placa traseira. Depois, você adicionará um Modelo de visualização para criar a funcionalidade de vinculação de forma a capturar as informações existentes do jogador e vinculá-las ao design da placa traseira.
No Gráfico de Eventos:
Selecione a configuração Preencher tela no canto superior direito e defina-a como Desejado.
Por meio dessa configuração, você pode alterar seus widgets para um tamanho especificado para que sua IU pareça perfeita durante o jogo.
Para definir o layout do design da IU para seu HUD personalizado, você começará adicionando painéis ao gráfico de evento.
No painel Paleta, navegue até a seção Painel e arraste um painel Canvas até o painel Evento ou diretamente até o painel Hierarquia. Em seguida, renomeie o painel como HUD_Canvas.
O Painel Canvas oferece uma maneira de ancorar diferentes elementos da IU em locais específicos da tela. Tenha um plano de design de IU antes de adicionar mais painéis ao canvas para garantir que seu layout de design seja espelhado no painel Canvas.
Use o painel Canvas apenas quando precisar usar elementos de IU específicos como parte do seu design. Por exemplo, use esse painel se estiver criando um HUD e precisar definir diferentes widgets-filho para locais específicos da tela.
Em vez de alterar a configuração Preencher Tela para Desejado, você pode redimensionar o Painel Canvas para 1920 x 1080 ou 2560 x 1440, que são as proporções de tela mais comuns (16:9).
Na seção Painel do painel Paleta, aninhe uma Caixa de Empilhamento em HUD_Canvas no painel Hierarquia e renomeie-a como Backplate_StackBox. Este é o contêiner para a IU de placa traseira, que aninhará os widgets que compõem suas variáveis de IU.
À medida que adiciona variáveis à Caixa de pilha, elas são empilhadas automaticamente da esquerda para a direita no painel.
Você também pode usar a Caixa de pilha para empilhar os elementos da IU de cima para baixo.
Na seção Comum do painel Paleta, aninha uma Imagem em Backplate_StackBox e na Hierarquia. Em seguida, renomeie Imagem como Avatar_Image, que conterá a borda do avatar.
Na seção Painel do painel Paleta, aninhe uma Sobreposição em Backplate_StackBox e renomeie-a como Nameplate_Overlay. A Sobreposição oferece uma maneira de colocar widgets em camadas, uns sobre os outros.
No painel Paleta, arraste e aninhe duas Imagens em Nameplate_Overlay.
Renomeie as imagens após os materiais: Plano de fundo e borda.
Arraste e aninhe um painel Caixa de Tamanho em Nameplate_Overlay.
Use a Caixa de Tamanho para definir as propriedades de seus filhos aninhados. Isso impede que qualquer coisa dentro da Caixa de Tamanho vaze e possivelmente cubra outros elementos da IU ou a jogabilidade.
Arraste e aninhe uma Sobreposição sob a Caixa de Tamanho e renomeie-a como Text_Overlay.
Sem uma Sobreposição, você pode criar apenas um widget na Caixa de Tamanho.
Na seção Comum do painel Paleta, arraste e aninha dois Blocos de Texto em Text_Overlay. Renomeie os Blocos de Texto como Ativos e Inativos.
O layout da IU está concluído. Em seguida, você definirá as propriedades do widget para tornar o tamanho dos elementos da IU de placa traseira relativo ao tamanho da tela.
Definir propriedades do widget
Um painel de contêiner ajusta automaticamente seu tamanho para o maior widget dentro dele. O painel-pai deve conter todos os seus filhos antes de você começar a editar suas propriedades. Caso contrário, as proporções do elemento-pai podem mudar à medida que elementos filhos da IU são adicionados na aba Hierarquia.
Comece a definir as propriedades do painel Backplate_StackBox para decidir o posicionamento da tela e os limites da placa traseira.
As seguintes propriedades foram editadas para o design desta placa traseira:
Clique na imagem para ampliar.
| Configuração | Valor |
|---|---|
Âncoras | Canto inferior esquerdo |
Alinhamento | Deve ser definida como um par de coordenadas que forneçam preenchimento para o widget das bordas da tela. |
Dimensionar para conteúdo | True |
Orientação | Horizontal (todos os widgets-filho serão exibidos da esquerda para a direita.) |
Cisalhar X | -20.0 (Inclina a caixa de empilhamento negativamente para a direita.) |
Segure Shift + Control e clique no canto inferior esquerdo para atualizar automaticamente a posição e o alinhamento do seu widget.
As peças de layout da placa traseira básicas estão no lugar. Agora, você está pronto para adicionar os materiais que você criou e editar os Blocos de texto da identificação.
Adicione e edite ativos de placa traseira
O Editor de Widgets tem configurações para widgets selecionados para adicionar materiais e texto, bem como modificar as propriedades dos ativos usadas na configuração Pincel.
É importante observar a ordem de disposição do material no painel Hierarquia. Ao adicionar seus ativos, certifique-se de que eles serão exibidos corretamente. Os ativos de plano de fundo devem estar em camadas na parte inferior, com os ativos adicionais em camadas na parte superior.
Editar instâncias de material
Selecione seus widgets no painel Hierarquia para começar a adicionar materiais e texto.
Selecione a Imagem do avatar na Caixa de empilhamento para destacar o widget e abrir suas propriedades no painel Detalhes.
No painel Detalhes, adicione o Material de borda de avatar à configuração Pincel. Ajuste as configurações de Tamanho da imagem para ajustar o widget de Imagem com o material.
Clique na imagem para ampliar.
Materiais são como tinta. Quando adicionado à configuração Pincel, o material preenche o espaço do widget de imagem.
Se você tiver avatares específicos para sua experiência, faça o seguinte:
* Crie uma sobreposição para colocar uma imagem de avatar sob um material de borda.
* Adicione suas imagens de avatar importadas a uma camada de plano de fundo Imagem.
* Use o material de borda na camada superior.
Selecione a Imagem de Fundo no painel Hierarquia para abrir as opções de Sobreposição no painel Detalhes.
No painel Detalhes, defina as configurações de Alinhamento Horizontal e Vertical como Alinhamento Central e adicione o Material de Fundo à configuração de Pincel. Ajuste as configurações de Tamanho da imagem para adequar o widget de Imagem com a cor do material de plano de fundo.
Clique na imagem para ampliar.
Selecione a Imagem da borda em Nameplate_Overlay para destacar o widget e abrir suas propriedades no painel Detalhes.
No painel Detalhes, defina o Alinhamento Horizontal e Alinhamento Vertical como Alinhamento Central e adicione o Material de Borda à configuração Pincel. Ajuste as configurações de Tamanho da Imagem para fazer com que a borda gire a cor de fundo.
Clique na imagem para ampliar.
A placa traseira assume um visual básico e agora você está pronto para editar os Blocos de texto.
Editar a identificação
A identificação exibe as tags de jogador do jogador. A placa traseira projetada acima contém uma Caixa de Tamanho e Blocos de Texto.
Ao editar as propriedades da caixa de tamanho, você pode evitar que o texto se estenda fora de seu limite em outros elementos da interface do usuário ou obstrua a visão do jogador.
Selecione a Caixa de Tamanho na Hierarquia para abrir suas propriedades no painel Detalhes.
No painel Detalhes, defina as configurações de Alinhamento Horizontal e Alinhamento Vertical como Alinhamento Central. Isso centraliza automaticamente os Blocos de Texto nas imagens de Identificação. Defina as opções de Substituição de Largura e Altura da Caixa de Tamanho como Verdadeiro e defina o tamanho desejado de Nameplate_Overlay.
A caixa verde exibe a borda da caixa de tamanho.
Clique na imagem para ampliar.
No painel Hierarquia, clique com o botão direito do mouse em Caixa de Tamanho e selecione Quebrar com... > Caixa de Tamanho para que os Blocos de Texto quebrem o texto do player de acordo com as propriedades da Caixa de Tamanho.
A configuração básica da IU de identificação está concluída. Todos os elementos-filho assumem as propriedades de seu pai, portanto a quantidade de edições que você precisa fazer nesses widgets é mínima.
No painel Detalhes, você editará os blocos de texto Ativo e Inativo definindo o alinhamento e o tamanho da fonte, a cor, o traçado e muito mais.
Certifique-se de que o texto ativo tem uma cor separada do texto inativo. Neste exemplo, a fonte do bloco de texto ativo tem o tamanho de 145 em branco com traçado de 6, e a fonte inativa tem o tamanho de 145 em SlateGrey com traçado de 6.
Set a configuração de Visibilidade da caixa de texto Inativo como Oculto. Isso impede que o texto seja exibido até que a vinculação ao widget seja acionada no jogo.
Isso junta tudo: a identificação e a placa traseira do avatar.
Adicionar vinculações de visualização
Agora que o design da IU foi criado, é hora de adicionar vinculações às caixas de texto e Avatar_Image com base nos dados que elas precisam receber durante uma sessão ao vivo.
O modelo de visualização de informações do jogador do controlador do HUD fornece uma maneira de substituir partes do seu HUD por um widget personalizado. Para aproveitar essa configuração, você precisa criar um modelo de visualização da sua placa traseira.
Texto do nome do jogador
Para que o nome de um jogador apareça no campo correto, siga estas etapas:
Abra a aba Vinculações de Visualização clicando em Janela > Vinculações de Visualização ou selecionando Vinculações de Visualização na parte inferior da tela e encaixando-a.
Para ver a lista HUDPlayerInfoViewModelBase de vinculações de visualização:
1. Abra a janela Modelos de visualização selecionando Janela > Modelos de visualização.
1. Acesse +Modelo de visualização e selecione Base do modelo de visualização Controlador do HUD - Informações de equipe/esquadrão.
O Controlador do HUD - Lista de informações do jogador de equipe/esquadrão fornece uma maneira de mostrar as informações do jogador controlador sem seu esquadrão ou equipe.
1. Clique em Selecionar.
Selecione o Bloco de texto na lista Hierarquia ou clicando na área Nome do jogador da tela de visualização da interface de usuário.
Na aba Vinculações de Visualização, clique em + Adicionar Widget Active_Name.
Selecione o campo "PlayerName" ativo e selecione Texto > Selecionar.
No campo vazio à direita, selecione HUDPlayerInfoViewModel > Informações do Jogador Controlador > Nome do jogador > Selecionar no menu suspenso.
A vinculação final deve ter a seguinte aparência:
Repita as etapas 2 a 3 para o elemento Inactive_Name.
Para modificar as configurações de visibilidade do nome inativo, adicione um novo widget a Inactive_Name. Selecione no primeiro campo e escolha Visibilidade > Selecionar no menu suspenso.
Clique no campo vazio à direita e selecione Funções de Conversão > Para visibilidade (booleano) > Selecionar.
A seleção dessa opção faz com que três novos campos sejam exibidos. Clique no ícone Link ao lado de É Visível. No menu, selecione HUDPlayerInfoViewModel > Informações do Jogador Controlador > É Eliminado > Selecionar.
Defina Visibilidade de Verdadeiro como Não pode ter acertos testados (apenas o próprio elemento) abaixo. Deixe Visibilidade de Falso em Recolhido. Quando o jogador for eliminado ou desconectado, o nome substituirá Active_Name, mas, quando o jogador estiver vivo, ele permanecerá recolhido.
A vinculação final de Inactive_Name deve ter a seguinte aparência:
Clique na imagem para ampliar.
Clique em Compilar para enviar as alterações. A definição dos nomes dos jogadores agora está concluída!
Ícone do avatar do jogador
Escolha Avatar_Image na Hierarquia ou clique na área do ícone do jogador na tela de visualização da IU.
Clique em + Adicionar Widget Profile_Image.
Acesse Avatar_Image > Pincel e pressione Selecionar. Essa vinculação está basicamente analisando a configuração Pincel selecionada no painel Detalhes Avatar_Image.
Clique no campo vazio à direita e selecione Funções de Conversão > Criar Pincel de Imagem a partir de Material > Selecionar.
Defina os campos Tamanho da Imagem vazios com o tamanho do material de borda do ícone no widget. Neste exemplo, o material da borda é X=50 e Y=45.
A vinculação finalizada deve ter a seguinte aparência:
Clique na imagem para ampliar.
Clique em Compilar para salvar seu widget.
Em seguida, você arrastará um dispositivo Controlador do HUD até o seu projeto e adicionará seu widget UMG ao dispositivo no campo Substituir Widget de Informações do Jogador.
Teste o visual da identificação do avatar personalizado. Deve ficar parecido com a imagem a seguir.
Clique na imagem para ampliar.
