Pular para o conteúdo
Revelar · TécnicaIniciante

Wipes e transições

Esconder uma imagem e mostrar outra atrás de uma borda animada, feita de uma linha reta, uma forma ou um padrão.

UVTelaTempoSuperfície2D / spriteTela / pós

Cards

Um exemplo ao vivo para ajustar, aprender e copiar.

Como funciona

Um wipe troca uma imagem por outra atrás de uma borda que se move: o próximo slide de uma apresentação entrando pela esquerda, a tela de carregamento de um jogo se fechando num círculo, um painel de menu revelado de cima para baixo. Todo wipe tem as mesmas duas partes. Uma forma dá um número a cada pixel, a posição dele na ordem da revelação. Um progresso de 0 a 1 percorre esses números, e todo pixel cujo número ficou para trás do progresso aparece.

A forma decide o visual

A forma é qualquer função do UV do pixel que vá de 0 a 1 pela área. A distância ao longo de uma direção dá um wipe reto. A distância até o centro dá uma íris que abre como o diafragma de uma câmera, o ângulo em volta do centro (o fundamento polar) dá um wipe de relógio, e uma distância com sinal até uma estrela ou um losango faz essa forma crescer. Um valor de ruído dá uma dissolução, que é a mesma ideia com uma ordem aleatória. Repetir o UV com fract antes e rodar a forma em cada ladrilho dá as persianas e os quadriculados dos editores de vídeo antigos.

A borda e o ritmo

Comparar a forma com o progresso usando step dá uma borda dura, que vira uma escadinha numa diagonal. Um smoothstep num intervalo pequeno a suaviza numa linha esfumada, e alargar esse intervalo transforma o corte numa fusão ao longo da borda. O progresso quase nunca deve ser linear no tempo. Passá-lo por uma curva de easing faz a borda sair devagar e assentar no fim, e é isso que separa, em boa parte, uma transição caprichada de uma mecânica.

Para onde vai o resultado

O resultado do wipe é uma máscara: 1 onde a imagem nova aparece, 0 onde a antiga ainda está. Num elemento de interface ou num sprite, a máscara é o alfa do elemento. Entre duas cenas inteiras, ela é o fator de mistura entre duas imagens, o que exige que as duas cenas existam como texturas ao mesmo tempo: o quadro antigo guardado num render target, o novo desenhado, e uma passagem de pós-processamento misturando os dois com a máscara. A conta da máscara não muda entre os dois usos; só muda aquilo a que ela é aplicada.

Leitura complementar