Skip to main content

Efecto de Parículas Usando Spritesheets

En este caso se aplica esta técnica para crear un efecto de confeti.

Configuración del Entorno VFX:​

  1. Método 1:

    • Ve al panel Hierarchy
    • Haz clic en el botón Add object +
    • Selecciona Visual Effects y luego Basic Particles

  2. Método 2:

    • Ve al panel Hierarchy
    • Haz clic derecho para abrir el menú
    • Selecciona Add object > Visual Effects > Basic Particles

📂 Importar Textura 2D:​

Necesitas un spritesheet con múltiples niveles de desenfoque.

📚 Básicos de Profundidad:​

Para lograr un efecto de profundidad se configura el editor VFX para que las partículas se vean borrosas al estar cerca de la cámara asignando un índice de textura basado en la posición Z de la partícula:

  • En Spawn logic, cambia el Mode a Periodic Burst, de modo que podamos generar una cantidad de partículas periódicamente usando un retraso.
  • En la lógica init, agrega Position: Box y Set Velocity.
    • Esto mantiene la ubicación de generación de la partícula dentro de un área con forma de caja.
    • Establecer la posición en (0, 20, 0) permite que las partículas se generen desde la parte superior de la pantalla.

  1. En el nodo Position: Box establece: posición en (0, 20, 0) y escala en (30, 0.1, 60).

    • Establecer la escala en (30, 0.1, 60) crea un cuadro rectangular invisible y alineado horizontalmente en el que se generarán las partículas.

  2. En el nodo Set Velocity establece la velocidad en (0.00, -10.00, 0.00).

    • Esto crea un movimiento de caída.
  1. Haz clic en la lógica Output y establece el Blend Mode a Normal.

🧩 Configurar el Índice de Textura Basado en la Posición Z de las Partículas:​

A continuación, se muestra un diagrama que muestra cómo se posicionan las partículas dentro del cuadro de generación en la escena.

Hay un Position Box con un tamaño de (30, 0.1, 60) donde se generan las partículas; la posición Z de este es 0, el límite del cuadro irá de -30 a 30 a lo largo del eje Z. Debemos ajustar el rango de distancia (-30 a 30) al rango del índice de textura (0 a 4) que es el número de desenfoque que tenemos. El objetivo es elegir valores más altos para que la imagen se vea más borrosa a medida que una partícula se acerca a la cámara.

  • Para esto agregamos los nodos Get Position, Split y Remap.
  • Usa el nodo Remap para convertir el rango de distancia (-30 a 30) al rango de índice de textura (0 a 4) en este caso.
  • Conecta los nodos Get Position, Split y Remap al nodo Set Texture Index.
  • En la lógica de salida:
    • Elimina el nodo Set Texture Index y agrega el nodo Flipbook Blend.
    • En el nodo Flipbook Blend selecciona la textura que se quiere aplicar a las partículas.
    • Agrega el nodo Set Flipbook Size y configúralo en x: número de columnas del spritesheet, y: número de filas del spritesheet.

🎆 Profundidad Avanzada:​

Cuando se tienen múltiples variaciones en las formas y niveles de desenfoque. El spritesheet de este ejemplo tiene 3 variaciones en la forma (y: 3) y 5 variaciones en el nivel de desenfoque (x: 5).

  • Agrega los nodos Const Vec3 y Random.

    • Conecta Random a Const Vec3 y Const Vec3 a Set Velocity.
    • Configura el nodo Random → Mín.: -20, Máx.: -10. Esto le dará a cada partícula una velocidad descendente en un rango entre -10 y -20.

  • En el nodo Position Box, establece la posición en (0, 40, 0) y la escala en (60, 0.1, 60).
    Esto ubicará el cuadro de generación sobre la ventana gráfica de la cámara con un área más amplia y a medida que las partículas caen, se moverán hacia la vista de la cámara.

  • Agrega los nodos Random, Floor, Const Vec4 y Set Custom Attribute.
    • Conecta Get Position a Split, Split a Remap, Remap a Floor y Floor al nodo Set Texture Index, como se muestra en la captura de pantalla.
  • En el nodo Random, establece Mín.: 0, Máx.: 2.99.
  • En la hoja de sprites hay tres variaciones de forma. Queremos almacenar uno de los tres números enteros [0, 1, 2] para cada partícula. Recuerda que el nodo Floor redondea el valor de entrada hacia abajo hasta el número entero más cercano. Por lo tanto, el valor máximo debe ser menor que 3, que es 2.99.
  • El nodo Custom Attribute tiene un Vec4. Como solo necesitamos almacenar un número flotante, podemos almacenarlo como un valor x. Al usar Set Custom Attribute en la lógica Init, podemos almacenar un valor inicial, un número entero en este caso, para cada partícula. Esto se utilizará más adelante en la lógica de actualización para elegir la forma correcta.

En la lógica de salida:

  • En el nodo Flipbook Blend, selecciona ComplexBlur.
  • Agrega el nodo Set Flipbook Size y configúralo en x: 5, y: 3, ya que tenemos 3 filas y 5 columnas en la imagen ComplexBlur.

Toques Finales​

  • En la lógica Init, agrega el nodo Set Random Color con los valores predeterminados (Mín.: 0, 0, 0 y Máx.: 1, 1, 1).
    Esto básicamente asignará a cada partícula una gama completa de colores aleatorios.
  • En la lógica de Update:
    • Podemos agregar algo de velocidad horizontal como turbulencia.
      Agrega Get Velocity, Random, Const Vec3 y un nodo Add.
      Conecta Random a Const Vec3, Const Vec3 a Add, Get Velocity a Add y Add a Set Velocity, como se muestra en la captura.
      • En el nodo Random, configura Mín.: -0.5, Máx.: 0.5. Esto le dará un rango de fuerza horizontal leve a cada partícula.
  • Por último, agregamos rotación a cada partícula.
    Integra los nodos Get Angle, 2 Random, Const Vec3 y Add.
    • Conecta los nodos Random a Const Vec3, Const Vec3 a Add, Get Angle a Add y Add al nodo Set Angle, como se muestra en la captura. Conectar 2 nodos Random a los valores y y z provocará rotaciones en los ejes y y z.
    • En los nodos Random, configura tanto el mínimo como el máximo. Esto le dará un pequeño incremento de rotación a cada partícula.
  • Como resultado final tenemos un efecto de confeti con diferentes niveles de enfoque:

Puedes ver el resultado en TikTok