Cambio de Temporada Revelar Efecto

10

Estaba viendo el avance de Seasons After Fall y me llamó la atención el efecto que usan para la transición entre temporadas (alrededor de 21-24 segundos):

Animación que muestra el efecto revelar

El arte de nivel, que incluye el fondo y las plataformas en primer plano, cambia de un otoño de color sepia a un invierno de lavanda, con el efecto que se extiende hacia afuera del personaje del jugador un poco como el agua empapada en papel.

Parece más que un simple cambio de paleta, ya que los detalles en los patrones de hojas y cortezas cambian en la transición.

¿Cómo podría lograr un efecto similar a esto en un juego 2D Unity?

Jessca Stone
fuente

Respuestas:

12

Una forma de lograr esto sería combinar los dos fondos usando un mapa alfa. Un enfoque simple sería representar el fondo "posterior" (oculto) y luego el fondo "frontal" (inicialmente visible). Use el canal alfa del fondo frontal, o una textura alfa separada, para controlar la transparencia del fondo frontal como lo haría con cualquier sprite transparente o translúcido. Cuando este mapa alfa es menor que uno, se mostrarán partes del fondo posterior.

Entonces es solo cuestión de construir ese mapa alfa de acuerdo con el efecto que deseas. En el video que muestra, parece que dicho mapa fue construido con un enfoque "pictórico". Esto podría implicar colocar al azar círculos de cero alfa (que se desvanecen a 1.0 alfa alrededor de sus bordes). Comience a colocar estos círculos fuertemente sesgados alrededor del origen de la revelación, y con el tiempo relaje el sesgo para que se extiendan hacia afuera. Al hacer esto, es probable que también desee expandir el radio de los círculos.

Puede ajustar este enfoque según lo necesite para adaptar el efecto a sus deseos; los círculos simples pueden terminar pareciendo un poco "manchados", por ejemplo, y es posible que desee estampar al azar un "trazo de pincel" previamente seleccionado al azar en la máscara. Incluso la ubicación aleatoria en sí misma puede parecer un poco desordenada, y en su lugar puede optar por estampar la máscara alfa a lo largo de alguna curva o spline previamente creada para resaltar un estilo particular.


fuente
Vaya, parece que estaba escribiendo una respuesta muy similar al mismo tiempo que tú. ^ _ ^; Disculpas por la superposición.
DMGregory
Gracias por la respuesta, lo intentaré y te responderé si funciona. Gracias una vez más
Jessca Stone
También puede dibujar a mano cuatro o cinco transiciones y simplemente aleatorizar un poco la rotación. Dudo que a alguien le importe cuando es tan rápido, y en el peor de los casos, puedes jugar con rotación y escala horizontal.
Financia la demanda de Mónica el
Lo siento, molestar de nuevo, pero me preguntaba si puedes dar más detalles sobre eso, ya que estaba probando el mío pero era un poco torpe y tampoco podía hacerlo transparente. Lo siento de nuevo por la molestia y gracias!
Jessca Stone
De improviso, parece que muchas cosas podrían estar mal allí; Realmente no puedo ayudarte a depurarlo aquí, pero es posible que alguien en el Chat de Desarrollo del Juego pueda, y a veces también puedes encontrarme allí.
7

Me acercaría a esto usando un sombreador personalizado en mis SpriteRenderers que toma dos texturas, una para cada versión entre la que desea hacer la transición.

(Incluso si utilizo este efecto para hacer la transición entre más de dos estados, aún trataría de estructurar el juego para que solo necesitemos dos para renderizar en cualquier momento: el estado anterior y el siguiente. Dejaremos que esa transición juegue hasta su finalización antes de dejar que el jugador inicie una transición a un tercer estado, momento en el cual podemos reemplazar nuestro estado "antiguo" anterior ya que ya no es visible)

Este sombreador se desvanecería entre las dos texturas, utilizando una tercera textura de un solo canal como máscara para el efecto (por ejemplo, negro = 100% de estado anterior, gris = 50/50 de mezcla, blanco = 100% nuevo estado). Mapearía esta textura de máscara en el espacio de pantalla.

Luego, configuré una segunda cámara para renderizar a RenderTexture, para generar esta máscara. Esta segunda cámara se movería con mi cámara principal y coincidiría con su tamaño FoV / ortográfico, por lo que cualquier animación en mi opinión se aplica tanto al mundo como a la máscara reveladora de manera consistente. Esta cámara se renderizaría antes que mi cámara principal y se configuraría para ver solo contenido en una capa de "revelado" especialmente designada. En el ejemplo de video, parece que usan un sistema de partículas para esparcir una colección de pequeñas formas de nubes en esta textura reveladora, que se expande con el tiempo, dando a la transición un borde de expansión de aspecto orgánico.

DMGregory
fuente
Gracias por la respuesta, lo intentaré y te responderé si funciona. ¡Gracias otra vez!
Jessca Stone