Crie uma IU personalizada com o material base M_UI_Shape_Rectangle criando instâncias de material a partir do material base para serem usadas em widgets UMG. O material de forma também fornece uma maneira de criar formas planas que podem ser usadas para criar um design de IU exclusivo. O material M_UI_Shape_Rectangle está localizado no Navegador de Conteúdo na pasta Fortnite em IU > Materiais.
Instâncias de material podem ser usadas para preencher um widget como tinta. Materiais são preferíveis à adição de texturas a widgets porque usam menos memória do que texturas importadas. Materiais também são uma maneira melhor de projetar a interface do usuário no UEFN e na UE, especialmente para um design de IU plana, porque é mais fácil de renderizar, sem mencionar que você pode usar materiais 3D e dinâmicos.
O widget UMG é referência em configurações de IU especiais em alguns dispositivos no Unreal Editor para Fortnite (UEFN). Os widgets UMG substituem a IU do Fortnite no heads-up display (HUD).
Para obter mais tutoriais sobre como usar a IU de criação de material, consulte o seguinte:
Criar formas de IU personalizada
Antes de criar uma forma de IU personalizada, decida como deseja a aparência da IU e use o material M_UI_Shape_Rectangle para projetar a aparência do widget de IU. Pode ser algo simples, como um quadrado personalizado, ou algo mais complexo, como um formato de flor. Os designs podem exigir várias formas, que podem ser posicionadas juntas quando você criar o widget.
Para criar formas, você deve primeiro criar uma instância de material do material original M_UI_Shape_Rectangle.
Clique com o botão direito do mouse na miniatura do material e selecione Criar instância de material.
Na janela Salvar ativo como, dê um nome para a instância de material que será salva na pasta de conteúdo do projeto. Dê nomes para seus ativos de forma a agrupá-los. Por exemplo, instâncias de material padrão no UEFN começam com "M_UGC_" e terminam com "_Inst". O nome da sua instância de material deve ser semelhante a M_UGC_Circus_Inst.
Clique duas vezes na nova instância de material para abrir o Editor de instância de material. Você também pode acessar o editor clicando com o botão direito do mouse no ativo e selecionando Editar.
O painel Detalhes do Editor de instância de material tem as ferramentas de que você precisa para personalizar totalmente instâncias de material. Essas ferramentas podem ser encontradas nas seções:
[1] Preenchimento
[2] Traçado
[3] Cores
[4] Estado (Pairado/Focado/Pressionado/Desativado)
Preencher
As opções na seção Preenchimento afetam a forma do seu material. Para muitas opções como Transparência de preenchimento, um valor 0,0 desativará a configuração, enquanto um valor 1,0 a ativará. Lembre-se sempre de ativar a opção Transparência de preenchimento para que sua forma seja exibida na Janela de visualização.
Na imagem acima, você verá as configurações ajustadas que foram usadas para criar uma forma.
Traçado
As opções na seção Traçado podem ser ajustadas para criar uma borda personalizável. Devido à cor azul predefinida da borda, você poderá ver seu design ao ajustar os valores das opções de Traçado.
A imagem acima mostra a opção Transparência do traçado definida como 1,0 para exibir uma borda azul.
Cores
As opções na aba Cor podem ser alteradas para personalizar ainda mais as formas que você criar. Essas opções apenas poderão ser ajustadas depois que você definir a opção como "Ativado", clicando na caixa booleana correspondente.
Você pode até mesmo criar gradientes para formas e bordas. Você pode visualizar gradientes à medida que eles são alterados na janela de visualização.
Na imagem acima, cores são aplicadas em gradientes. Essa opção é ativada ao ajustar o valor de Gradiente ativado/desativado acima de 0.0.
Estado
Essa opção está localizada na seção Cor e pode ser modificada para definir as cores da forma em vários estados. Você pode definir cores personalizadas para diferentes ações do jogador, como passar o mouse, focar, pressionar ou desabilitar a forma da IU.
A menos que você defina um material para a opção Material físico, sua forma terá um limite transparente quando for importada para o widget criado. Para evitar isso, defina seu material físico como Madeira para que ele possa ser renderizado como um material real.
Quando terminar de personalizar a forma da IU, lembre-se de salvar clicando no ícone de disquete no canto superior direito. Sua instância de material personalizada será salva na pasta de conteúdo do projeto.
O exemplo deste tutorial usa formas que se combinam para formar um girassol junto com um plano de fundo de botão.
Criar widgets de IU
Agora, você precisará criar widgets com os quais os jogadores possam interagir. Leia o documento Editor de Widget de IU para saber mais sobre como criar widgets e organizar a aba Hierarquia.
Nesse ponto, você deve ter criado instâncias de material para cada elemento do seu design.
O exemplo deste tutorial consiste em várias instâncias de uma pétala de flor e um disco de flor. O botão consiste em uma base e duas imagens que são usadas como ícones do botão.
Essas instâncias de material serão organizadas em Blueprints de widgets para criar um design personalizado. O Blueprint do widget é o que será importado para o dispositivo Janela de Diálogo para substituir a IU pré-padrão.
Crie um novo Blueprint de widget que conterá as instâncias de material e os widgets de botão que compõem sua IU personalizada. Esse será o modelo de widget adicionado às configurações do dispositivo.
Nesse widget, combine todas as suas instâncias de material personalizadas para criar seu design. Ao criar seu widget de IU, arraste os ativos de Comum, IU Comum, Painel, UIKIT e Criados pelo Usuário para baixo do nome do widget.
Na foto acima, os ativos estão organizados na aba Hierarquia e reposicionados na janela de visualização para criar uma forma de flor para a IU personalizada.
Quando estiver satisfeito com o design, salve o Blueprint e retorne ao Navegador de Conteúdo. Esse Blueprint agora será importado para um dispositivo Janela de Diálogo, que exibirá a IU personalizada.
Como adicionar widgets a dispositivos
Quando seu design estiver pronto, coloque um dispositivo Janela de Diálogo para exibir seu widget.
Arraste seu widget até Detalhes > Widget modal > Classe de substituição de modelo.
Você pode visualizar e testar sua criação por meio de uma sessão iniciada.