As telas de seleção de missão geralmente aparecem no início de um jogo para permitir que os jogadores escolham suas missões. Às vezes, uma tela de seleção de missão aparece depois que um tutorial rápido de jogo familiariza os jogadores com as regras e a mecânica do jogo.
A seleção de missão inicia o jogo e leva os jogadores a um ponto inicial específico na ilha para a missão. Essas telas podem incluir detalhes sobre estatísticas das missões, fornecer informações sobre os tipos de missões que o jogador pode escolher ou simplesmente soltar os jogadores na missão selecionada.
O tutorial a seguir ensina como criar uma tela de missão que leva os jogadores à missão selecionada.
Passo 1: Pesquisar estilos de seleção de missão
Existem várias maneiras de definir o design de uma tela de seleção de menu, dependendo da quantidade de informações que você deseja fornecer aos jogadores. As informações podem estar na forma de descrições sobre a missão ou imagens de textura do nível da missão. Para este exemplo, você verá exemplos de ambos para ver o impacto que você pode criar apenas com materiais ou adicionando texturas estrategicamente ao seu design.
As texturas usam muita memória e podem consumir uma parte significativa da contagem total de memória da ilha.
Decidir sobre a quantidade de informações a incluir na tela de seleção de missão ajuda na fase de desenvolvimento.
Passo 2: Criar o layout
Projete o layout da tela de missão antes de abrir o UMG. As escolhas de design feitas neste ponto não são permanentes e podem ser redesenhadas sem comprometer nenhuma funcionalidade da interface do usuário. O layout da tela depende do que está incluído na tela de seleção de missão.
Estas são quatro decisões iniciais de layout a serem tomadas nesse estágio:
Esquema de cores — use a regra 60/30/10 ao usar cores na IU.
Escolha da fonte — atualmente, existem duas opções de fonte; Burbank e HeadingNow.
Materiais — use os materiais do modelo de funcionalidade de IU para criar sua própria aparência exclusiva para a IU.
Imagens/Texturas — as texturas devem ser reservadas para artes complicadas que não podem ser recriadas facilmente com materiais, como personagens ou contêineres artísticos.
A regra 60/30/10 significa que 60% da cor usada no design da IU deve ser a cor principal, 30% a cor secundária e 10% a cor de realce. Isso facilita a leitura e a navegação na IU.
Depois de escolher um esquema de cores, crie materiais e instâncias de material para usar no design da interface.
Para este exemplo, o design é simples. Há uma chamada para ação na parte superior da tela dizendo aos jogadores “Escolha sua missão”, seguida por três imagens rotuladas como "Missão 1", "Missão 2" e "Missão 3", cada uma com um botão "INICIAR".
Passo 3: Definir o design do layout do widget
Existem quatro partes principais no exemplo de layout do widget:
Design de segundo plano
Design de ladrilho da missão 1
Design de ladrilho da missão 2
Design de ladrilho da missão 3
Para criar um widget que tenha botões funcionais, você precisa usar um widget Variante de Janela Modal. Há um modelo de visualização especial usado com o widget Variante de Janela Modal que fornece uma maneira de vincular botões a dispositivos.
Dentro da pasta, crie um widget Variante de Janela Modal.
Dê ao widget o nome de Mission_Select_UI.
Clique duas vezes no widget Mission_Select_UI para abrir o Editor de Widgets.
Design de segundo plano
Neste exemplo, o design do segundo plano da tela de seleção de missão envolve o uso de materiais para adicionar blocos de cores ao segundo plano, adicionando uma chamada para ação no topo da tela e adicionando uma imagem de textura de um personagem.
No Editor de Widgets, faça o seguinte:
No painel Paleta, arraste um widget Sobreposição até o gráfico do widget. Esse widget torna-se o widget raiz e atua como a tela em que a IU aparece.
No gráfico de widget, expanda o widget de sobreposição até que o tamanho seja 1920x1080.
No painel Hierarquia, clique com o botão direito do mouse no widget Sobreposição para abrir o Menu de Contexto. Selecione Renomear no menu suspenso e dê o nome de Raiz ao widget. Este widget abrange todos os widgets que compõem a tela de seleção de missão.
Altere o layout do gráfico para Desejado. Isso permite definir a IU com o tamanho exato que você deseja que ela apareça em qualquer tela.
Você pode visualizar como sua IU muda de acordo com a plataforma selecionando uma tela no menu suspenso "Tamanho de Tela".
Arraste um painel de Sobreposição do painel Paleta no widget Raiz e renomeie-o para Contêiner Pai. Esse widget de sobreposição abrigará todas as partes da tela de seleção de missão.
Esse widget deve ter o mesmo tamanho que o widget raiz.
Altere as opções de alinhamento do widget Contêiner Pai para Preenchimento Horizontal e Preenchimento Vertical.
Arraste um widget Imagem do painel Paleta até o painel Hierarquia, no widget Contêiner Pai.
Clique com o botão direito no widget Imagem para abrir o menu de contexto. Selecione Renomear no menu suspenso e dê ao widget o nome de Cor de Fundo da IU.
Selecione o widget Cor de Fundo da IU no painel Hierarquia para abrir suas opções no painel Detalhes.
Nas opções de Slot (Slot de Sobreposição), use as seguintes configurações de alinhamento:
Alinhamento Horizontal = Preenchimento Horizontal
Alinhamento Vertical =Preenchimento Vertical
Nas opções de Aparência, use o menu suspenso Pincel > Imagem para selecionar o material de cor primária. Isso torna o widget de imagem da cor do material.
Arraste um widget Painel de Grade do painel Paleta para o widget Contêiner Pai e renomeie-o como Corpo. O painel de grade atua como um contêiner para todo o conteúdo da IU. Ele também adiciona uma grade flexível ao layout que organiza seus widgets filhos em linhas e colunas. Neste exemplo, o conteúdo da tela da missão e da imagem do personagem.
Em Slot (Slot de Sobreposição), use as seguintes configurações:
Alinhamento Horizontal = Alinhamento Centralizado
Alinhamento Vertical = Alinhamento Centralizado
Preenchimento = 64.0
Arraste uma Caixa de Empilhamento até o widget Corpo e renomeie-a como Conteúdo. A Caixa de Empilhamento usa alinhamento horizontal ou vertical para definir o layout de seus widgets filhos.
Altere as configurações de alinhamento do widget Conteúdo para Preenchimento Horizontal e Preenchimento Vertical.
Na opção Comportamento, altere a configuração de Orientação para Vertical.
Como adicionar texto de chamada
Arrastar um widget Caixa de Texto do painel Paleta e coloque-o aninhado em Conteúdo. Ele se torna a chamada que solicita que os jogadores escolham uma missão.
Renomeie a caixa de texto para Escolha sua missão.
Selecione o widget Escolha sua missão no painel Hierarquia para abrir suas opções no painel Detalhes.
Nas opçõess de Slot (Slot de Sobreposição), use as seguintes configurações:
Tamanho = Auto
Alinhamento Horizontal = Alinhamento à Esquerda
Alinhamento Vertical = Preenchimento Vertical
Clique no campo Texto, exclua o texto padrão e digite Escolha sua missão.
Nas opções de Aparência, use as seguintes configurações:
Cor e Opacidade = Hex Linear E0137CFF
Família de Fontes = HeadingNow
Tipo de Letra = 86Bold
Tamanho = 85
Tamanho do Contorno = 2
Cantos Mitrados = Marcar
Cor do Contorno = Hex Linear FFFFFFFF
Arraste um widget Imagem para o widget Conteúdo e renomeie-o como Espaçador. Esse widget é usado como espaçador para colocar espaço entre a chamada e os ladrilhos da missão.
Como adicionar espaço entre os ladrilhos de missão
Arraste um widget Sobreposição para o widget Conteúdo e renomeie-o como Ladrilhos.
Arraste um widget Imagem para o widget Ladrilhos e renomeie-o como TileBG.
Selecione o widget TileBG no painel Hierarquia para abrir suas opções no painel Detalhes.
Nas opções de Slot (Slot de Sobreposição), use as seguintes configurações:
Alinhamento Horizontal = Preenchimento Horizontal
Alinhamento Vertical = Preenchimento Vertical
Nas opções de Aparência, use as seguintes configurações.
Pincel > Imagem = Material de Segundo Plano Secundário
Tamanho da Imagem:
X = 1.200
Y = 32.0
Arraste um widget Caixa de Empilhamento para o widget Ladrilhos e renomeie-o como Ladrilhos de Missão. Essa Caixa de Empilhamento ordenará os ladrilhos de missão da esquerda para a direita.
O layout do segundo plano está concluído. A tela de seleção de missão deve estar bem vazia nesse estágio.
Em seguida, você irá posicionar os três blocos de seleção de missão e construí-los dentro do widget Caixa de Empilhamento. Você também adicionará uma textura de personagem ao design para adicionar interesse visual. Desing de ladrilho da missão 1.
O design dos ladrilhos de missão pode fornecer informações sobre o nível e os objetivos, além de apresentar estatísticas sobre os objetivos do jogador, e pode até mesmo acompanhar o progresso do jogador nesses objetivos. Este exemplo de ladrilho fornece um design mais simples. Há uma textura de segundo plano que mostra uma representação do nível, um número de missão e um botão iniciar. Usar uma série de Caixas de Empilhamento permite posicionar widgets da esquerda para a direita ou de cima para baixo. Quando você tem um layout vertical ou horizontal, uma caixa de empilhamento ajuda a manter o layout consistente. Todos os três ladrilhos de missão seguem o mesmo padrão de design. Siga as instruções abaixo para construir todos os três ladrilhos de seleção.
Arraste um widget Sobreposição para o Painel de Grade no painel Hierarquia e renomeie-o como Missão 1. Isso se torna um compartimento que contém todos os elementos de design para o ladrilho da Missão 1.
Selecione o widget Missão 1 no painel Hierarquia para abrir suas opções no painel Detalhes.
Na opção Slot (Slot de Caixa de Empilhamento), use as seguintes configurações de Preenchimento:
Esquerda = 0.0
Cima = 0.0
Direita = 24.0
Baixo = 0.0
Arraste um widget Imagem para o widget Mensagem 1 no painel Hierarquia e renomeie-o como Mission1Image. Esse widget é a representação visual da Missão 1.
Selecione Mission1Image no painel Hierarquia para abrir suas opções no painel Detalhes.
Nas opções de Slot (Slot de Caixa de Empilhamento), use as seguintes configurações:
Alinhamento Horizontal = Horizontal Total
Alinhamento Vertical = Vertical Total
Nas opções de Aparência, altere as seguintes configurações:
Image = textura da missão 1
Tamanho da Imagem:
X = 256.0
Y = 256.0
Definir o tamanho da imagem fornece outra camada de controle sobre o design dos ladrilhos.
Como ordenar o conteúdo do ladrilho
Arraste um widget Caixa de Empilhamento para o widget Missão 1 e renomeie-o como M1Content.
Selecione M1Content no painel Hierarquia para abrir suas opções no painel Detalhes.
Nas opções de Slot (Slot de Sobreposição), altere as seguintes configurações:
Alinhamento Horizontal = Alinhamento Central
Alinhamento Vertical = Alinhamento Central
Isso faz com que todos os widgets filhos da Caixa de Empilhamento se alinhem no centro.
Na opção Comportamento , defina Orientação como Vertical. Isso faz com que todos os widgets filhos sejam empilhados verticalmente.
Arraste um widget Sobreposição para M1Content e renomeie-o como M1Header. Essa sobreposição atua como um compartimento para todos os ativos de cabeçalho e os formata de acordo com as configurações da sobreposição.
Selecione M1Header no painel Hierarquia para abrir suas opções no painel Detalhes.
Em Slot (Slot de Caixa de Empilhamento), altere as seguintes opções:
Preenchimento:
Esquerda = 0.0
Cima = 0.0
Direita = 0.0
Baixo = 128.0
Tamanho = Auto
Alinhamento Horizontal = Alinhamento Centralizado
Alinhamento Vertical = Vertical Total
As configurações de preenchimento único fornecem preenchimento no lado direito do ladrilho da Missão 1.
Como estilizar o texto do ladrilho de missão
Arraste um widget Imagem para M1Header e altere o nome para M1Stroke.
Selecione M1Stroke no painel Hierarquia para abrir suas opções no painel Detalhes.
Em Slot (Slot de Sobreposição), defina o alinhamento como Horizontal Total e Vertical Total.
Nas opções de Aparência, use as seguintes configurações:
Imagem = Slice_Material
Tamanho da Imagem:
X = 200.0
Y = 32.0
Arraste um widget Caixa de Texto para o widget M1Header e renomeie-o como Mission_1.
Selecione o widget de texto Mission_1 no painel Hierarquia para abrir suas opções no painel Detalhes.
Nas opções de Slot (Slot de Sobreposição), use as seguintes configurações de alinhamento:
Alinhamento Horizontal = Alinhamento Central
Alinhamento Vertical = Alinhamento Superior
Altere o Texto para Missão 1.
Na ferramenta Pincel > Imagem, abra o Seletor de Cores e escolha sua cor de destaque para o texto.
Em Fonte, defina as seguintes opções:
Tipo de Letra = Negrito
Tamanho = 25.0
Espaçamento entre Letras = 65
Quantidade de distorção = 0.28
Em Configurações de Contorno, defina as seguintes opções:
Tamanho do Contorno = 1
Alfa de Preenchimento Separado = Marcar
Aplicar Contorno à Sombra Projetada = Marcar
Cor de Contorno = Selecione a cor principal na ferramenta Seletor de Cores
Altere a Cor da Sombra para sua cor principal na ferramenta Seletor de Cores. A fonte deve parecer levemente 3D e ter um estilo distinto, diferente do texto da chamada.
Como adicionar um botão de início
Arraste um widget Botão Silencioso para o widget M1Content e renomeie-o como START_M1_Button.
Selecione Start_M1_Button no painel Hierarquia para abrir suas opções no painel Detalhes.
Altere o Texto do botão para INICIAR.
Nas opções de Slot (Slot de Caixa de Empilhamento), defina a Altura Mínima como 56. Isso diminui a altura do botão.
Marque Seleção > Selecionável. Isso torna o botão selecionável para o jogador.
Em Entrada, defina as seguintes opções:
Método de Toque = Para Baixo
Método de Pressionamento= Pressionamento de Botão
Use os passos para criar o layout para a Missão 2 e a Missão 3.
Antes de adicionar os ladrilhos da Missão 2 e Missão 3, o design deve se parecer com a imagem abaixo.
Depois que todos os ladrilhos de missão estiverem concluídos, adicione um personagem ao design para dar à IU algum apelo visual.
Como adicionar uma textura de personagem
Adicionar uma textura de personagem à IU extrai todas as cores escolhidas para o design e adiciona ao estilo visual da IU. Lembre-se de usar a potência de dois para garantir que a textura usada seja de alta qualidade e possa ser dimensionada para qualquer tamanho.
Arraste um widget Imagem para o widget Corpo e renomeie-o como Personagem.
Selecione o widget Personagem no painel Hierarquia para abrir suas opções no painel Detalhes.
Em Aparência, use as seguintes configurações:
Pincel > Imagem = Textura do personagem
Tamanho da Imagem:
X = 700
Y = 700
Nas opções de Slot (Slot de Grade), use as seguintes configurações:
Alinhamento Horizontal = Alinhamento à Direita
Alinhamento Vertical = Vertical Total
Deslocamento = Use as ferramentas dos eixos X e Y para posicionar com precisão a textura do personagem.
Assim que a seção da missão estiver concluída, tudo estará pronto para conectar a funcionalidade dos botões na IU.
Passo 4: Adicionar um modelo de visualização
Um modelo de visualização controla as informações do jogador por meio de uma lista de funções e fornece uma maneira específica de vincular widgets UMG a dispositivos do Modo Criativo. Há um modelo de visualização específico que funciona com botões, o CreativeModalDialogViewmodel. Esse modelo de visualização funciona apenas com o widget Variante de Janela Modal e fornece várias funções de botão.
Para usar o modelo de visualização, faça o seguinte:
Abra o menu Janelas na barra do menu principal.
Selecione Modelos de Visualização no menu suspenso. O painel de CreativeModalDialogViewmodel é documentado automaticamente na janela do Editor de Widgets.
Todas as funções de botão são adicionadas ao widget. Agora, você precisa adicionar as vinculações para fazer os botões funcionarem.
Passo 5: Adicionar dispositivos
Depois que as áreas da missão estiverem configuradas, cada área precisa do seu próprio dispositivo Teletransportador configurado para receber o jogador. Um dispositivo Janela de Diálogo usa o widget Variante de Janela Modal e mostra a IU de widgets quando acionado.
Dispositivo Janela de Diálogo
Comece adicionando um dispositivo Janela de Diálogo ao projeto. Modifique suas opções e, em seguida, adicione o widget Variante de Janela Modal ao dispositivo.
Arraste um dispositivo Janela de Diálogo para a janela de visualização.
No painel Detalhes, defina as seguintes Opções do Usuário:
Descrição = Tela de seleção de missão
Exibição Automática = Início do Jogo
Tipo de Resposta = 3 Botões
Essas opções identificam o widget, determinam quando a IU é exibida no HUD e o número de botões anexados ao widget.
Em Avançado, defina as seguintes opções:
Botão Voltar Padrão = Nenhum
Texto do Botão 1 = INICIAR
Texto do Botão 2 = INICIAR
Texto do Botão 3 = INICIAR
Segundo Plano da Máscara = Marcar
Habilitado Durante a Fase = Somente Jogabilidade
Role para baixo até Widget Modal > Classe de Substituição de Modelo e selecione seu widget Mission_Select_UI no menu suspenso.
Role até Opções do Usuário - Funções e, em Exibir, abra um elemento de matriz.
Adicione a Plataforma de Surgimento do Jogador 1 no campo superior.
Selecione Ao Gerar Jogador para a função da Plataforma de Surgimento.
Dispositivos Teletransportadores
Para reduzir o tempo de desenvolvimento, crie o primeiro dispositivo teletransportador e modifique suas opções, depois copie o dispositivo e coloque os dispositivos adicionais em suas respectivas áreas de missão.
Arraste um dispositivo Teletransportador para a janela de visualização.
No painel Detalhes, em Opções do Usuário, desmarque Fenda do Teletransportador Visível e Reproduzir Efeitos Visuais.
Role para baixo até Opções do Usuário - Funções e, em Teletransportar, abra um elemento de matriz.
Adicione a Janela de Diálogo ao campo superior.
Selecione Ao Responder com o Botão 1.
Duplique o dispositivo Teletransportador 2 vezes.
Para os Teletransportadores adicionais, em Opções do Usuário - Funções > Teletransportar > Dispositivo Janela de Diálogo, altere a função para o botão correspondente (Ao Responder com o Botão 2, Ao Responder com o Botão 3).
Para iniciar uma missão, o jogador clica no botão associado a uma área de missão e é teletransportado para a área de missão selecionada. Para criar essa funcionalidade, você vinculará a funcionalidade do botão aos botões na tela de seleção.
Etapa 6: Vinculações de Visualização
O painel Vinculações de Visualização adiciona a lógica que vincula o dispositivo e a função de widget.
Neste exemplo, os botões são vinculados aos dispositivos Teletransportadores por meio da função Teletransportar. Quando o jogador seleciona uma missão, clicar no botão INICIAR ativa o teletransportador conectado e teletransporta o jogador para a área da missão.
Todos os botões adicionados à hierarquia são numerados. Isso facilita na hora da vinculação da função do botão ao dispositivo.
Para adicionar as vinculações, faça o seguinte:
Selecione Start_Mission_1_Button no painel Hierarquia para realçá-lo e, em seguida, selecione Vinculações de Visualização na barra de ferramentas inferior. A janela Vinculações de Visualização é aberta com o Botão Silencioso já selecionado.
Selecione +Adicionar widget Start_Mission_1_Button. Isso cria uma visualização de vinculação abaixo.
Selecione o campo esquerdo que contém Start_Mission_1_Button e selecione Ao Clicar > Evento no menu suspenso. O evento Ao Clicar é adicionado ao Botão Silencioso.
Selecione o campo direito em seguida e selecione CreativeModalDialogViewmodel > Resposta > Selecionar no menu suspenso. Isso adiciona uma função Resposta ao evento Ao Clicar do botão.
No menu suspenso de Resposta, selecione Botão 1. A função deve ser vinculada ao primeiro Botão Silencioso.
Repita essas etapas para vincular os próximos dois botões.
Neste ponto, todos os botões devem estar vinculados aos teletransportadores, e a tela de seleção de missão deve aparecer quando o jogador surgir no início do jogo.
Resultado
O último passo é testar o projeto para garantir que a IU está funcionando como o esperado. Inicie uma sessão, e a tela de seleção de missão deverá aparecer após o jogador surgir na ilha, e ele deverá se teletransportar para a missão selecionada na IU.
Por si só
Há algumas maneiras de alterar o design da tela de seleção de missão para torná-la única ao seu projeto.
Você pode alterar o ladrilho de segundo plano da missão para um material em vez de uma textura. Isso pode dar uma aparência diferente à tela de missão.
Você pode adicionar um rastreador a cada missão para monitorar as estatísticas dos jogadores ou os objetos coletados.
Você pode adicionar um dispositivo Configurações de Rodada para fazer jogadores ressurgirem e trazer a tela de seleção de missão de volta, permitindo que selecionem as outras missões que ainda não jogaram, e também pode tornar as missões selecionadas indisponíveis após serem concluídas com sucesso.
