Você pode criar elementos personalizados de interface de usuário (IU) para sua ilha no Unreal Editor para Fortnite (UEFN) usando um Blueprint de Widget com o dispositivo Mensagem do HUD e o dispositivo Janela de Diálogo.
Há duas categorias de Blueprint de widget para criar uma interface de usuário personalizada:
Widget do usuário: usado para criar uma Mensagem do HUD personalizada.
Variante de diálogo modal: usada para criar botões clicáveis personalizados.
O dispositivo Janela de diálogo só funciona com um Blueprint de Variante de diálogo modal. O dispositivo Mensagem do HUD funciona com ambos os tipos de Blueprint.
Para saber mais sobre o Editor de Widget, consulte o documento Editor de widget de IU.
Widget do usuário
Este widget usa o HUD para mostrar uma mensagem de interface de usuário personalizada aos jogadores. Use-o para enviar os jogadores para uma missão ou como dispositivo de narrativa para os personagens na ilha. Você poderá adicionar botões à sua mensagem no fluxo de trabalho da Variante de diálogo modal abaixo.
Arraste um dispositivo Mensagem do HUD para a janela de visualização. O dispositivo estará pronto para ser conectado ao Blueprint de widget.
Criar o Blueprint
Clique com o botão direito no Navegador de Conteúdo para abrir o menu do Navegador de Conteúdo.
Selecione Interface de usuário > Blueprint de Widget. O caminho do widget é aberto.
Selecione Widget do usuário. A miniatura do Blueprint de widget é exibida no Navegador de Conteúdo.
Renomeie a miniatura.
Selecione o dispositivo Mensagem do HUD na janela de visualização, procure a opção avançada Widget de HUD no painel Detalhes e, em seguida, selecione seu Blueprint de widget no menu suspenso.
Clique duas vezes na miniatura para abrir o editor de widgets.
Selecione um Widget de painel no menu Painel. Para este exemplo, foi usado um painel de tela.
Essa etapa deverá ser realizada antes de adicionar elementos ao widget.
O que você colocar neste painel será mostrado na mensagem do HUD.
Redimensione o widget de painel clicando no canto e arrastando até o tamanho desejado. Neste exemplo, o painel é 1920 x 1080 para alta definição (HD) completa.
Clique para ampliar a imagem.
Importe uma imagem no Navegador de Conteúdo e, em seguida, arraste o widget da imagem até o Editor de Blueprint de Widget. Essa será sua imagem de plano de fundo do HUD.
Redimensione a imagem no painel Detalhes usando a opção Tamanho da imagem em Aparência.
Mova a imagem usando os campos Translação. Arraste no primeiro campo para mover a imagem para a direita e a esquerda. Arraste no segundo campo para mover a imagem para cima e para baixo.
Arraste um widget de bloco de texto do UEFN até o painel. No widget de bloco de texto, você criará sua mensagem do HUD personalizada.
O texto será exibido na mensagem do HUD no mesmo local em que você colocar o widget de caixa de texto.
Adicione sua mensagem de IU personalizada ao campo Texto no painel Detalhes.
Adicione cor ao texto e mude seu estilo de fonte em Cor e opacidade, Família de fontes e Tamanho.
Você poderá ajustar mais o seu texto inclinando as letras, usando espaçamento personalizado entre elas ou adicionando contorno ou sombras projetadas ao texto.
Quando seu dispositivo Mensagem do HUD for acionado, sua mensagem do HUD personalizada será exibida no HUD.
Variante de Janela Modal
Este widget usa uma interface de botões para conectar um dispositivo Janela de Diálogo e um dispositivo Distribuidor de Itens para conceder um item aos jogadores. Para começar, arraste um dispositivo Janela de Diálogo e um dispositivo Distribuidor de Itens para a janela de visualização.
Criar o Blueprint
Clique com o botão direito no Navegador de Conteúdo para abrir o menu do Navegador de Conteúdo.
Selecione Interface de usuário > Blueprint de Widget. O caminho do widget é aberto.
Selecione Variante de diálogo modal. A miniatura do Blueprint de widget é exibida no Navegador de Conteúdo.
Renomeie a miniatura.
Clique duas vezes na miniatura para abrir o editor de widgets.
Arraste o widget de painel para a janela de visualização e redimensione-o.
Clique para ampliar a imagem.
Arraste o widget de imagem para a janela de visualização ou importe uma arma ou item para, em seguida, arrastar a imagem do Navegador de Conteúdo para a janela de visualização.
Selecione o alinhamento da imagem. Há diferentes alinhamentos verticais e horizontais.
Translade a imagem dentro da janela de visualização usando as ferramentas de Translação. Arraste no primeiro campo para mover a imagem para a direita e para a esquerda. Arraste no segundo campo para mover a imagem para cima e para baixo.
Arraste um widget de botão para a janela de visualização, selecione um alinhamento e, em seguida, traduza o botão usando os campos Translação.
Dê um nome ao botão no campo Texto e adicione uma ação ao campo Texto secundário.
Se quiser usar apenas uma ação no botão, adicione-a somente ao campo Texto. Ou seja, o botão pode dizer apenas: "Aperte aqui".
Defina as seguintes opções de Seleção:
Selecionável - Ativado
Interativo quando selecionado - Ativado
Isso faz com que os botões usem o comportamento de botão ao receber uma entrada.
Selecione o dispositivo Janela de diálogo na janela de visualização e pesquise Widget de modal Classe de substituição de modelo no painel Detalhes. Selecione o botão da IU no menu suspenso Classe de substituição de modelo.
Defina a Opção de exibição automática como Início do jogo. Quando você testar o jogo, o botão será gerado automaticamente no início do jogo.
Você também pode definir essa opção como Nunca e, em seguida, configurar outro dispositivo para acionar o dispositivo Janela de diálogo.
Selecione um Distribuidor de itens e adicione a arma ou o item à Lista de itens.
O item equipado deverá corresponder à imagem usada, a menos que seja usado um ponto de interrogação. Nesse caso, você poderá usar qualquer item.
Selecione o dispositivo Janela de diálogo no menu suspenso Conceder item e selecione Ao responder com o botão 1 na Lista de funções.
Lógica do botão
Agora está tudo pronto para você criar a lógica de botões para o Blueprint de widget.
Abra o editor de widgets.
Clique no botão Vinculações de visualização na parte inferior do editor.
Clique em "Criar modelo de visualização".
Selecione Modelo de visualização de diálogo modal do Modo Criativo > Selecionar > Fechar. Todas as lógicas de botões possíveis que podem ser editadas serão adicionadas ao Blueprint de widget.
Clique em Vinculações de Visualização > Adicionar widget para abrir o menu de seleção de widgets.
Selecione o widget de botão no menu suspenso Modelo de visualização de diálogo modal do Modo Criativo e, em seguida, clique em Selecionar.
Selecione o Widget unidirecional e defina como Unidirecional para modelo de visualização no menu suspenso Modo de vinculação.)
Clique no primeiro campo e selecione Funções de conversão > Obter botão de resposta 1 > Selecionar.
Esses números de botão se referem ao posicionamento no painel.
Clique no segundo campo e selecione Modelo de visualização de diálogo modal do Modo Criativo > Resposta > Selecionar.
Selecione o widget de botão do UEFN que você arrastou até o painel no menu suspenso Campo e escolha Evento de clique > Selecionar.
Clique em Compilar.
Faça o teste do jogo para garantir que o botão funciona como planejado quando pressionado.