Crie um temporizador animado personalizado para jogos que dependem de tempo. Com animações da IU, você pode fazer o temporizador pulsar e desaparecer, ou até mesmo adicionar um material de contagem regressiva personalizado ao redor do relógio.
Este tutorial mostra como:
Configurar um material.
Animar um visor de relógio.
Alterar a cor do relógio.
Crie um widget de usuário no Navegador de Conteúdo seguindo as instruções no tutorial Janelas de IU.
Passo 1: Configurar os widgets
Depois de criar o widget de usuário, clique duas vezes na miniatura do widget para abrir o Editor de Widgets.
Arraste um widget Sobreposição até o gráfico de widgets e redimensione-o para 1920x1080 arrastando o canto inferior direito. Esse widget atua como a tela na qual a IU será exibida.
Clique com o botão direito do mouse no widget Sobreposição no painel Hierarquia para renomear o widget para Raiz. Esse nome também serve para lembram que é o widget que atua como um modelo da tela.
Arraste um segundo widget Sobreposição até o widget Raiz. Esse widget conterá todos os widgets que compõem o design e a função do temporizador animado.
Renomeie o segundo widget Sobreposição para ParentContainer no painel Hierarquia.
No painel Detalhes, defina as seguintes propriedades:
Preenchimento = 25.0
Alinhamento Horizontal = Alinhamento Centralizado Horizontalmente
Arraste um widget Caixa de Tamanho até o widget ParentContainer. Isso determinará e aplicará o tamanho dos seus widgets filhos. Os widgets filhos da Caixa de Tamanho se tornarão o visor do relógio.
Renomeie o widget Caixa de Tamanho para BGSizeBox no painel Hierarquia.
No painel Detalhes, defina os campos Alinhamento Horizontal e Alinhamento Vertical como Alinhamento Centralizado.
Marque para selecionar a Largura Mínima Desejada e a Altura Máxima Desejada para ativar essa opção e, em seguida, defina as propriedades como 130.0.
O contêiner deve ficar no widget Raiz, conforme mostrado abaixo
Arraste um widget Imagem para o widget BGSizeBox.
Renomeie o widget Imagem como Temporizador no painel Hierarquia.
No painel Detalhes, defina os campos Alinhamento Horizontal e Alinhamento Vertical como Alinhamento Centralizado.
Adicione uma instância de material à propriedade Pincel > Imagem. Pode ser um material que faz a contagem regressiva do tempo.
O material preenche o espaço dentro do widget Contêiner Pai.
Arraste um widget Caixa de Texto para o widget Contêiner Pai.
Renomeie o widget Caixa de Texto para TimerText no painel Hierarquia.
No painel Detalhes, defina a propriedade Texto como 00:00.
O widget TimerText fica diretamente no meio do widget do usuário.
Em seguida, você animará o widget TimerText para tornar o tempo mais dinâmico durante o estado de urgência.
Passo 2: Animar o texto do temporizador
Para criar uma sensação de perigo iminente ao estado de urgência durante os últimos segundos do temporizador, anime o tempo do relógio.
Na animação criada abaixo, o texto do temporizador será ampliado, ficará vermelho e depois desaparecerá. Essa animação será repetida pela duração do modo de urgência definido no dispositivo Temporizador.
Clique em Animações na parte inferior da tela do Editor de Widgets. Isso abre um painel Sequencer, no qual você pode criar animações e adicionar widgets à sequência de animação.
Clique em +Animação para criar um arquivo de animação no seu widget do usuário.
Chame a animação de Urgência. Essa animação será definida mais tarde, quando você adicionar vinculações ao widget do usuário.
Um quadrado SELECIONADO azul circunda o gráfico de widget.
Clique em +Adicionar para abrir a lista de objetos que podem ser adicionados à animação no widget do usuário.
No painel Hierarquia, selecione o widget TimerText.
Selecione TimerText na lista para adicionar TimerText ao painel Sequencer.
Ao lado de TimerText, selecione o ícone + para abrir a lista de propriedades que podem ser animadas.
Selecione Transformar na lista. Isso adiciona todas as maneiras como você pode transformar o texto: translação, rotação, escala e cisalhamento.
Abra as opções de Escala e selecione o ícone + Keyframe para adicionar keyframes à linha do tempo. As opções de eixo X e eixo Y aumentam e diminuem o tamanho do texto quando você insere novos valores.
Mova o indicador de reprodução na linha do tempo para 0.25 segundo, altere os valores do eixo X e do eixo Y para 1.5 e pressione o ícone +Keyframe ao lado das opções do eixo X e eixo Y. Os keyframes aparecem na linha do tempo mostrando uma progressão no TimerText.
Mova o indicador de reprodução na linha do tempo para 0.5 segundo, altere os valores do eixo X e do eixo Y para 2.0 e pressione o ícone +Keyframe ao lado das opções do eixo X e eixo Y. Keyframes adicionais aparecem na linha do tempo mostrando uma progressão do texto.
Selecione o ícone + ao lado de TimerText e selecione Cor e Opacidade na lista. Isso adiciona as propriedades Vermelho, Verde, Azul e Alfa ao Sequencer.
Restaure o indicador de reprodução na linha do tempo e selecione o ícone + keyframe ao lado de Cor e Opacidade. Isso define o primeiro keyframe para cada uma das propriedades de Cor e Opacidade na linha do tempo.
Expanda Cor e Opacidade, altere o valor de Vermelho para 1.0, o valor de Verde para 0.0 e o valor de Azul para 0.0. Isso cria uma cor vermelha.
Mova o indicador de reprodução para 0.25 segundo e selecione o ícone + Keyframe ao lado de cada uma das propriedades em Cor e Opacidade. Isso adiciona keyframes à linha do tempo.
Mova o indicador de reprodução para 0.5 segundo, altere o valor de Alfa para 0.0 e selecione o ícone + Keyframe. Quando a animação atingir os últimos keyframes na linha do tempo, o texto desaparecerá.
Se você mover o indicador de reprodução para frente e para trás na linha do tempo, verá a animação que criou ser reproduzida no gráfico do widget.
Em seguida, você adicionará um modelo de visualização e adicionará Vinculações de Visualização para substituir o dispositivo Temporizador pelo wiidget de usuário.
Etapa 3: Adicionar Vinculações de Visualização
Para substituir a IU padrão do dispositivo Temporizador, você vinculará o widget Caixa de Texto (TimerText) às configurações do dispositivo Temporizador.
No menu Janelas, selecione Modelo de Visualização. A janela do modelo de visualização é aberta.
Clique em +Modelo de Visualização e selecione Dispositivo Temporizador - Modelo de Visualização> Selecionar. Todos os modelos de visualização do dispositivo Temporizador agora estão disponíveis para serem vinculados ao seu widget de usuário.
No painel Hierarquia, selecione o widget TimerText.
Clique em Vinculações de Visualização na barra de ferramentas inferior para abrir o painel de Vinculações de Visualização.
Clique em +Adicionar widget TimerText para adicionar o widget TimerText ao painel Vinculações de Visualização.
Marque a caixa de seleção de TimerText para abrir o menu suspenso de propriedades do widget.
No menu suspenso, selecione TimerText > Texto > Selecionar. Isso identifica o texto do widget TimerText como a propriedade que está sendo vinculada.
Selecione o campo em branco à direita para abrir o menu suspenso de vinculações.
No menu suspenso de vinculações, selecione Modelo de Visualização de TimerText> Hora Atual > Selecionar. Isso vincula o widget TimerText à hora atual do dispositivo Temporizador e exibe a hora atual na tela.
Em seguida, você adicionará a animação ao modelo de visualização para que seja reproduzida na tela durante o modo de urgência.
Passo 4: Adicionar a animação
Você adicionará a animação de forma semelhante a como adicionou as vinculações para TimerText no painel Vinculações de Visualização.
Selecione +Adicionar condição na parte superior do painel Vinculações de Visualização. Isso adiciona uma linha condicional ao painel Vinculações de Visualização.
Abra o menu suspenso do modelo de visualização e selecione Widget de Usuário > Selecionar. Isso adiciona o widget do usuário à condição.
Selecione o campo esquerdo para abrir o menu suspenso de vinculação do modelo de visualização.
Selecione CreativeTimerViewModel > É Urgência > Selecionar. Usa É Urgência como uma propriedade de comparação para ver se ele é igual a um valor específico e, em seguida, com base no valor que foi retornado (true/false), aciona a animação.
Altere o campo de tempo para 1.0. Isso significa que, se É Urgência for igual a 1.0, o valor será verdadeiro e a animação será reproduzida.
Selecione o campo direito para abrir o menu suspenso da fila e selecione o Widget de Usuário > Animação de Reprodução na Fila > Selecionar. Agora, a animação que você criou será colocada em fila para ser reproduzida quando o modo É Urgência for igual a 1.0.
Ao lado de Na Animação, selecione o ícone de vinculação para que ele se transforme em um ícone de link azul.
Selecione o campo Na Animação e, em seguida, selecione Widget de Usuário > Nome da Animação > Selecionar. A animação selecionada é reproduzida quando colocada na fila.
Personalize o valor Iniciar no Tempo para 10.0. Esse valor é o segundo/quadro em que a animação deve começar a ser reproduzida. Se definido como 0.0, significa que a animação será reproduzida no segundo/quadro 0.0 da animação.
Defina a Velocidade de Reprodução como 0.5. Isso faz com que a animação seja reproduzida na metade da velocidade definida no Sequencer.
Clique em Compilar para salvar seu Widget de Usuário.
Passo 5: Adicionar o dispositivo Temporizador
A última etapa é adicionar um dispositivo Temporizador à janela de visualização e personalizar suas configurações.
No Navegador de Conteúdo, selecione a pasta Fortnite > Dispositivos para abrir todas as pastas de dispositivos.
Digite Temporizador na barra de pesquisa da visualização de ativos para encontrar o dispositivo Temporizador.
Arraste o dispositivo Temporizador para a janela de visualização.
No painel Detalhes, defina a Duração como 30.0 segundos.
Expanda a opção Avançado para revelar a Classe de Widget Personalizada.
Selecione seu widget de usuário no menu suspenso de Classe de Widget Personalizada.
No segundo conjunto de opções Avançado, use as seguintes configurações:
Pode Interagir = Não
Comportamento de Conclusão = Restaurar
Visível Durante o Jogo = Oculto
Habilitar Modo de Urgência = Marcar
Tempo do Modo de Urgência = 10.0 segundos
Agora os jogadores não podem interagir com o dispositivo, e quando o temporizador chegar ao fim de sua duração definida, ele será restaurado. Com o modo de urgência habilitado, sua animação personalizada ficará na fila e será reproduzida pelo tempo definido em "Tempo do Modo de Urgência".
Salve suas alterações e teste seu projeto para ver o widget de usuário funcionando no HUD.
Seu teste de jogo deve resultar no tempo personalizado substituindo o dispositivo Temporizador padrão e reproduzindo a animação durante o tempo especificado.
Por si só
Há algumas maneiras de tornar o temporizador único para o seu projeto.
Adicione um material ao redor do TimerText que desaparece lentamente à medida que o temporizador se esgota.
Adicione uma textura para cercar o TimerText que se pareça com um relógio.
Mova o temporizador para o canto em vez de no centro da tela.