Como animar a IU

Use o Sequencer no UMG para animar widgets. Os widgets são animados com base nos valores inseridos em um parâmetro de material.

Como configurar o widget

O widget está usando o widget de rastreador do exemplo em Como configurar parâmetros de material no UMG.

Crie um widget de rastreador se não tiver um pronto para uso. Em seguida, faça o seguinte:

1. Adicione um bloco de texto que mostre +1 na parte superior do widget de rastreador existente. Indica que o rastreador de eliminação está sendo incrementado com base no número de zumbis eliminados.

   

2. Em Renderização > Opacidade de renderização, defina Opacidade de renderização como 0,0 para esse bloco de texto.

   

3. O widget está pronto para ser animado.

Como configurar a animação

Para adicionar animação à IU, você abrirá o Sequencer no gráfico de evento para animar o ícone e "+1". Em seguida, você configurará a animação no Sequencer.

Para este exemplo, o ícone é exibido e o texto "+1" aparece quando o rastreador do jogador avança, como no gif abaixo.

1. Abra a janela Animação em Janela > Animações.

   

2. Clique em +Animação e chame a animação OnIncrement.

   

Como animar a visibilidade de um widget

Para animar a IU, você identificará o widget a ser animado e, em seguida, animará o material ou a textura associada a esse widget no Sequencer, na janela de animação. Inicie a animação selecionando IncrementText (+1).

1. Selecione OnIncrement, selecione Texto +1 e depois selecione +Adicionar > Texto incremental.

   

2. Selecione o ícone "+" na faixa IncrementText e selecione "Opacidade de renderização". Isso permite rastrear a opacidade na linha do tempo da animação.

   

3. Defina uma chave para o início da animação. Isso determina onde o texto começa a aparecer e desaparecer.

   

4. Defina a Opacidade de renderização como:

   1. 1,0 em 0,25 segundo

   2. 0,0 em 0,50 segundo

   

5. Agora, você tem uma animação que faz o texto aparecer e desaparecer sempre que o jogador obtém uma eliminação.

   

Como animar a posição de um widget

Adicione uma animação à posição do widget de texto para que o texto se mova para cima quando estiver visível antes de desaparecer.

1. Clique no ícone "+" em IncrementText e selecione Transformar.

   

2. Expanda Transformar > Translação e defina Y como o valor com o qual você deseja que o texto +1 se mova para cima enquanto estiver visível. Neste exemplo, os keyframes de translação Y no texto estão definidos como:

   1. 0,0 em 0,0 s

   2. -20,0 em 0,25 s

   3. -20,0 em 0,50 s

   

   Lembre-se de definir keyframes para cada movimento do texto.

Agora, o texto se move para cima quando aparece.

Como animar a escala de um widget

Aumente o tamanho do texto +1 animado conforme ele se move para chamar a atenção para as eliminações, animando as configurações de escala do widget. Essa animação dá a ilusão de texto "estourando" na tela.

1. Expanda IncrementText > Transformar > Escala. Os valores X e Y aparecem em Escala.

   

2. Defina a escala X e Y como keyframes na sua linha do tempo OnIncrement. Neste exemplo, os keyframes da escala foram definidos para:

   1. 0,0 em 0,0 s

   2. 2,0 a 0,10 s

   3. 0,0 a 0,50 s

Agora, o texto +1 aparece com um efeito dramático quando a animação é reproduzida.

Como animar um parâmetro de material do pincel de uma imagem

Para fazer com que o ícone no material se expanda com o progresso do rastreador, acesse o material por meio do Sequencer.

1. Selecione a imagem TrackerMaterial e clique em +Adicionar > TrackerMaterial na animação OnIncrement.

   

2. Clique no ícone + na sua faixa TrackerMaterial e selecione Brush.Brush Material. Isso adiciona uma faixa de material à propriedade de Brush.Brush.Material.

   

3. Clique no ícone + na nova faixa de Brush.Brush.Material e selecione IconScaleX e IconScaleY.

   

   Expanda IconScaleX e IconScaleY. Você pode manipular facilmente esses parâmetros no Sequencer quando a animação OnIncrement é reproduzida. Ao usar essas configurações, você pode animar o ícone ampliando e reduzindo.

4. Defina IconScaleX e IconScaleY como:

   1. 0,7 a 0,00

   2. 1,0 a 0,25

   3. 0,7 a 0,00

   

Agora, a animação usa os parâmetros de material de TrackerMaterial para animar o ícone, como no gif abaixo.

Como adicionar uma condição de animação

Agora que sua animação está pronta, vincule-a a um valor de jogabilidade para que ela reproduza uma animação quando esse valor de jogabilidade mudar.

1. Abra a janela Vinculações de Visualização ao selecionar Janela > Vinculações de Visualização.

   

2. Na janela Vinculações de Visualização, selecione +Adicionar condição.

   

   A caixa à esquerda é para o valor de jogabilidade que você deseja rastrear para alterações para que reproduza a animação à direita. No momento, +Adicionar condição aceita apenas valores Float ou Int.

   

3. Selecione a caixa à esquerda e, em seguida, selecione MVVM_UEFN_Tracker > Valor. Isso rastreia o progresso do rastreador reproduzindo uma animação sempre que o valor do rastreador incrementa.

   

4. Clique no menu suspenso do meio e selecione Maior que (>).

   As duas caixas no meio são as condições que você deseja preencher para reproduzir a animação. Sempre que o valor muda, ele verifica se está dentro dessa condição e, se estiver, reproduzirá a animação.

   Ao defini-lo como Maior que (>) 0,0, a IU reproduzirá a animação sempre que esse valor mudar.

   

5. Selecione a caixa à direita e selecione WBP_{YourWidgetName} > Queue Play Animation. A caixa à direita é a ação a ser realizada quando esse valor atender à condição. Nesse caso, para reproduzir a animação OnIncrement criada acima.

   

   Uma lista de opções relacionadas à animação que você deseja reproduzir aparece em "View Bindings".

   • In Animation = Play

   • Start at Time = Selecione um horário

   • Num Loops to Play = quantidade de vezes que a animação é reproduzida

   • Play Mode = Forward, Reverse ou Ping Pong

   • Playback Speed = acelere ou desacelere a animação

   • Restore State = restaura a animação para seu estado padrão

   

6. Clique no ícone de link ao lado de InAnimation, então selecione WBP_{YourWidgetName} > OnIncrement > SelectPing Pong.

   

Agora, sua animação está configurada para ser reproduzida sempre que o rastreador progredir.

Resultado final

À medida que os jogadores eliminam inimigos ou PNJs, a IU mostra o progresso da eliminação com o ícone de destaque e o +1 aparecendo, sendo destacado e desaparecendo.