Como crear una explosión 2D en Unity

En este tutorial vamos a explicar como crear la animación de una explosión 2D, usando el animator de Unity. Es la base para crear una animación.

Lo primero que necesitamos es tener los dibujos o sprites de la animación, A continuación mostramos los sprites que usaremos. En este caso es una sprite sheet de una explosión con solo 5 sprites para crear la animación.

Sprite sheet explosion

Una ves con los sprites, vamos a hacer lo siguiente.

Agregar sprites a Unity.

Para agregar los sprites a Unity es muy sencillo.
Se recomienda crear una carpeta llamada sprites, dentro de la carpeta Assets. En la ventana project. Como se muestra en la siguiente imagen.

Añadir sprite

Luego se arrastran todos loa sprites dentro de esta carpeta que acabamos de crear. Simplemente apre la ventana donde esta tu sprite sheet y arrástrala hacia la ventana project.

Si tienes configurado Unity en 2D, automáticamente te convertirá las imágenes en sprites.

Si no, tienes que seleccionar todas las imágenes e indicar que son sprites 2D. Como se muestra en la siguiente imagen.

Sprite por default, Unity

Para configurar Unity como 2D o 3D, ve el tutorial:

Configuración predeterminada de Unity.

Crear la animación

Si tienes múltiples imágenes o sprites.

simplemente selecciona los sprites que conforman la animación y arrástralos hacia la ventana de escena.

Automáticamente te creará una animación. La cual puedes ver usando la ventana de animación.

Si tienes una sprite sheet.

Tienes que usar sprite editor, para indicar que tu imagen esta formada por múltiples sprites. Para esto tienes que seleccionar tu imagen en la ventana projet. Y en el Inspector, seleccionar múltiple en sprite mode, y luego Sprite Editor. Como se muestra a continuación.

Editando sprite sheet, Unit

Aparece el Editor de sprites, aquí tienes que ir a la pestaña slice y seleccionar slice. Como se muestra en la siguiente imagen.

Sprite sheet, Unit

Esto te creara múltiples cuadroos rodeando a tus sprites, se crean en base a la transparencia de tu imagen, es decir, forma un cuadro alrededor de una imagen en la que todo es transparente hasta las esquinas del cuadro. Como se muestra a continuación.

Es posible que te cree mal algunos sprites, por ejemplo, cuando es muy pequeño el dibujo y esta rodead de transparencia, como se muestra en la siguiente imagen.

Sprite sheet editar, Unit

Solo elimina con el botón delete todos los sobrantes, y uno de ellos ajustalo al tamaño de tu sprite, en este caso el ajuste lo damos en base en el centro, ya que es la base para esta explosión. Te tiene que quedar así:

Sprite sheet editar, Unit

Haces lo mismo hasta que todos te quede como los quieres. Y al final presionas Apply en la pestaña superior, como se muestra a continuación:

Multiple sprite, Unit

Ahora si revisas tu sprite en la ventana Project, veras que te aparece una flecha, la presionas y veras que ya son múltiples imágenes.

Multiple sprite, Unity

Ahora solo seleccionas esas imágenes y las arrastras hacia la ventana es escena.

Creando animacion sprite sheet, Unity

Te preguntara si deseas guardar la animación. Si así de fácil, automáticamente Unity detecta que quieres crear una animación nueva. Solo le das el nombre y lo guardas. Te recomendamos tener una carpeta dentro de Assets donde coloques todas las animaciones.

Guardando animacion, Unity

Para ver tu animación, ve a la ventana de Animation (donde esta la ventana Animation) y presiona el botón de play. Luego ti animación va a iniciar.

Explosion animacion, Unity

Cada rombo de la ventana Animation, se llama KeyFrame. Si seleccionas un KeyFrame, vas a ver la imagen (sprite) que le corresponde.

En un dado caso que modificar una imagen de tu animación o simplemente para que sepas como funciona. Solo selecciona un Key frame, luego ve al inspector y en la zona de Sprite Renderer, vas a ver como el nombre en Sprite, cambia de acuerdo al KeyFrame que selecciones. Esto indica que esta zona es la que se esta animando en las KeyFrames.

Sprite renderer, Unity

Puedes presionar el botón rojo en la ventana de Animation, es el botón de Record, asi todo lo que hagas cuando este presionado este botón se va a grabar. Si cambias la zona de Sprite, por un sprite nuevo, ese sera el sprite de la animación ahora.