Puedes crear efectos visuales 2D en Unity con varios métodos diferentes. Para hacer un efecto de fuego, por ejemplo, puedes animar las llamas fotograma a fotograma, animar un sprite con un shader hecho en Shader Graph, o generar partículas ardientes. Para este último método, puedes elegir el sistema de partículas incorporado, que se ejecuta en la CPU, o utilizar el gráfico VFX y la potencia de la GPU para generar millones de partículas. Ambos sistemas pueden utilizarse en el mismo proyecto, por lo que puede elegir el que mejor se adapte a un efecto concreto.

Este artículo se centra en VFX Graph, que puede utilizarse en juegos 2D a partir de Unity 2022 LTS.

Hay algunos puntos clave a considerar antes de crear efectos especiales en un proyecto Unity 2D:

• Cámaras Si utilizas una cámara en perspectiva, los efectos se producen en un espacio tridimensional, como en los juegos 3D. Si utiliza una cámara ortográfica, deberá configurar el renderizador del sistema para que utilice la capa de clasificación correcta. Más información sobre la perspectiva de la cámara aquí.
• Posprocesamiento Puedes aplicar efectos de postprocesado a tu proyecto 2D si eliges el Universal Render Pipeline (URP), por ejemplo, añadir un efecto bloom a un efecto de partículas a través del marco URP Volume.
• Los efectos pueden conseguirse de distintas maneras. Por ejemplo, un GameObject representando un efecto puede tener varios GameObjects hijos usando diferentes sistemas, como sprites con shaders personalizados o varios sistemas de partículas.
• Clips de animación: Los clips de animación pueden ayudarle a orquestar suaves efectos de animación basados en sprites. Incluso puede utilizar el sistema de animación esquelética de Unity (con moderación) para controlar partes de un sprite en una animación de sprite.
• Tienda de recursos de Unity Empieza a añadir efectos visuales a tu proyecto dirigiéndote a la Unity Asset Store, donde encontrarás muchos efectos 2D listos para usar.

Visual Effect Graph Assets son compatibles con el 2D Renderer usando Shader Graph en Unity 2022 LTS. Para crear un nuevo gráfico VFX en su proyecto, siga los pasos indicados en la documentación.

Los Contextos de Salida de un Gráfico VFX definen cómo se renderizará el efecto. Los Contextos de Salida para mallas como Salida de Partículas Quad ofrecen la opción de añadir un Shader Graph. No importa si empiezas con una salida iluminada o sin iluminar ya que el modelo de iluminación se cambiará para adaptarse al Shader Graph. Puede utilizar los sombreadores predeterminados que se enumeran a continuación o su propio sombreador basado en Shader Graph.

Para proyectos 2D en URP puedes utilizar uno de estos tres Shader Graphs basados en sprites:

• Lit: Para recibir la luz del sistema de iluminación 2D
• Sin luz: No se ve afectado por el sistema de iluminación 2D
• A medida: Para implementar un modelo de iluminación 2D personalizado

Recuerda marcar la opción Support VFX Graph en el objetivo SRP dentro de Shader Graph.

Las propiedades expuestas en el gráfico de sombreado se muestran en el gráfico VFX. Puede anularlos si es necesario, por ejemplo, si desea que un sistema de partículas VFX Graph controle el cambio de color del sombreador a lo largo del tiempo.

La lluvia es un efecto basado en partículas muy común en los juegos. Estos son los principales pasos utilizados para crear la lluvia en Happy Harvest con VFX Graph y la GPU, que permiten el movimiento de muchas partículas individuales:

Las partículas de lluvia (denominadas Lluvia Efecto Visual en la Jerarquía) se renderizan en la Capa de Clasificación, por encima del suelo pero detrás de los objetos. El motivo es que los efectos de salpicadura de agua aparecen cuando las partículas de la gota tocan el suelo para simular cómo reacciona la lluvia real. Si las gotas de lluvia son visibles en una superficie vertical como un poste de luz, podría parecer incorrecto. En el mundo real, la luz afecta a todo su entorno, incluidas las gotas de lluvia. En Happy Harvest, el VFX Graph para la lluvia usa un Sprite Lit-based Shader Graph en el Output Context para iluminar las partículas de lluvia. Sin una coincidencia Lit Shader Graph para la lluvia, su tono no puede cambiar para reflejar la luz cambiante a lo largo del día. Salpicaduras fotograma a fotograma: Cuando la partícula rain muere, un bloque Trigger On Die dispara un evento GPU que genera una única partícula flipbook que reproduce una sencilla animación splash. Happy Harvest utiliza el Flipbook Shader Graph UV Block para mostrar los diferentes marcos dentro de la textura. También puede utilizar el bloque Flipbook Player dentro de VFX Graph para conseguir el mismo efecto.

Aparecen partículas de lluvia en primer plano (denominadas Efecto Visual Lluvia Primer Plano en la Jerarquía). Como simulan estar cerca del objetivo de la cámara, no generan salpicaduras de agua al caer al suelo.

Una variación del efecto anterior se utiliza con el efecto de trueno intermitente(Efecto visual Lluvia Trueno en primer plano). Se añade un efecto de sonido para el trueno con un componente VFX Output Event Play Audio. Este componente viene con los scripts de ejemplo de los Manejadores de Eventos de Salida; el Contexto del Evento de Salida lo activa en el gráfico. Un trueno: Una forma sencilla pero eficaz de crear este efecto era generar una única partícula basada en VFX Graph inicializada en el centro de la posición de la cámara y lo suficientemente grande como para llenar la pantalla. El bloque Color a lo largo del tiempo de vida del nodo de salida cambia el color de la partícula evaluando un gradiente a lo largo del tiempo. En ese gradiente, los cambios de transparencia simulan el parpadeo y el desvanecimiento del destello del trueno.

La lluvia afecta a toda la escena en Happy Harvest, pero como sólo una parte es visible a través de la cámara, muchas de las partículas calculadas son innecesarias. Puedes activar la opción Frustum Culling en el Inspector para evitar renderizar esas partículas, o utilizar el mosaico de cámara, un truco empleado en la demo.

El laboreo de la cámara permite crear y renderizar partículas en una caja que coincide con la vista de la escena, dando la impresión de que se mosaico como si las partículas se simulan en todas partes en la escena. No se crean partículas fuera de la cámara, lo que permite reducir la cantidad de partículas generadas y la capacidad de asignación del efecto sin ajustes adicionales.

Para utilizar el mosaico de la cámara en Happy Harvest, el spawn de lluvia se ajusta para que coincida con las dimensiones de la cámara utilizando una forma de posición Set: AABox. El formato de la cámara (introduzca el tamaño manualmente, utilice la MainCamera directamente o utilice la ranura aspectRatio) se escala mediante un multiplicador de tamaño para que coincida con la configuración de la cámara en la escena. La AABox es ligeramente mayor que el tamaño real de la cámara para evitar el efecto popping causado por el culling. El modo Shape Spawn está ajustado a Surface porque no hay necesidad de spawn en todo el volumen en un proyecto 2D (porque el eje Z no se utiliza).

Una vez completada esta configuración se necesita un Bloque de Posiciones Tile/Warp en la salida del sistema. Esto está vinculado a la cámara Transformar para que coincida con su posición y las dimensiones de la cámara, como usted también querría hacer en el Contexto Inicializar del sistema.

Esta técnica también se aplica a los efectos de lluvia en 3D, con la excepción de que el modo Shape Spawn debe establecerse en Volume y con un valor distinto de cero para el eje Z si se desea un aspecto de profundidad.

Otro efecto habitual en los juegos es el fuego. En Happy Harvest, hay una acogedora hoguera en el patio y en la chimenea de la casa del granjero. El efecto de fuego consta de tres conjuntos de partículas: Llamas, chispas y humo, todos generados a partir del mismo gráfico llamado VFX_Fire.

Animar la llama

La suave animación de la llama se produce a nivel de shader en Shader Graph y muestra lo que se puede conseguir utilizando la potencia de la GPU y los shaders.

Si abres el ShaderGraph_Firefileen el proyecto, verás que se utiliza un único sprite(Mask texture2D) para crear una máscara que da a la llama una forma ovalada. La animación y el sprite se crean mediante un patrón "Voronoi" de desplazamiento con ruido y un color de tinte para la llama y el fondo. La máscara alfa utiliza la misma forma de llama pero con un Operador Saturar que produce un contorno más visible.

Los efectos de chispas y humo, que añaden detalles pulidos al fuego, utilizan el gráfico estándar Lit Shader Graph. Una combinación de alteraciones en los bloques Velocidad, Escala y Posición inicial, crea un efecto animado con sólo un sprite requerido. El gráfico de los efectos de chispas y humo incluye notas que te ayudarán a recrear los efectos en tu propio proyecto.

El agua utiliza efectos cáusticos de dibujos animados u ondas con transparencias para que coincida con el estilo artístico general de la demo. El sombreador de agua está optimizado para trabajar con tilemaps, que constituyen la mayor parte del entorno de la demo.

El material 2D Lit por defecto, llamado Water, se encuentra en el Tilemap Renderer del tilemap. Se ha cambiado por un material personalizado con el sombreador de agua. Todos los azulejos dentro de un tilemap se renderizan utilizando el mismo material, por lo que este tilemap sólo se utiliza para los azulejos de agua.

En el gráfico ShaderGraph_Water los efectos de agua también se generan a partir de un patrón de ruido Voronoi invertido estirado para simular las cáusticas (un método común en las cáusticas de agua). El movimiento oscilante es producto de una sobreimpresión UV de mosaico y desplazamiento a la que se aplica un efecto de ruido.

Efecto de refracción

El efecto de refracción se mezcla en la textura de la superficie con el nodo Lerp. La refracción utiliza la textura de la capa de ordenación de la cámara, que es una instantánea de la renderización de la cámara hasta la capa de ordenación definida, lo que significa que todos los elementos de las capas de ordenación anteriores aparecerán en esa textura. En Happy Harvest, el renderizado se produce hasta la capa de clasificación Objetos, que es la que se utiliza para elementos como el personaje. La UV de la textura de la Capa de Ordenación de la Cámara se distorsiona con un mapa normal generado con el nodo Normal y Altura, que utiliza la misma textura Voronoi que la de la textura de la superficie.

Mira este tutorial usando la demo de Lost Crypt 2D para obtener un tutorial paso a paso sobre otros efectos de agua en 2D.

Los efectos comentados hasta ahora no interactúan con la jugabilidad de Happy Harvest; forman parte del entorno y se reproducen independientemente de lo que ocurra en la demo. Sin embargo, en la mayoría de los juegos, tendrás que activar algunos de los efectos para que se reproduzcan en función de cuándo se produzca una acción en el entorno y/o con el personaje. Veamos algunos efectos activados en Happy Harvest.

Efectos al utilizar elementos

Algunos efectos van unidos a las herramientas del personaje, como el bidón de agua. El prefab para el bidón de agua, Prefab_Tool_WaterCan, tiene tres clips de animación que cambian el sprite en función de la dirección en la que mira el personaje (arriba, abajo, a los lados). En esas animaciones, hay un evento de animación que llama a una función dentro de un componente Tool Animation Event Handler.

Este script activa o desactiva las instancias correspondientes de Gráficos VFX para cada posición a la que se hace referencia desde el Inspector.

Efectos al iterar con baldosas

Algunos efectos ocurren en las baldosas, como cavar y cosechar. Esto garantiza que no causen problemas con las animaciones del personaje o el cambio de posición. Cuando llega el momento de labrar una celda, el efecto de labrado actúa sobre ella, y cuando llega el momento de cosechar, la celda recurre al efecto de cosecha.

Cuando el efecto de laboreo se activa, hace referencia al efecto TillingPuff_prefab del componente TerrainManager adjunto al GameObject Grid. Se desplaza al centro de la baldosa y luego juega. Otros efectos como la cosecha de cultivos llaman al VFX Graph que es referenciado desde el Data/Crops ScriptableObject. En la inicialización del script TerrainManager, se crea un diccionario VFX pool (la variable en el script m_HarvestEffectPool) que instanciará varios prefabs VFX para reproducirlos cuando sea necesario.

Los pequeños efectos de Happy Harvest pulen la demo y la hacen más agradable de explorar. Algunas de ellas son:

• VFX_DustParticles: Para esparcir el polvo ambiental en el entorno
• VFX/Agua:Para sutiles ondas y salpicaduras de agua
• VFX_Leaves: Provoca la caída de hojas de los arbustos cuando el jugador pasa cerca de ellos
• Personaje Activa un efecto de nube de humo adherida al personaje; se realiza con el sistema de partículas incorporado
• P_VFX_Moths: Activa las polillas que vuelan cerca de los focos; esto también se hace con el sistema de partículas incorporado

Cada uno de los efectos basados en VFX Graph de la lista anterior incluye notas que explican la finalidad de cada nodo.

Creada por un desarrollador experimentado de Unity, con aportaciones de ingenieros y artistas técnicos de Unity, esta es nuestra mayor guía para el desarrollo de efectos visuales. El libro electrónico proporciona una visión completa de cómo utilizar las herramientas de creación de efectos visuales en Unity para crear cualquier tipo de efecto: agua y líquido, humo, fuego, explosiones, clima, impacto, magia, electricidad - el único límite es su imaginación.

También puedes ver estos dos videotutoriales sobre cómo hacer efectos especiales con VFX Graph:

• Cómo utilizar las calcomanías en VFX Graph
• Cómo crear un efecto portal con el Gráfico VFX