Animaciones con Sprites

Curso de Unity 3D

20.  
23.  
25.  
39.  

Sprites múltiples

Para optimizar el rendimiento de la aplicación, en lugar de cargar una foto por cada imagen, es recomendable cargar una foto que contenga todas las imágenes necesarias.

Todas las fotos que sean introducidas en el panel de proyecto en modo 2D son interpretadas como sprites. Si son introducidas en modo 3D son interpretadas como texturas. Una flechita al lado de la foto indica que es un sprite.

Si quiero usar sprites en un entorno 3D: selecciono la imagen -> Texture Type -> Sprite (2D and UI)

Crear una animación a partir de un spritesheet

Añadir a escena un con su correspondiente animación.

Animaciones con Sprites 1
  1. Seleccionaremos el sprite en el panel de proyecto.
  2. Seleccionaremos Sprite Mode → multiple en el panel inspector.
  3. Pulsaremos el botón de apply en el panel inspector.
  4. Pulsaremos el botón de Sprite Editor en el panel inspector. A partir de aquí tenemos varias opciones:
    • Hacer rectángulos manualmente de los sprites que quiero seleccionar
    • Hacer un recortado automático, que en el caso de fotografías con transparencia se adaptará a los límites de la foto.
    • Recortar los frames en función de la cantidad que halla por fila o columna: Slice → Grid By Cell Count → Column: 8, Row: 1 → Slice
  5. Arrastraremos desde el panel de proyecto los sprites recortados deseados a la escena. Esto creará una nueva animación.

Podemos reutilizar animaciones de desplazamiento, rotación, y escala (veremos estas animaciones más adelante) para varios objetos. Pero las animaciones consistentes en sprites animados serán solo para un único objeto. De lo contrario, si a un pingüino le pongo una aimación de sprites de un perro andando, el pingüino se convertirá en perro.

Crear una animación de desplazamiento

1. Anidamos la animación que ya tenemos (Sprite) en escena en un Empty (Oruga).

2. Hacemos visible el panel de animación ( window → Animation Animation).

3. Al pulsar sobre el Empty, nos aparece la opción de Create Animation en el panel de animación.

4. En el panel de animación pulsamos el botón de grabar ( punto rojo ) para grabar los fotogramas clave de la animación de desplazamiento.

Animaciones con Sprites 2

5. Desplazamos ligeramente el Empty en la escena → Movemos la línea de tiempo del panel Animation hacia la derecha → Volvemos a desplazar el Emtpy.

6. Animados todo en un Empty llamado OrugaContainer, de tal forma que al desplazar OrugaContainer se desplace toda la animación.

Cómo modificar una animación que ya está en la escena

Si queremos añadir frames a una animación que ya tenemos en escena debemos tener seleccionado el GameObject que tiene la animación que queremos modificar en el panel de jerarquía o bien tener abierto el prefab que tiene esa animación.

Para ver reproducida una animación en la escena será necesario tener seleccionado el GameObject que tiene esa animación en el panel de jerarquía o bien tener abierto el prefab que tiene esa animación.

Debemos ubicar el cursor exactamente en la posición del keyframe que queremos modificar. Para ello, es útil pulsar en el botón de siguiente keyframe Animaciones con Sprites 3.

Pulsaremos el botón de grabar Animaciones con Sprites 4 y estableceremos el nuevo estado del sprite.

Superposición de sprites

Para gestionar esto iremos a: Panel inspector →  Sprite Renderer:

  • Sorting Layer: nos permite vincular un objeto a una capa. Los objetos vinculados a las capas que están por encima, se verán también por encima.
  • Order in Layer: Nos permite definir la ubicación del objeto dentro de una capa. Los objetos con números mayores se verán por encima dentro de dicha capaNos permite determinar que sprite se mostrará por encima.

Ejercicio

Crear una composición con las siguientes imágenes suministradas en la que los sprites se ejecutan infinitamente y los elementos se desplazan de un lado a otro.

Animaciones con Sprites 5
Animaciones con Sprites 6
Animaciones con Sprites 7
← Introducción a C#
Conceptos para realización de juegos 2D →

Aviso Legal | Política de privacidad