Vamos a crear una sencilla pero muy impresionante "Explosión Líquida 2D" en Unity basada en un Sistema de Partículas 🙂
Tutorial de Unity Nivel: Principiante.
1.1 Creando un Nuevo Proyecto.
Vamos a crear un nuevo proyecto en Unity:
- Ejecutamos Unity Hub en nuestro ordenador.
- En la pantalla de inicio hacemos clic en el botón “New”.
- En el campo “Project name” vamos a escribir el nombre que más nos guste para nuestro proyecto, nosotros recomendamos “2D_VFX”.
- En el campo “Location” vamos a seleccionar donde queremos que se guarde nuestro proyecto en nuestro ordenador.
- Seleccionamos la casilla “2D”.
- Hacemos clic en “Create".
1.2 Preparando el entorno.
Como una actividad muy recomendada, vamos a crear algunas carpetas que nos permitan administrar de mejor manera todos los archivos (activos o "assets") que usaremos para crear nuestros efectos especiales (crear carpetas para que en ellas coloquemos los distintos tipos de assets que usaremos es una practica regular cuando se trabaja en Unity). Así que, ¡¡comencemos!! 😀
Una vez creado nuestro nuevo proyecto vamos a buscar dentro de el la pestaña "Project", y dentro de ella hacemos clic derecho sobre la carpeta "Assets", esto nos desplegará un menú de opciones del cual escogeremos "Create" y después "Folder". Con esto se creará una nueva carpeta dentro de "Assets" y a la cual llamaremos "Sprites".
Repetimos los pasos anteriores para crear otra carpeta dentro de "Assets" a la cual llamaremos "Materials".
En la carpeta "Sprites" vamos a colocar los archivos de imagen que tomaremos como base para crear nuestros efectos especiales, y en la carpeta "Materials" colocaremos los archivos tipo "Mat" (o "Material") que Unity usa para definir gran parte de las características generales que tendrán las imágenes que componen a nuestros efectos.
1.3 Cargando nuestro "Sprite".
Para finalizar los preparativos vamos a cargar la imagen o "sprite" que usaremos como base para nuestra "Explosión Líquida".
Para ello, la imagen que usaremos será este "Cículo Blanco" el cual posteriormente se modificará para crear el efecto de explosión deseada. Puedes descargar esta imagen y usarla, solo da clic derecho sobre ella y selecciona "Guardar imagen como..."
Círculo Blanco con fondo transparente en formato "PNG", con tamaño de "500 x 500 px".
Una vez que descargaste esta imagen o que hayas creado una de las mismas características en tu software de diseño preferido, "arrastra y suelta" este archivo dentro de la carpeta "Sprites" que acabas de crear en Unity. Selecciona el archivo y modifica sus propiedades como a continuación se muestra (no olvides oprimir "Apply" al finalizar para que se guarden los cambios).
2 Creando el material.
Ya con nuestro "sprite" listo en Unity, es tiempo de crear el archivo de "material" que se usará para generar nuestro efecto especial. Como se mencionó antes, estos archivos tipo "mat" o "materials" son usados por Unity para definir las características base que tendrán las imágenes que conforman a nuestro efecto especial.
Comencemos por ubicar la carpeta "Material" que hicimos en los pasos anteriores, damos clic derecho sobre ella y seleccionamos "Create" y después "Material".
Al archivo que se acaba de generar lo vamos a llamar "ParticleMat_Circle", lo seleccionamos y le asignamos las siguientes propiedades:
Estas propiedades definen el tipo de "Shader" a utilizar (un "shader" es un algoritmo usado para generar imágenes con ciertas características). Sin ahondar tanto en el tema, podemos decir que nosotros usaremos un algoritmo o "shader" para generar imágenes usadas en sistemas de partículas (los sistemas de partículas son los encargados de generar una gran cantidad de imágenes sencillas y pequeñas que podemos usar como efectos especiales, por ejemplo, en explosiones, llamaradas, niebla, etc.).
Como nuestra Explosión Líquida esta basada en un sistema de partículas que usa pequeños círculos para crear el efecto de gotas que se dispersan en el ambiente, necesitamos definir en nuestro material la imagen que se usará para crear las pequeñas gotas. Para ello, en las propiedades de nuestro material, en la sección "Maps" hacemos clic en el pequeño círculo junto a la palabra "Albedo", al hacer esto aparecerá una ventana de donde podremos seleccionar nuestro "Sprite" de círculo blanco.
Una vez hecho esto, damos clic en "Apply to Systems" y tendremos listo nuestro material que usaremos para generar el efecto de explosión.
3 Creando el sistema de partículas.
Es tiempo de crear el sistema de partículas que dará vida a nuestro efecto de Explosión Líquida 😀
Comencemos por crear un objeto del juego en Unity o "Game Object", para esto es necesario posicionarnos en la pestaña "Hierarchy" y dentro de ella en algún lugar vacío dar clic derecho y escoger "Create Empty", con esto se creará un objeto de juego vacío al que renombraremos como "LiquidExplosion_VFX".
Nuestro objeto "LiquidExplosion_VFX" aunque vacío cuenta con las propiedades "Transform", las cuales se encargan de definir la posición, orientación y escala de este dentro de la escena de nuestro proyecto. Para tener mejor control sobre nuestro objeto, es necesario seleccionarlo y ajustar los valores dentro de "Transform" para que "Position" sea igual a cero en "X, Y y Z", "Rotation" sea igual a cero en "X, Y y Z" y "Scale" sea igual a uno en "X, Y y Z".
Después, para añadir el sistema de partículas a nuestro objeto, es necesario seleccionarlo y oprimir el botón "Add Component" que aparece debajo de "Transform" y del listado seleccionar "Effects" y después "Particle System". Con esto ya tendremos un sistema de partículas listo para usar.
Nuestro sistema de partículas está creado, pero antes de configurarlo para crear nuestro efecto de explosión, es necesario tener seleccionadas dentro de el solo las casillas de "Emission", "Shape", "Limit Velocity over Lifetime", "Color over Lifetime", "Size over Lifetime", "Rotation over Lifetime", "Collision" y "Renderer".
4 Creando "La Explosión Líquida 2D".
Es tiempo de configurar nuestro sistema de partículas para crear el efecto de Explosión Líquida que queremos.
Inicialmente, al momento de crear el sistema de partículas, Unity nos mostrará en la escena de nuestro proyecto algunos cuadros color magenta que parecen brotar de la nada; esto es el sistema de partículas en acción, pero como no tiene asignado un "Material" para mostrar, Unity genera estos cuadros magenta para anunciar que no hay un material o que algo anda mal con este. Para cambiarlo, hagamos lo siguiente:
Seleccionamos nuestro objeto "LiquidExplosion_VFX", después en su sistema de partículas hacemos clic en "Renderer" para que se desplieguen sus opciones y buscamos aquella con el nombre "Material" (que en este momento debe estar vacío). Ahora, lo que necesitamos hacer es arrastrar nuestro archivo de material "ParticleMat_Circle" y soltarlo sobre la casilla frente a "Material" para que este se asigne como la imagen a mostrarse en el sistema de partículas (reemplazando a los cuadros color magenta por círculos blancos).
Una vez hecho esto volvemos a dar clic sobre "Renderer" para contraerlo; regresaremos a el después 🙂
Ahora, dentro del sistema de partículas hacemos clic sobre el texto "LiquidExplosion_VFX" (este texto tiene el mismo nombre que nuestro objeto del juego) y con ello se desplegarán las opciones generales para configurar el sistema. Estas opciones deben modificarse para quedar de la siguiente manera:
Para que "Start Lifetime" y "Start Speed" muestren dos casillas en lugar de una sola, se debe hacer clic sobre la pequeña flecha que está a lado de la casilla y escoger "Random Between Two Constants".
El color lo podemos escoger haciendo clic sobre la casilla frente a "Start Color".
Los valores aquí mostrados son los necesarios para crear una explosión tal cual se muestra en el video de ejemplo en este tutorial, pero tu puedes crear tus propios efectos de explosiones modificando cualquiera de las propiedades de los sistemas de partículas.
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos de explosiones modificando los siguientes parámetros:
Duration: Para modificar el tiempo de duración de todo el efecto.
Looping: Para hacer que el efecto se repita una y otra vez.
Start Lifetime: Para modificar el tiempo de duración de cada partícula.
Start Speed: Para modificar la velocidad con la que salen disparadas las partículas.
Start Size: Para modificar el tamaño inicial con el se se van a crear las partículas.
Start Color: Para modificar el color de las partículas.
Gravity modifier: Para modificar la rapidez con la que caerán las partículas.
Max Particles: Para modificar la cantidad de partículas que se pueden generar durante la explosión.
Ahora vayamos a la sección "Emission", aquí definiremos la cantidad exacta de partículas que queremos que se generen durante el periodo de vida de nuestra explosión (en este caso solo vamos a generar 75 partículas una sola vez y al inicio de nuestra explosión).
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos de explosiones modificando los siguientes parámetros:
Count: Para modificar la cantidad de partículas a generar (el valor de "Count" debe ser menor al valor asignado a "Max Particles" del paso anterior).
En la sección "Shape" veremos la forma en la que queremos que sean proyectadas nuestras partículas, en este caso queremos que sean proyectadas de manera aleatoria sobre una forma esférica en sus 360° grados.
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos de explosiones modificando los siguientes parámetros:
Arc: Para modificar el ángulo en el que salen disparadas las partículas.
Mode: Para modificar el patrón en el que salen disparadas las partículas.
En la sección "Limit Velocity over Lifetime" podremos asignar la velocidad que tendrán cada una de las partículas durante su recorrido (en este caso tomamos como base la velocidad inicial que asignamos y ahora haremos que esta disminuya con el tiempo).
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos de explosiones modificando los siguientes parámetros:
Dampen: Para modificar que tan rápido las partículas pierden su velocidad.
En la sección "Color over Lifetime" haremos que nuestras partículas se vuelvan transparentes cuando lleguen al final de su tiempo de vida (dando el efecto de que desaparecen progresivamente) . Para ello modificaremos la casilla "Color" haciendo clic sobre esta y entrando al editor de gradientes "Gradient Editor".
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos de explosiones modificando los siguientes parámetros:
Las banderillas en la parte superior del rectángulo modifican el porcentaje de transparencia que tendrán todas las partículas (puedes crear más haciendo clic en esta área).
Las banderillas en la parte inferior del rectángulo modifican el color que tendrán todas las partículas (puedes crear más haciendo clic en esta área).
La posición de las banderillas sobre el eje horizontal determina en que momento respecto al tiempo de vida total de la partícula se aplicará la característica de color y transparencia requeridos.
En la sección "Size over Lifetime" vamos a modificar el comportamiento del tamaño que tendrán nuestras partículas durante la explosión, de forma tal que comiencen pequeñas, después crezcan hasta un tamaño máximo y después se vayan reduciendo (los tamaños máximos que alcanzarán las partículas son los definidos anteriormente en "Start Sizes").
El comportamiento del tamaño lo vamos a definir usando una gráfica a la cual podemos acceder al hacer clic en la casilla de "Size", al hacerlo, en la parte inferior de la pestaña "Inspector" se mostrará la gráfica con título "Particle System Curves", está gráfica la vamos a modificar como se muestra a continuación (recuerda que, para agregar un nuevo punto de inflexión en la curva de la gráfica solo hay que hacer clic derecho sobre esta y oprimir "Add Key").
Cada punto de inflexión o "Key" lo vamos a mover para que nuestra curva quede de la siguiente forma.
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos de explosiones modificando los siguientes parámetros:
Agrega más puntos de inflexión y modifica la curva para que obtengas comportamientos distintos en los tamaños de las partículas.
En la sección "Rotation over Lifetime" vamos a modificar la velocidad angular de cada partícula para que estas giren mientras pasa el tiempo. La manera de modificar este parámetro es muy similar a lo que hicimos en el paso anterior, solo que antes vamos a hacer clic en la pequeña flecha que se encuentra frente a la casilla "Angular Velocity" y escogeremos "Random Between Two Curves".
Al hacer esto, la casilla cambiará de una casilla tipo numérica a una gráfica, hacemos clic sobre esta casilla tipo gráfica y en la parte inferior de la pestaña "Inspector" modificaremos dicha gráfica como se muestra a continuación.
Primero vamos a ampliar el rengo de valores sobre el eje vertical (lo que nos permitirá tener más grados de libertad para asignárselos a nuestras partículas), esto lo hacemos con un clic sobre el valor de 45 que se muestra por defecto y posterior los cambiamos a 360.
Las dos curvas que definimos en un inicio ahora se encuentran superpuestas, es necesario mover los puntos de inflexión de cada una de ellas con la finalidad de tener lo siguiente:
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos de explosiones modificando los siguientes parámetros:
Modifica la curva para que obtengas comportamientos distintos en el giro de las partículas.
La sección "Collision" nos permite hacer que nuestras partículas puedan interactuar con los demás objetos del juego mediante colisiones; nosotros usaremos esta sección para poder hacer que nuestras partículas reboten con los suelos y muros que las rodeen.
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos de explosiones modificando los siguientes parámetros:
Bounce: Para modificar la fuerza con la que rebotan las partículas al chocar con un objeto (el objeto debe tener un "Collider 2D").
La última sección por modificar es "Renderer" y en esta se definen las características que tendrán nuestras partículas al momento de ser mostradas en pantalla.
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos de explosiones modificando los siguientes parámetros:
Speed Scale: Para modificar la longitud de nuestra partícula en relación a la velocidad que esta tenga (así nos permite tener una forma alargada al momento de iniciar la explosión).
Length Scale: Para modificar la longitud de nuestra partícula en relación al ancho que esta tenga (así nos permite mantener una forma un poco alargada al final de la explosión).
Order in Layer: Si tenemos más "Sprites" en nuestra escena y queremos que nuestra explosión se muestra delate o atrás de ellas modificamos este valor.
Finalmente para comprobar que nuestras partículas rebotan contra un objeto en el juego que contenga un "Collider 2D", vamos a crear un nuevo objeto del juego vacío y lo llamaremos "Ground" (este será el piso con el que reboten nuestras partículas). Le asignamos un "Box Collider 2D" y nos aseguramos de que nuestro objeto "Ground" tenga las siguientes características:
Probamos nuestro efecto oprimiendo el botón "Play" y ¡¡Listo, nuestra "Explosión Líquida 2D" esta completa y lista para ser usada 😀 !!