Como criar uma visualização de esquadrão personalizada

A criação de uma visualização de esquadrão personalizada baseia-se no design do widget de identificação de jogador único para criar uma visualização de esquadrão. O widget de caixa de pilha transforma a visualização do jogador de único jogador para esquadrão reproduzindo o widget de informações de jogador único usando o modelo de visualização.

A caixa de pilha é um contêiner que organiza as cópias de widgets de jogador único de maneira linear, da esquerda para a direita ou de cima para baixo. Isso cria uma aparência consistente para o esquadrão.

Para este exemplo, a visualização do esquadrão é empilhada para cima e para baixo.

Widget de informações do jogador

Para usar as informações de jogador dos membros da equipe durante um jogo, o widget Player_Info deve ser definido usando o modelo de visualização de informações do jogador do controlador do HUD. Esta configuração cria widgets separados para o jogador de controle e seu esquadrão/equipe, usando as propriedades no Dispositivo - Modelo de visualização de informações do jogador do controlador do HUD para cada widget.

Você pode continuar usando as configurações para definir as vinculações dos tutoriais Plataforma Traseira e Vida e Escudo para vincular as informações necessárias do jogador.

Sem a configuração adequada para o widget Player_Info, você receberá mensagens de erro no compilador.

Abaixo estão as etapas para criar um widget de pilha de esquadrão que vincula os modelos de visualização da lista de informações do jogador da equipe/esquadrão ao ícone do jogador, nome do jogador, saúde e escudos.

Criar um widget de usuário

1. Siga as etapas em Pop-Ups de IU para criar um Widget de usuário.

2. Dê o nome de Squad_View ao widget do usuário.

   

3. Clique duas vezes na Miniatura do widget do usuário para abrir o Editor de eventos no Unreal Motion Graphics (UMG).

O editor de widget é onde você planeja e define o design da IU para a visualização do esquadrão. Depois de decidir sobre um layout, você pode adicionar materiais para dar uma aparência personalizada à sua IU.

Agora, você deve ter dois widgets de usuário no Navegador de Conteúdo: um chamado Player_Info e um segundo chamado Squad_View.

Criar o layout de esquadrão

É uma prática recomendada trazer um único widget de Player_Info totalmente funcional para um widget Squad_View usando uma caixa de pilha como contêiner. Isso fornece um design consistente reproduzindo o design de um único jogador dentro da caixa de pilha e repetindo o design em uma direção de cima para baixo ou na direção da direita.

Você adicionará o widget de jogador único ao modelo de visualização e, em seguida, organizará o layout no gráfico de eventos por meio da caixa de pilha.

Faça o seguinte:

1. Arraste uma Sobreposição sob Squad_Info e nomeie-a como Container_Overlay.

2. Redimensione Container_Overlay para 2560 x 1440. Esse é o tamanho ideal para todas as telas.

   

3. Aninhe uma Caixa de Empilhamento sob Container_Overlay.

4. No painel Detalhes, altere as seguintes configurações da Caixa de Empilhamento:

   1. Preenchimento = 25

   2. Orientação = Vertical

   

   A caixa de pilha tem 25 px de preenchimento a partir da borda da tela.

5. Na barra de menus principal, selecione Janela > Modelos de visualização para abrir o painel Modelos de visualização.

   

6. Clique em +Modelo de visualização e selecione Dispositivo - Controlador do HUD - Lista de informações do jogador de equipe/esquadrão > Selecionar. Isso cria um modelo de visualização para o dispositivo Controlador do HUD.

7. No painel Detalhes, clique em +Adicionar extensão de modelo de visualização. Isso abre opções que fornecem uma maneira de gerar dinamicamente o widget de esquadrão dentro do widget Switch_View com base no número de jogadores em sua equipe/esquadrão.

   

   

   Antes de +Adicionar extensão de modelo de visualização

   Depois de +Adicionar extensão de modelo de visualização

8. Na configuração Classe de widget de entrada, selecione seu widget Player_Info no menu suspenso e defina Modelo de visualização de entrada como HUDPlayerInfoListViewModel.

9. Expanda a opção Modelo de espaço e ajuste o espaçamento entre o widget de cada jogador. Adicione ou remova widgets e altere o alinhamento. Use essas opções para visualizar a aparência dos widgets no jogo.

   Se os elementos da IU forem muito grandes para o espaço disponível, volte para o widget Player_Info e ajuste o tamanho dos seus widgets de imagem para caber no widget Command_View.

Em seguida, você adicionará vinculações para tornar toda a IU funcional para os esquadrões.

Vinculações de esquadrão

Para vincular as informações de um esquadrão ao widget Puzzle_View, você precisa fazer referência às informações do membro do esquadrão por meio de vinculações de visualização. As vinculações informam ao widget quais informações ele precisa obter dos dispositivos vinculados e sobre qual jogador. As informações de cada jogador são preenchidas na IU por meio do dispositivo Controlador do HUD.

1. Selecione a Caixa de Empilhamento no painel Hierarquia, abra Vinculações de Visualização e selecione +Adicionar Widget. Isso adiciona a caixa de pilha como um widget ao painel View Bindings.

2. Selecione Squad_View > Selecionar no menu suspenso Widget. Isso seleciona o widget de esquadrão e todos os seus widgets internos para vinculação.

   

3. No campo Squad_View à esquerda, selecione Squad_View > StackBox > Modelo de visualização StackBox > Definir Itens > Selecionar. Isso passa a matriz de modelos de visualização de informações do jogador para a extensão recém-configurada com uma função chamada Definir Itens.

   Se você não vir a função Set Items nesta etapa, compile o widget e verifique novamente.

   

   Se PlayerInfoStack_ViewModel_Extension não aparecer na sua lista, pressione Compile e ela aparecerá.

4. No campo vazio à direita, selecione Squad_View > HUDPlayerInfoListViewModel > Matriz de informações do jogador de equipe/esquadrão > Selecionar. Isso passa a matriz de modelos de visualização de informações do jogador para a extensão recém-configurada com uma função chamada Definir Itens.

   

5. Clique em Compilar. Seu widget está pronto para ser adicionado ao dispositivo Controlador do HUD.

Adicione seu widget ao Controlador do HUD e teste seu projeto.

Configuração do Dispositivo Controlador do HUD

Existem algumas configurações essenciais do Controlador do HUD a serem alteradas. Você substituirá esses elementos padrão do HUD do Fortnite pelo seu próprio design de widget.

1. Arraste um dispositivo Controlador do HUD para o seu projeto e deixe o dispositivo selecionado para preencher suas configurações no painel Detalhes.

2. No painel Detalhes, defina as seguintes opções:

   1. Mostrar HUD = Sim

   2. Substituir Widget de Informações do Jogador = Nome do Seu widget

3. Clique no ícone Salvar para salvar suas alterações.

   

4. Selecione Iniciar sessão para testar sua IU personalizada.

   

Teste o jogo com dois ou mais jogadores para garantir que o layout funcione e fique bem com a ilha que você criou.