Crie uma interface dinâmica com materiais alterados que são atualizados com base em dados e eventos de jogabilidade. Para tornar sua interface dinâmica, você precisa usar uma combinação de materiais de IU, vinculações de visualização e três das funções de conversão Definir parâmetro de material (Definir textura, escalar e parâmetro vetorial).
No Unreal Editor para Fortnite (UEFN), você recebe um material básico com vários parâmetros. Use o dispositivo Rastreador para rastrear eliminações em uma barra de progresso widget de estilo como um exemplo de material que é atualizado dinamicamente com base em sua progressão na eliminação de inimigos.
Criar uma instância de Material
Para obter mais informações sobre instâncias de material, consulte Como criar e usar instâncias de material na documentação da Unreal Engine.
Todos os ativos usados para criar essas instâncias de material podem ser encontrados nativamente no UEFN. Para aprender a criar o material deste exemplo, consulte Material de medição na documentação de Material de tutoriais.
Crie uma instância de material de M_Tracker. Defina o nome da instância de material como MI_TrackerExample.
Na nova instância de material, altere IconScaleX e IconScaleY com base em suas preferências. Os materiais neste exemplo foram definidos como 0,7 cada.
Você pode personalizar a ProgressColor de eliminação que preenche o widget com base no seu progresso. Deixe TrackerProgress, Icon e IconColor desmarcados. Eles serão usados mais tarde com o dispositivo Rastreador.
Os ícones podem ser encontrados na pasta Fortnite em Texturas > Ícones.
Como configurar o widget de rastreador
Você criará um widget de rastreador personalizado no UMG que pode ser referenciado no dispositivo Rastreador e rastreará as eliminações dos jogadores na IU de eliminação personalizada.
Clique com o botão direito no Navegador de Conteúdo e selecione Interface de usuário > Blueprint de Widget > Widget de usuário.
Crie um widget de rastreador simples que mostre o material de rastreador e um título de rastreador, como no exemplo abaixo.
Arraste uma sobreposição até o widgetgraph. Isso coloca todas as partes que compõem o widget em camadas. Ele também fornece uma maneira de determinar onde esse widget aparece na tela.
Aninhe uma caixa de empilhamento dentro da sobreposição para que você possa definir o material de rastreador e o título da esquerda para a direita.
Aninhe uma sobreposição dentro da caixa de empilhamento para que você possa criar um material de rastreador para sobrepor a caixa de empilhamento com um plano de fundo escuro simples.
Dentro da Sobreposição, aninhe dois widgets de imagem. Pressione F2 para renomeá-los como TrackerBackground e TrackerMaterial.
Selecione TrackMaterial para abrir suas opções no painel Detalhes. No painel Detalhes, selecione Pincel > Imagem e procure o MI_TrackerExample que você criou.
Defina o tamanho da imagem abaixo como X=96,0, Y=96,0. Deve ser grande o suficiente para ser vista no jogo.
Agora que o material de rastreador está configurado, é necessário criar o plano de fundo para o material de forma que o material de rastreador fique mais legível.
Selecione TrackerBacking e, em Hierarquia, no painel Detalhes, selecione Pincel > Desenhar como > Caixa arredondada.
Defina a opção Tom acima como uma cor neutra para melhorar a legibilidade. Neste exemplo, a tonalidade foi definida como 3A3A3AFF no campo Hex sRGB.
Defina as opções Alinhamento horizontal e Alinhamento vertical como Preenchimento. Isso garante que TrackerBacking preencherá o contêiner que contém o TrackerMaterial.
Agora você tem um plano de fundo para o seu TrackerMaterial que parece facilmente legível em qualquer cena do jogo!
Com configurar o texto do rastreador
Depois que o material de rastreador for referenciado no widget de rastreador, você configurará um texto que informa ao jogador o que está sendo rastreado na IU.
Aninhe um bloco de texto na caixa de empilhamento que contém a sobreposição. Renomeie o bloco de texto como TrackerTitle.
Selecione TrackerTitle em Hierarquia, no painel Detalhes, defina o Alinhamento vertical como Alinhado ao centro verticalmente. Isso garante que o texto ficará sempre alinhado ao centro no TrackerMaterial.
Faça algumas alterações estilísticas na fonte reduzindo o tamanho, adicionando um contorno ou alterando o tipo de fonte para ajustá-la ao seu tema.
Neste exemplo, as seguintes alterações foram feitas: Tamanho da fonte = 24 Tipo de Letra = Negrito Outline = Dark Red
Você pode personalizar todas as configurações relacionadas à fonte na categoria Appearance.
Depois que todos os toques finais no design estiverem concluídos, você deverá ter TrackerMaterial e TrackerTitle configurado.
Para adicionar algum espaço entre os dois itens, adicione preenchimento à direita da sobreposição que contém o TrackerMaterial:
Selecione Sobreposição.
No painel Detalhes, expanda Preenchimento.
Altere Preenchimento direito para 16 px.
O espaço é adicionado entre a imagem e o texto.
Se quiser modificar facilmente o espaçamento entre vários objetos, você pode inserir um widget de imagem na caixa de pilha que contém esses objetos, definir o tamanho da imagem X como quanto espaço você desejar e defini-lo como "Desenhar como nenhum". O que acontece é que a imagem não aparece, mas ainda ocupa espaço na sua caixa de pilha!
Torna mais fácil gerenciar o espaçamento entre objetos e não procurar preenchimentos em cada widget.
Como configurar parâmetros de materiais definidos
Em seguida, você vinculará os valores do dispositivo Rastreador aos parâmetros do material no widget de rastreador.
Como adicionar um modelo de visualização
Adicione o modelo de visualização de rastreador ao widget selecionando Janela > Modelo de visualização no menu principal.
Na janela Modelo de Visualização, selecione +Modelo de visualização.
Na janela pop-up, selecione Dispositivo - Modelo de visualização de rastreador.
Na barra de menus, selecione Janela > Vinculações de visualização para abrir o painel Vinculações de Visualização.
Você já pode começar a vincular os dados do rastreador para manipular seu widget.
Defina o parâmetro escalar
Um parâmetro escalar recebe um valor Int ou Float. Por exemplo, a barra de progresso é preenchida com o TrackerMaterial com base em quantas eliminações você tem no rastreador.
O material é configurado para converter o número de eliminações do dispositivo Rastreador para preencher o TrackerMaterial. Tudo o que você precisa fazer é vincular esses dados ao parâmetro de material de progresso em MI_TrackerExample.
Um progresso de 3,0 vs 8,0 em MI_TrackerExample. Isso aqui é muito útil!
Selecione o widget de TrackerMaterial no seu widget e clique em +Adicionar widget na janela Vinculações de Visualização.
No campo esquerdo, selecione TrackerMaterial > Pincel.
No campo direito (contendo os dados que você deseja vincular à Brush do TrackerMaterial), selecione Funções de conversão > Definir parâmetro escalar.
Isso executa a função chamada Definir parâmetro escalar na configuração Pincel. Como seu pincel atualmente tem MI_TrackerExample, ele procurará um parâmetro escalar que você especificar e passará um valor para ele.
Digite TrackerProgress no campo Nome do parâmetro, o que faz com que o material seja preenchido com base no progresso do rastreador.
É importante que você não cometa erros no parâmetro, porque ele não será capaz de encontrar o parâmetro correto no seu material. Se você esqueceu como se chama o parâmetro, abra a instância de material e procure os parâmetros no lado direito.
Selecione o ícone do link ao lado de Valor, selecione MVVM_UEFN_Tracker > Valor no menu suspenso. Vincula o progresso atual do rastreador.
Agora, você tem seu progresso atual do rastreador alimentando diretamente o seu material! O material do rastreador será preenchido lentamente quando o jogador atribuído ao rastreador conseguir uma eliminação!
Defina um parâmetro de vetor
Um parâmetro vetorial recebe o valor Vector4. Vetores são tipicamente usados para cores RGBA (os quatro vetores), você vai usar um Vector4 para alterar a cor do ícone com base no que está configurado no dispositivo.
Para obter mais informações sobre vetores, consulte Expressões de material vetorial na documentação da Unreal Engine.
Selecione o TrackerMaterial na Hierarquia, abra a janela Vinculações de Visualização e selecione +Adicione widget.
Selecione as propriedades TrackerMaterial > Pincel no campo vazio à esquerda.
Selecione Funções de conversão > Definir parâmetro vetorial no campo vazio à direita.
Conforme explicado acima, essa vinculação obtém o Pincel do TrackerMaterial (neste caso, é MI_TrackerExample) e define um parâmetro vetorial que você especifica nessa instância de material. Você pode definir a cor do ícone para seguir quaisquer opções que o dispositivo Rastreador tenha definido.
Digite IconColor no campo Nome do parâmetro.
Selecione o ícone do link ao lado de Valor, depois selecione MVVM_UEFN_Tracker > Cor. Isso define o valor para a propriedade Cor do ícone do modelo de visualização do rastreador.
Qualquer cor de ícone definida no dispositivo Rastreador é passada para o material. Se quiser um ícone laranja, basta defini-lo no dispositivo, e ele irá colori-lo para você! O material usado neste exemplo já está configurado para isso.
Definir parâmetro de textura
Um parâmetro de textura recebe um valor Texture2D. Texturas normalmente são usadas para imagens ou ícones. Então, vamos usá-las para alterar nosso ícone com base no que está configurado no dispositivo!
Para obter mais informações sobre texturas, consulte Texturas na documentação da Unreal Engine.
Selecione o TrackerMaterial na Hierarquia, abra a janela Vinculações de Visualização e selecione +Adicione widget.
No campo vazio à esquerda, selecione MVVM_UEFN_Tracker > Pincel.
No campo vazio à direita, selecione Funções de conversão > Definir parâmetro de textura.
Digite Ícone no campo Nome do parâmetro.
Evite erros ao digitar o nome do parâmetro! Se você esquecer o nome do parâmetro, pode procurar em MI_TrackerExample a lista de parâmetros disponíveis para serem definidos.
Selecione o ícone do link ao lado do campo Valor, selecione MVVM_UEFN_Tracker > Ícone no menu suspenso. Isso vincula o valor à propriedade Icon do modelo de visualização do rastreador.
O parâmetro Textura está definido. Agora, o ícone que estiver definido no seu dispositivo Rastreador o passará para o widget!
Vincule texto do rastreador ao nome do rastreador
Em seguida, você vinculará o título de rastreador criado à mesma configuração no dispositivo Rastreador.
Selecione TrackerTitle em Hierarquia, abra a janela Vinculações de Visualização e selecione +Adicionar widget.
No campo vazio à esquerda, selecione TrackerTitle > Texto no menu suspenso.
No campo vazio à direita, selecione MVVM_UEFN_Tracker > Nome no menu suspenso.
Essa vinculação transmite o título do seu rastreador para o bloco de texto.
Como configurar o dispositivo Rastreador
Em seguida, você fará referência ao widget criado no UMG, no dispositivo Rastreador. Isso faz com que a interface de eliminação seja exibida no HUD.
Adicione um dispositivo Rastreado ao seu projeto.
Dê um nome ao título do rastreador. Esse nome é exibido no texto TrackerTitle no seu widget.
Adicione seu widget ao campo Widget de HUD.
Altere os campos Ícone de tarefa para qualquer ícone que você queira exibir no seu rastreador. Isso substitui o ícone de alienígena padrão em MI_TrackerExample.
Selecione uma cor em Cor do ícone. O ícone que você definiu acima assume a cor selecionada.
Continue a definir as outras configurações para adicionar o rastreador ao seu jogador.
Resultado final
Feito! Você tem um widget de rastreador personalizado aparecendo no canto superior esquerdo. Quer você elimine zumbis ou outros jogadores, o widget é preenchido lentamente! É assim que você vincula os dados de jogabilidade aos seus próprios widgets personalizados usando "Definir parâmetros de material".
