Vamos a crear una sencilla pero muy impresionante “Explosión de Energía 2D” en Unity basado 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 las imágenes o “sprites” que usaremos como base para nuestra “Explosión de Energía 2D”.
Para ello, las imágenes que usaremos serán un “Cículo Blanco”, un “Punto Luminoso” y un “Rayo de Energía”, los cuales posteriormente modificaremos para crear el efecto de explosión deseado. Puedes descargar estas imágenes y usarlas, solo da clic derecho sobre ellas y selecciona “Guardar imagen como…”
Círculo Blanco con fondo transparente en formato “PNG”, con tamaño de “500 x 500 px”.
Punto Luminoso con fondo transparente en formato “PNG”, con tamaño de “520 x 520 px”
Rayo de Energía con fondo transparente en formato “PNG”, con tamaño de “524 x 108 px”
Una vez que descargaste las imágenes o que hayas creado unas con las mismas características en tu software de diseño preferido, “arrastra y suelta” cada archivo dentro de la carpeta “Sprites” que acabas de crear en Unity. Selecciona cada 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 nuestros “sprites” listos en Unity, es tiempo de crear los archivos de “materiales” 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 de Energía 2D esta basada en un sistema de partículas que usa pequeños círculos para crear el efecto de chispas que caen, necesitamos definir en nuestro material la imagen que se usará para crear las pequeñas chispas. 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 primer material que usaremos para generar el efecto de explosión.
Ahora, vamos a repetir los pasos anteriores para crear dos materiales más: “ParticleMat_ExpLight” y “ParticleMat_ExpRay”. Sus caracterísicas serán las siguientes:
3 Creando el sistema de partículas.
Es tiempo de crear el sistema de partículas que dará vida a nuestra Explosión de Energía 2D 😀
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 “2DEnergyExp_VFX“.
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, es necesario tener seleccionadas dentro de el solo las casillas de “Emission“, “Shape“, “Limit Velocity over Lifetime“, “Color over Lifetime“, “Size over Lifetime” y “Renderer“.
4 Creando “La Explosión de Energía 2D” – PARTE I -.
Es tiempo de configurar nuestro sistema de partículas para crear el efecto de Explosión de Energía 2D 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 “2DEnergyExp_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_ExpRay” 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 rayos 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 “2DEnergyExp_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:
Los valores aquí mostrados son los necesarios para crear un efecto de Explosión de Energía 2D tal cual se muestra en el video de ejemplo en este tutorial, pero tu puedes crear tus propios efectos 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 modificando los siguientes parámetros:
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.
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 nuestro efecto (en este caso solo vamos a generar 25 partículas “una sola vez”).
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos modificando los siguientes parámetros:
Count: Para modificar la cantidad de partículas a generar.
En la sección “Shape” veremos la forma en la que queremos que sean proyectadas nuestras partículas, en este caso, queremos que alrededor de una circunferencia se generen las partículas en posiciones aleatorias.
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos modificando los siguientes parámetros:
Radius: Para modificar el tamaño del círculo de donde 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” vamos a modificar la manera en que nuestras partículas salen disparadas de forma tal que, estas presenten una ligera desaceleración al final de su trayectoria.
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos modificando los siguientes parámetros:
Dampen: Para modificar la desaceleración cuando salen disparadas las partículas.
En la sección “Color over Lifetime” haremos que nuestras partículas cambien de color cuando lleguen al final de su tiempo de vida. 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 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 para que comiencen de tamaño pequeño, después crezcan a un tamaño normal (el asignado anteriormente en “Start Sizes“), y después se vayan reduciendo.
El comportamiento del tamaño lo vamos a definir usando dos gráficas; para acceder a ellas vamos a hacer clic en la pequeña flecha junto a la “mini” gráfica frente a la casilla “Size” y escogeremos la opción “Random Between Two Curves“.
Después, en la casilla de “Size” haremos clic en la “mini” gráfica frente a esta, al hacerlo, en la parte inferior de la pestaña “Inspector” se mostrará la gráfica completa con título “Particle System Curves“; aquí se mostrarán las dos gráficas y las podremos modificar como se muestra a continuación.
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos modificando los siguientes parámetros:
Modifica las curvas para que obtengas comportamientos distintos en los tamaños de las partículas.
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 modificando los siguientes parámetros:
Length Scale: Para modificar la longitud de nuestra partícula en relación al ancho que esta tenga.
5 Creando “La Explosión de Energía 2D” – PARTE II -.
Si, este será un tutorial largo, pero “lo vale“, te lo prometemos 🙂
Cuando se trata de efectos especiales, es recomendable utilizar dos o más sistemas de partículas para añadir detalles que hagan lucir mejor a nuestros efectos; y esta vez no será la excepción 😀
Además de la explosión de energía que hicimos en el punto anterior, ahora vamos a añadirle un efecto de “resplandor” que le dará más vida a la explosión.
Comencemos por seleccionar nuestro objeto “2DEnergyExp_VFX” y repitiendo los pasos anteriores, vamos a crear dentro de el dos objetos nuevos vacíos con los nombres “EnergyExp_Light” y “EnergyExp_Spark“.
Como siguiente paso, a cada uno de estos nuevos objetos les vamos a añadir un sistema de partículas
Seleccionamos nuestro objeto “EnergyExp_Light” y nos aseguramos que su sistema de partículas solo deba tener seleccionadas dentro de el las casillas de “Emission“, “Limit Velocity over Lifetime“, “Color over Lifetime“, “Size over Lifetime” y “Renderer“.
Después en el 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_ExpLight” 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 puntos de luz blancos).
Una vez hecho esto volvemos a dar clic sobre “Renderer” para contraerlo.
Ahora, dentro del sistema de partículas hacemos clic sobre el texto “EnergyExp_Light” (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:
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos modificando los siguientes parámetros:
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.
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 nuestro efecto (en este caso solo vamos a generar una partícula “solo una vez”).
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos modificando los siguientes parámetros:
Count: Para modificar la cantidad de partículas a generar.
En la sección “Limit Velocity over Lifetime” vamos a modificar la manera en que nuestras partículas salen disparadas de forma tal que, estas presenten una ligera desaceleración al final de su trayectoria.
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos modificando los siguientes parámetros:
Dampen: Para modificar la desaceleración cuando salen disparadas las partículas.
En la sección “Color over Lifetime” haremos que nuestras partículas realicen dos acciones: la primera es que cambien de color cuando lleguen al final de su tiempo de vida y la segunda es que también desaparezcan. 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 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 para que comiencen de tamaño normal (el asignado anteriormente en “Start Sizes“), y después se vayan reduciendo.
El comportamiento del tamaño lo vamos a definir usando una gráficas estándar; para acceder a ellas vamos a hacer clic en la pequeña flecha junto a la “mini” gráfica frente a la casilla “Size” y escogeremos la opción “Curve“.
Después, en la casilla de “Size” haremos clic en la “mini” gráfica frente a esta, al hacerlo, en la parte inferior de la pestaña “Inspector” se mostrará la gráfica completa con título “Particle System Curves“; la modificaremos como se muestra a continuación.
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos modificando los siguientes parámetros:
Modifica las curvas para que obtengas comportamientos distintos en los tamaños de las partículas.
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.
6 Creando “La Explosión de Energía 2D” – PARTE III -.
Esto ya es lo último, también lo prometemos 🙂
Ahora vamos a añadir un efecto de “chispas” a nuestra explosión (porque toda explosión debe llevar siempre algunas).
Seleccionamos nuestro objeto “EnergyExp_Spark” y nos aseguramos que su sistema de partículas solo deba tener seleccionadas dentro de el las casillas de “Emission“, “Shape“, “Limit Velocity over Lifetime“, “Color over Lifetime“, “Size over Lifetime” y “Renderer“.
Después en el 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.
Ahora, dentro del sistema de partículas hacemos clic sobre el texto “EnergyExp_Spark” (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:
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos modificando los siguientes parámetros:
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.
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 nuestro efecto (en este caso solo vamos a generar 25 partículas “una sola vez”).
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos modificando los siguientes parámetros:
Count: Para modificar la cantidad de partículas a generar.
En la sección “Shape” veremos la forma en la que queremos que sean proyectadas nuestras partículas, en este caso, queremos que alrededor de una circunferencia se generen las partículas en posiciones aleatorias.
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos modificando los siguientes parámetros:
Radius: Para modificar el tamaño del círculo de donde 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” vamos a modificar la manera en que nuestras partículas salen disparadas de forma tal que, estas presenten una ligera desaceleración al final de su trayectoria.
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos modificando los siguientes parámetros:
Dampen: Para modificar la desaceleración cuando salen disparadas las partículas.
En la sección “Color over Lifetime” haremos que nuestras partículas cambien de color cuando lleguen al final de su tiempo de vida. 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 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 para que comiencen de tamaño normal (el asignado anteriormente en “Start Sizes“), y después se vayan reduciendo.
El comportamiento del tamaño lo vamos a definir usando una gráficas estándar; para acceder a ellas vamos a hacer clic en la pequeña flecha junto a la “mini” gráfica frente a la casilla “Size” y escogeremos la opción “Curve“.
Después, en la casilla de “Size” haremos clic en la “mini” gráfica frente a esta, al hacerlo, en la parte inferior de la pestaña “Inspector” se mostrará la gráfica completa con título “Particle System Curves“; la modificaremos como se muestra a continuación.
Notas para los ejercicios.
Una vez concluido este tutorial, te recomendamos crear nuevos efectos modificando los siguientes parámetros:
Modifica las curvas para que obtengas comportamientos distintos en los tamaños de las partículas.
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 modificando los siguientes parámetros:
Length Scale: Para modificar la longitud de nuestra partícula en relación al ancho que esta tenga.