Efeito de Revelação de Mudança de Temporada


10

Eu estava assistindo o teaser trailer de Seasons After Fall , e fiquei impressionado com o efeito que eles usam para fazer a transição entre as temporadas (cerca de 21 a 24 segundos):

Animação mostrando o efeito de revelação

A arte nivelada, incluindo o plano de fundo e as plataformas de primeiro plano, muda de um outono de cor sépia para um inverno de lavanda, com o efeito se espalhando para fora do personagem do jogador, um pouco como a água encharcada de papel.

Parece mais do que apenas uma alteração na paleta, pois os detalhes nos padrões de folhas e cascas mudam na transição.

Como eu consegui um efeito semelhante a esse em um jogo 2D Unity?

Respostas:


12

Uma maneira de conseguir isso seria misturar-se entre os dois fundos usando um mapa alfa. Uma abordagem simples seria renderizar o plano de fundo "de volta" (oculto) e, em seguida, o plano de fundo "de frente" (inicialmente visível). Use o canal alfa do plano de fundo frontal, ou uma textura alfa separada, para controlar a transparência do plano de fundo frontal, como faria com qualquer sprite transparente ou translúcido. Onde esse mapa alfa for menor que um, partes do plano de fundo serão mostradas.

Então é só criar o mapa alfa de acordo com o efeito que você deseja. No vídeo que você mostra, parece que esse mapa foi construído com um tipo de abordagem "pictórica". Isso pode envolver a colocação aleatória de círculos com zero alfa (que diminuem para 1,0 alfa nas bordas). Comece a colocar esses círculos fortemente inclinados em torno da origem da revelação e, com o tempo, relaxe o viés para que eles se espalhem para fora. Ao fazer isso, você provavelmente também desejará expandir o raio dos círculos.

Você pode ajustar essa abordagem conforme necessário para adaptar o efeito aos seus desejos; círculos simples podem acabar parecendo um pouco "manchados", por exemplo, e você pode, em vez disso, querer carimbar aleatoriamente uma "pincelada" pré-autorizada selecionada aleatoriamente na máscara. Mesmo o posicionamento aleatório em si pode parecer um pouco desordenado, e você pode optar por carimbar a máscara alfa ao longo de uma curva ou spline pré-criada para destacar um estilo específico.


Opa, eu estava digitando uma resposta muito semelhante ao mesmo tempo que você estava, ao que parece. ^ _ ^; Desculpas pela sobreposição.
DMGregory

Obrigado pela resposta, vou tentar isso e voltar para você que funciona! Mais uma vez obrigado
Jessca Stone

Você também pode desenhar quatro ou cinco transições à mão e apenas aleatoriamente a rotação um pouco. Duvido que alguém se importe com esse cenário rápido e, na pior das hipóteses, você pode jogar com rotação e escala horizontal.
Fund Monica's Lawsuit

Desculpe incomodar novamente, mas eu queria saber se você pode elaborar mais isso, pois eu estava testando o meu próprio, mas era um pouco desajeitado e também não conseguia torná-lo transparente. Desculpe novamente pela perturbação e obrigado!
Jessca Stone #

De improviso, parece que muitas coisas poderiam estar erradas por lá; Eu realmente não posso ajudá-lo a depurá-lo aqui, mas é possível que alguém no Chat de Desenvolvimento de Jogos consiga, e às vezes você pode me encontrar lá também.

7

Eu abordaria isso usando um sombreador personalizado nos meus SpriteRenderers que usa duas texturas, uma para cada versão que você deseja fazer a transição.

(Mesmo usando esse efeito para fazer a transição entre mais de dois estados, eu ainda tentaria estruturar o jogo, de modo que precisamos apenas de dois para renderizar ao mesmo tempo: o antigo e o próximo. Vamos deixar essa transição funcionar até a conclusão antes de deixarmos o jogador iniciar uma transição para um terceiro estado; nesse momento, podemos substituir nosso estado "antigo" anterior, pois ele não está mais visível)

Esse sombreador se desvaneceria entre as duas texturas, usando uma terceira textura de canal único como máscara para o efeito (por exemplo: preto = estado 100% antigo, cinza = mistura 50/50, branco = estado 100% novo). Eu mapeia essa textura de máscara no espaço da tela.

Então eu montaria uma segunda câmera para renderizar em uma RenderTexture, para gerar essa máscara. Essa segunda câmera se moveria com a minha câmera principal e corresponderia ao seu tamanho FoV / ortográfico, portanto, qualquer animação na minha opinião se aplica ao mundo e revela a máscara de forma consistente. Esta câmera renderiza antes da minha câmera principal e é configurada para ver apenas o conteúdo de uma camada "revelar" especialmente designada. No exemplo de vídeo, parece que eles usam um sistema de partículas para espalhar uma coleção de pequenas formas de nuvens nessa textura reveladora, que se expandem ao longo do tempo, dando à transição uma vantagem de aparência orgânica.


Obrigado pela resposta, vou tentar isso e voltar para você que funciona! Agradeço novamente!
Jessca Stone 27/02
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.