¿Qué estás buscando?
Hero background image
Introducción al gráfico VFX en Unity

Visual Effect Graph (VFX Graph) permite la creación de efectos simples y complejos utilizando lógica visual basada en nodos. Como uno de los principales conjuntos de herramientas disponibles en Unity, VFX Graph permite a los artistas y diseñadores crear con poca o ninguna codificación.

Los efectos visuales son clave para crear experiencias profundamente inmersivas para tus jugadores. Y gracias a los continuos avances en el hardware, lo que solía estar disponible sólo para los éxitos de taquilla de Hollywood ahora se puede lograr en tiempo real.

Este artículo es un extracto de nuestro libro electrónico de 120 páginas, La guía definitiva para crear efectos visuales avanzados en Unity, que guía a los artistas, artistas técnicos y programadores que utilizan la versión Unity 2021 LTS de VFX Graph. Aprovéchelo como referencia para producir efectos visuales en tiempo real con muchas capas para sus juegos.

ESCENA DE MUESTRA DE VFX DE LA LÁMPARA MÁGICA
ESCENA DE MUESTRA DE VFX DE LA LÁMPARA MÁGICA
Comenzando con VFX en tiempo real en Unity

Para efectos visuales complejos de nivel AAA en plataformas de alta gama, utilice VFX Graph para crear partículas aceleradas por GPU en una interfaz intuitiva basada en nodos.

Más específicamente, aproveche VFX Graph para:

Cree uno o varios sistemas de partículas.

Agregue mallas estáticas y controle las propiedades del sombreador

Cree eventos a través de C# oTimelinepara activar y desactivar partes de sus efectos

Amplíe la biblioteca de funciones creando subgrafos de combinaciones de nodos de uso común.

Utilice un gráfico VFX dentro de otro gráfico VFX (por ejemplo, explosiones más pequeñas como parte de otro efecto más grande)

Obtenga una vista previa de los cambios a distintos ritmos y/o realice una simulación paso a paso

El gráfico VFX funciona con el canal de renderizado universal (URP)* y el canal de renderizado de alta definición (HDRP). También agrega soporte para las salidas iluminadas y el renderizador 2D disponible con URP. Consulte la comparación de funciones de VFX Graph para todos los canales de renderizado aquí.

VFX Graph requiere compatibilidad con sombreadores informáticos para mantener la compatibilidad con su dispositivo. Los dispositivos compatibles incluyen:

Plataformas macOS e iOS que utilizan la APIde gráficos Metal

Plataformas Linux y Windows con APIVulkanoGLES3

Android para un subconjunto de dispositivos con capacidad informática de alta gama (solo con URP)

Paquetes de gráficos principales

A partir de Unity 2021 LTS, puedes instalar VFX Graph de manera eficiente en tu proyecto. Los paquetes de gráficos principales ahora están integrados en el instalador principal de Unity para garantizar que su proyecto siempre se ejecute con el código de gráficos más reciente y verificado.

Cuando instala la última versión de Unity, los paquetes más recientes para URP, HDRP, Shader Graph, VFX Graph y más se incluyen en la instalación.

Para obtener más información, consulte Introducción a VFX Graph o lea esta publicación de blog.

* Para Unity 2021 LTS en adelante, el acceso al Camera Buffer solo está disponible con HDRP. Lea más sobre la compatibilidad de VFX Graph en eldocumentación.

EL COMPONENTE DE EFECTOS VISUAL Y ACTIVOS DEL GRÁFICO VFX
EL COMPONENTE DE EFECTOS VISUAL Y ACTIVOS DEL GRÁFICO VFX
El activo y componente del gráfico VFX

Cualquier efecto visual en VFX Graph se compone de estas dos partes:

Componente de efecto visual (VFX)adjunto a un GameObject en la escena

Activo gráfico de efectos visuales (VFX)que reside en el nivel del proyecto

Como Unity almacena cada gráfico VFX en la carpeta Activos, debes conectar cada recurso a un componente de efecto visual en tu escena. Tenga en cuenta que diferentes GameObjects pueden hacer referencia al mismo gráfico en tiempo de ejecución.

Para crear un nuevo efecto visual, haga clic derecho en la ventana Proyecto y navegue hasta Crear > Efectos visuales > Gráfico de efectos visuales. Esto da como resultado el activo de gráfico VFX.

Unity proporciona algunas formas de conectar el activo de gráfico VFX a un GameObject con un componente de efecto visual:

Arrastre el recurso resultante a la vistaEscenaoJerarquía. Aparecerá un nuevo GameObject predeterminado en la ventana Jerarquía.

Asigne el recurso a uncomponente de efecto visualexistente en elinspector. Cree unGameObjectpor separado y use el menúAgregar componente.

Con unGameObjectseleccionado, arrastre y suelte el activo en la ventanadel Inspector. Esto crea el componente Efecto visual y asigna el activo en una acción rápida.

El activo VFX Graph contiene toda la lógica. Seleccione una de las siguientes formas de editar su comportamiento:

- Haga doble clic en elrecurso de gráfico VFXen la ventanadel proyecto.

- Seleccione elrecurso de gráfico VFXen la ventanadel proyectoy haga clic en el botónAbriren el encabezado.

- Haga clic en el botónEditarjunto a la propiedadPlantilla de recursosen elcomponente Efecto visual.

El activo se abre en la ventana Gráfico VFX, disponible en Ventana > Efectos visuales > Gráfico de efectos visuales.

LA VENTANA DEL GRÁFICO VFX
LA VENTANA DEL GRÁFICO VFX
Ventana de VFX Graph

Familiarícese con el diseño de esta ventana, incluido su:

Barra de herramientas: Para acceder a la configuración global, así como a alternar para varios paneles

Espacio de trabajo del nodo: Para componer y editar el gráfico VFX

Pizarra: Para gestionar propiedades y variables globales que son reutilizables en todo el gráfico.

Panel de control de efectos visuales: Para modificar la reproducción en el GameObject adjunto

Asegúrate de dejar algo de espacio en el diseño del Editor para el Inspector. Seleccionar parte del gráfico puede exponer ciertos parámetros, como opciones de partición y estados de representación.

UN GRÁFICO VFX PUEDE CONSISTIR EN UNA RED COMPLEJA.
UN GRÁFICO VFX PUEDE CONSISTIR EN UNA RED COMPLEJA.
Lógica gráfica

Descargue el ejemplo completo.

Debes construir tu efecto visual a partir de una red de nodos dentro del espacio de trabajo de la ventana. VFX Graph utiliza una interfaz similar a otras herramientas basadas en nodos, como Shader Graph.

Presione la barra espaciadora o haga clic derecho para crear un nuevo elemento gráfico. Con el mouse sobre el espacio de trabajo vacío, seleccione Crear nodo para crear el Contexto, Operadoro Propiedadde un gráfico. Si pasa el mouse sobre un contexto existente, use Crear bloque.

Abrir un gráfico VFX complejo puede resultar abrumador al principio. Afortunadamente, aunque un gráfico a nivel de producción puede incluir cientos de nodos, cada gráfico sigue el mismo conjunto de reglas, sin importar su tamaño.

Examinemos cada parte del gráfico VFX para aprender cómo funcionan juntas.

Sistemas

Un gráfico VFX incluye una o más pilas verticales llamadas Sistemas. Los sistemas definen partes independientes del gráfico y abarcan varios contextos. Un Sistema se indica mediante la línea de puntos que enmarca los Contextos que lo componen.

Cada Contexto se compone de Bloquesindividuales, que pueden establecer Atributos (tamaño, color, velocidad, etc.) para sus partículas y mallas. Varios sistemas pueden trabajar juntos dentro de un gráfico para crear el efecto visual final.

Encuentre plantillas prediseñadas en el menú Crear nodo > Sistemas para ver algunos ejemplos de lógica de gráficos.

UN SISTEMA DE PARTÍCULAS VACÍAS
UN SISTEMA DE PARTÍCULAS VACÍAS
Contextos

En la imagen de arriba, notará los cuatro contextos presentes en el gráfico del sistema de partículas vacío.

El flujo entre los contextos determina cómo se generan y simulan las partículas. Cada contexto define una etapa de cálculo:

Aparecer: Determina cuántas partículas debes crear y cuándo generarlas (por ejemplo, en una ráfaga, en bucle, con un retraso, etc.)

Inicializar: Determina los atributos iniciales de las partículas, así como la capacidad (recuento máximo de partículas) y los límites (volumen donde se representa el efecto).

Actualizar: Cambia las propiedades de las partículas en cada cuadro; Aquí puede aplicar fuerzas, agregar animaciones, crear colisiones o configurar alguna interacción, como con campos de distancia firmados (SDF).

Producción: Renderiza las partículas y determina su aspecto final (color, textura, orientación); Cada sistema puede tener múltiples salidas para una máxima flexibilidad.

Los sistemas y contextos forman la columna vertebral de la “lógica vertical” o flujo de trabajo de procesamientodel gráfico. Los datos en un sistema fluyen hacia abajo, de arriba a abajo, y cada contexto encontrado en el camino modifica los datos de acuerdo con la simulación.

Los sistemas son flexibles, por lo que puede omitir un contexto según sea necesario o vincular varias salidas.

Los propios contextos se comportan de manera diferente dependiendo de sus bloques individuales, que calculan datos de manera similar de arriba a abajo. Puedes agregar y manipular más bloques para procesar esos datos.

Haga clic en el botón en la esquina superior derecha de un Contexto para alternar el espacio de simulación del Sistema entre Local y Mundial.

Consulte la Biblioteca de nodos para obtener una lista completa de contextos y bloques.

EJEMPLOS DE DIFERENTES BLOQUES
EJEMPLOS DE DIFERENTES BLOQUES
Bloques

Los bloques pueden hacer casi cualquier cosa, desde el simple almacenamiento de valores para Colorhasta operaciones complejas como Ruidos, Fuerzasy Colisiones. A menudo tienen ranuras a la izquierda, donde pueden recibir información de Operadores y Propiedades.

HORIZONTAL LOGIC
HORIZONTAL LOGIC
Propiedades y operadores

Así como los sistemas forman gran parte de la lógica vertical del gráfico, los operadores constituyen la “lógica horizontal” de su flujo de trabajo de propiedades. Pueden ayudarle a pasar expresiones o valores personalizados a sus bloques.

Los operadores fluyen de izquierda a derecha, similar a los nodos de Shader Graph. Puede usarlos para manejar valores o realizar una variedad de cálculos.

Utilice el menú Crear nodo (haga clic derecho o presione la barra espaciadora) para crear nodos de operador.

Las propiedades son campos editables que se conectan a elementos del gráfico mediante el flujo de trabajo de propiedades. Las propiedades pueden ser:

Cualquiertipo, incluidosnúmeros enteros, flotantes y booleanos

Hecho a partir de componentescompuestos, comovectores y colores.

Transmitir y convertir(por ejemplo, un número entero a un flotante)

Espacio local o mundial; haga clic enLoWpara cambiar entre ellos

Las propiedades cambian de valor según su valor real en el gráfico. Puede conectar los puertos de entrada (a la izquierda de la Propiedad) a otros nodos Graph.

Los nodos de propiedad son operadores que le permiten reutilizar el mismo valor en varios puntos del gráfico. Tienen propiedades globales correspondientes que aparecen en Blackboard.

La pizarra

Un panel de utilidad llamado Blackboard administra las propiedades globales, que pueden aparecer varias veces en el gráfico como nodos de propiedades.

Las propiedades en Blackboard son:

Expuesto: El punto verde a la izquierda de cualquier propiedad expuesta indica que puede verla y editarla fuera del gráfico. Acceda a una propiedad expuesta en el inspector mediante un script utilizando laclase Propiedad expuesta.

Constante: Una propiedad de Blackboard sin un punto verde es una constante. Es reutilizable dentro del gráfico pero no aparece en el Inspector.

Las nuevas propiedades están expuestas de forma predeterminada y, como tales, aparecen en el inspector. Debe desmarcar la opción Expuesto si desea ocultar su propiedad fuera del gráfico y crear Categorías para mantener sus propiedades organizadas.

TRABAJA CON NODOS DE GRUPO Y AÑADE NOTAS ADHESIVAS.
TRABAJA CON NODOS DE GRUPO Y AÑADE NOTAS ADHESIVAS.
Nodos de grupo y notas adhesivas

A medida que crece la lógica de su gráfico, utilice nodos de grupo y notas adhesivas para reducir el desorden. Con Group Nodes, puede etiquetar un grupo de nodos y moverlos como uno solo. Por otro lado, las Sticky Notes funcionan como comentarios de código.

Para crear nodos de grupo, seleccione un grupo de nodos, haga clic derecho sobre ellos y luego elija Selección de grupo en el menú contextual . También puede arrastrar y soltar un nodo en un nodo de grupo existente manteniendo presionada la tecla Mayús para arrastrarlo hacia afuera. Al eliminar un nodo de grupo, ya sea con la tecla Eliminar o desde el menú contextual, no elimina los nodos incluidos.

Mientras tanto, puedes usar notas adhesivas para describir cómo funciona una sección del gráfico y dejar comentarios para ti o tus compañeros de equipo. Agregue tantas notas adhesivas como necesite y muévalas o cambie su tamaño libremente.

Subgrafos

Un subgrafo aparece como un solo nodo, lo que puede ayudar a ordenar la lógica de su gráfico. Úselo para guardar parte de su VFX Graph como un activo separado que puede colocar en otro VFX Graph para reorganizarlo y reutilizarlo.

Para crear un subgrafo, seleccione un conjunto de nodos y luego seleccione Convertir a operador de subgrafo en el menú derecho del mouse. Guarde el activo en el disco y convierta los nodos en un único nodo de subgrafo. Puede empaquetar sistemas, bloques y operadores en diferentes tipos de subgrafos.

Crear un subgrafo es análogo a refactorizar código. Así como organizarías la lógica en métodos o funciones reutilizables, un Subgraph hace que los elementos de tu VFX Graph sean más modulares.

CAPAS DE EDICIÓN CON EL GRÁFICO VFX
CAPAS DE EDICIÓN CON EL GRÁFICO VFX
Niveles de edición en VFX Graph

VFX Graph admite tres niveles diferentes de edición:

Configuración de instancia de activo: Úselo para modificar cualquier gráfico VFX existente. Tanto los diseñadores como los programadores pueden ajustar los parámetros expuestos en el Inspector para modificar la apariencia, el tiempo o la configuración de un efecto. Los artistas también pueden utilizar secuencias de comandos o eventos externos para cambiar el contenido creado previamente. En este nivel, estás tratando cada gráfico como un cuadro negro.

Creación de activos VFX: Aquí es donde tu creatividad realmente puede tomar el control. Cree una red de nodos de operador para comenzar a crear su propio gráfico VFX y configure comportamientos y parámetros personalizados para crear simulaciones personalizadas. Ya sea que estés copiando muestras existentes o comenzando desde cero, puedes tomar posesión de un efecto específico.

secuencias de comandos VFX: Esto admite artistas técnicos o programadores de gráficos más experimentados que utilizan laAPI del componentepara personalizar el comportamiento de VFX Graph. Con las secuencias de comandos VFX, su equipo puede disfrutar de un canal más eficiente para administrar efectos específicos y acceder a funciones avanzadas como Graphics Buffers.

OBTENER EL ATRIBUTO CON UN OPERADOR Y ESTABLECER EL ATRIBUTO CON UN BLOQUE.
OBTENER EL ATRIBUTO CON UN OPERADOR Y ESTABLECER EL ATRIBUTO CON UN BLOQUE.
Atributos

Un Atributo es un dato que puede usar dentro de un Sistema, como el color de una partícula, su posición o cuántos de ellos debe generar.

Utilice nodos para leer o escribir atributos. En particular, utilice:

Obtenga el operador de atributospara leer los atributos en el sistemaParticleoParticleStrip

Devoluciones de llamadas de Spawnerexperimentalespara leer atributos ensistemas Spawn

Configure el bloque de atributospara escribir valores en un atributo; establezca el valor del atributo directamente o utilice un modo aleatorio (por ejemplo, establezca unatributo de colorcon undegradado aleatoriooun bloque aleatorio por componente)

Consulte la documentación para obtener una lista completa de atributos.

Nota: Un Sistema sólo almacena Atributos cuando los necesita. Para ahorrar memoria, no almacena datos innecesarios. Si lee que VFX Graph no ha almacenado los datos de simulación de un Atributo, el Atributo pasa su valor constante predeterminado.

EVENTOS CONTROLAN LA DESOVENCIA DE PARTÍCULAS.
EVENTOS CONTROLAN LA DESOVENCIA DE PARTÍCULAS.
Eventos

Las distintas partes de un gráfico VFX se comunican entre sí (y con el resto de la escena) a través de Eventos. Por ejemplo, cada contexto de generación contiene puertos de flujo de inicio y detención , que reciben eventos para controlar la generación de partículas.

Cuando es necesario que suceda algo, los GameObjects externos pueden notificar partes de su gráfico con el método SendEvent de la API de C#. Los componentes de efectos visuales luego pasarán el evento como un nombre de cadena o ID de propiedad.

Un contexto de evento identifica un evento por su nombre de cadena de evento o ID dentro de un gráfico. En el ejemplo anterior, los objetos externos en su escena pueden generar un evento OnPlay para iniciar un sistema Spawn o un evento OnStop para detenerlo.

UN EVENTO DE SALIDA PUEDE ENVIAR MENSAJES A LA ESCENA.
UN EVENTO DE SALIDA PUEDE ENVIAR MENSAJES A LA ESCENA.
Eventos de salida

Puede combinar un evento de salida con un controlador de eventos de salida. Los eventos de salida son útiles si la generación inicial de partículas necesita impulsar algo más en su escena. Esto es común para sincronizar la iluminación o el juego con tus efectos visuales.

El ejemplo anterior envía un OnReceivedEvent a un componente GameObject fuera del gráfico. El script C# reaccionará en consecuencia para intensificar una luz o llama, activar una chispa, etc. Consulte la sección Interactividad del libro electrónico VFX Graph para obtener más información sobre eventos de salida.

Al mismo tiempo, puede utilizar Eventos de GPU para generar partículas en función del comportamiento de otras partículas. De esta manera, cuando una partícula muere en un sistema, puedes notificar a otro sistema, lo que crea una útil reacción en cadena de efectos, como una partícula de proyectil que genera un efecto de polvo al morir.

Estos bloques de actualización pueden enviar datos de eventos de GPU de la siguiente manera:

Evento desencadenante al morir: Genera partículas en otro sistema cuando una partícula muere

Tasa de eventos de activación: Genera partículas por segundo (o según su velocidad)

Evento desencadenante siempre: Genera partículas en cada cuadro.

Las salidas de los bloques se conectan a un contexto de evento de GPU, que luego puede notificar un contexto de inicialización de un sistema dependiente. Encadenar diferentes sistemas de esta manera le ayuda a crear efectos de partículas complejos y ricos en detalles.

El contexto de inicialización del sistema de eventos de GPU también puede heredar los atributos disponibles en el sistema principal antes del evento de activación. Entonces, por ejemplo, al heredar su posición, una nueva partícula aparecerá en el mismo lugar que la partícula original que la generó.

LOS ATRIBUTOS DEL EVENTO DE SALIDA LLEVAN VALORES DEL CONTEXTO DE GENERACIÓN.
LOS ATRIBUTOS DEL EVENTO DE SALIDA LLEVAN VALORES DEL CONTEXTO DE GENERACIÓN.
Atributos del evento

Utilice cargas útiles de atributos de eventos para pasar datos como la posición 3D o el color junto con el evento. Estas Cargas Útiles llevan Atributos que implícitamente viajan a través del gráfico donde se pueden “captar” los datos en un Operador o Bloque.

También puede leer Atributos pasados ​​con Eventos de generación o Eventos de línea de tiempo. Elbloque Establecer atributo SpawnEventmodifica el atributo de evento en un contexto de generación.

Para capturar una carga útil en un contexto de inicialización, utilice los operadores Obtener atributos de origen o Heredarbloquesde atributos.

Sin embargo, es importante tener en cuenta estas advertencias al utilizar atributos de evento:

Los atributos de eventos regularessolo se pueden leer en el contexto de inicialización. No puede heredarlos en Actualización o Salida. Para usar el Atributo en un Contexto posterior, debe heredarlo y configurarlo en Inicializar.

Los atributos de eventos de salidasolo llevan los valores iniciales establecidos en el contexto de generación. No detectan ningún cambio que ocurra más adelante en el gráfico.

Consulte Envío de eventos en la API del componente Visual Effect para obtener más detalles.

Explorando el contenido de muestra de VFX

Un gráfico VFX es más que la suma de sus partes. Requiere una comprensión sólida de cómo aplicar nodos y operadores, junto con las formas en que pueden trabajar juntos.

Las adiciones de gráficos VFX en el Administrador de paquetes demuestran varios gráficos simples, lo que los convierte en un excelente punto de partida para aprender a administrar partículas.

Las siguientes secciones le presentan algunos de los bloques y operadores comunes que encontrará mientras explora los ejemplos proporcionados.

RUIDO Y OPERADORES ALEATORIOS
RUIDO Y OPERADORES ALEATORIOS
Ruido y Operadores

El ruido procesal ayuda a reducir el aspecto "máquina" de las imágenes renderizadas. El gráfico VFX proporciona varios operadores que puede utilizar para ruido y aleatoriedadde una, dos y tres dimensiones.

Bloques de atributos
NODOS DE FLIPBOOK
NODOS DE FLIPBOOK
Libros animados

Una textura animada puede hacer maravillas para que tus efectos sean creíbles. Generarlos desde una herramienta externa de creación de contenido digital (DCC) o desde Unity. Utilice operadores para administrar el bloque Flipbook.

Para obtener más información sobre cómo crear sus propios Flipbooks dentro de Unity, consulte Image Sequencer en la sección VFXToolbox del libro electrónico VFX Graph.

Física

Las fuerzas, las colisionesy la fricción son esenciales para hacer que las partículas simulen fenómenos naturales. Pero no tengas miedo de traspasar los límites de lo real. Como artista, puedes decidir qué se ve bien.

EL GRÁFICO DE MUESTRA DE BONFIRE UTILIZA TRES SUBGRAFOS.
EL GRÁFICO DE MUESTRA DE BONFIRE UTILIZA TRES SUBGRAFOS.
Subgrafos de efectos visuales

Un subgrafo de efectos visuales es un activo que contiene una parte de un gráfico de efectos visuales que se puede utilizar en otro gráfico o subgrafo de efectos visuales. Los subgrafos aparecen como un solo nodo.

Los subgrafos se pueden utilizar en gráficos de las siguientes tres maneras:

Subgrafo del sistema: Uno o variossistemascontenidos en un gráfico.

Subgrafo de bloque: Un conjunto debloquesyoperadoresempaquetados juntos y utilizados como un bloque.

Subgrafo del operador: Un conjunto deoperadoresempaquetados juntos y utilizados como operador.

Los subgrafos le permiten factorizar conjuntos de nodos de uso común a partir de gráficos en activos reutilizables para agregarlos a la biblioteca.

Libro electrónico de VFX

Consigue el libro electrónico gratuito

Nuestro libro electrónico de 120 páginas, La guía definitiva para crear efectos visuales avanzados en Unity, guía a los artistas, diseñadores y programadores que utilizan la versión Unity 2021 LTS de VFX Graph. Escrito por expertos, es una referencia que te ayudará a incorporar efectos visuales en tiempo real y con muchas capas para tus juegos.

¿Te gustó este contenido?