Actividad 2.

1
En esta actividad te mostraremos como crear animaciones para tus Players o cualquier otro
GameObject que lo requiera. Básicamente revisaremos:

• Controlador Animador (Animator Controller)

• Clips de Animación
• Cuadros claves (Keyframes)
• Árbol de animaciones
• Transiciones
• Eventos de Animación

Ten a mano la carpeta con los recursos que utilizarás en esta actividad para importarlos en Unity,
éstos se encuentran en el archivo “GameArt2D.zip” y fueron obtenidos desde
https://www.gameart2d.com/freebies.html; así como el script “PlayerTransiciones.cs”

Dirección Nacional Área Informática

El Proyecto

Lo primero que debes hacer es crear el proyecto en Unity, ajustar algunas variables y luego importar
los recursos que vamos a necesitar

1. Ejecuta “Unity Hub” y crea un proyecto 2D. Déjalo en la carpeta “Documentos” y asígnale el
nombre que quieras, por ejemplo “Animaciones”

2. Ajusta la resolución a 1920x1080 y razón de aspecto a 16:9 (en la ventana “Game”)

3. Haz un clic en la carpeta de “Assets” e importa allí los elementos gráficos que utilizarás en esta
actividad. Para ello arrastra la carpeta “GameArt2D” hacia “Assets”

El Escenario

Ahora vamos a construir el escenario en donde probaremos las animaciones

1. En la ventana de Assets abre la carpeta “GameArt2D/Tileset” y arrastra a la escena cualquier

imagen que quieras utilizar como fondo

2. Agrega algunos objetos decorativos

3. Agrega un objeto a utilizar como base de desplazamiento del Player y extiéndelo a lo ancho de
toda la escena (carpeta “Tiles”). Agrega un componente Collider2D a este GameObject para
soportar el movimiento del Player al ser sometido al motor de física

Dirección Nacional Área Informática

El Player

Las animaciones las haremos sobre un Player cuyas imágenes las puedes obtener de la carpeta
“GameArt2D/Sprites”

1. Selecciona la primera imagen “Idle” del personaje que utilizarás como Player, posiciónala en la
escena y cambia su nombre (por ejemplo “Dino”)

2. Agrégale un RigidBody2D y los Collider 2D que estimes conveniente para someterlo al motor de
física

Dirección Nacional Área Informática

El Controlador Animador (Animator Controller)

Para nuestro Player necesitaremos una Controlador Animador (Animator Controller) que se
encargará de activar/desactivar los Clips de Animación y las transiciones entre ellos

1. Dentro de las carpetas “Assets” crea otra llamada “Animaciones” en donde dejaremos todos
los Controladores Animadores, así como los Clips de Animación que asociemos

2. Dentro de la carpeta “Assets/Animaciones” crea un Controlador Animador (botón derecho del

mouse - Create - Animator Controller) y asígnale el mismo nombre del GameObject que utilices
como Player (para nuestro ejemplo “Dino”)

3. En la ventana de Jerarquía haz un clic sobre tu Player y arrastra el “Animator Controller” que
creaste hacia la ventana “Inspector” de tu Player, esto agregará la componente “Animator” al
GameObject con el controlador que creaste en el punto anterior

Clip de Animación

Vamos a crear una animación por cada posible estado de nuestro Player (descansando, saltando,
corriendo, muriendo, etc.) las cuales serán manejadas por nuestro Controlador Animador. Por cada
animación necesitarás el conjunto de imágenes que definen su secuencia.

1. En la ventana de “Jerarquía” selecciona tu Player (“Dino”), luego haz clic en el menú

“Window/Animation/Animation” para abrir el editor de animaciones (en la figura siguiente el
editor fue localizado debajo de la ventana de la escena para poder visualizar las animaciones
mientras las construimos)

Dirección Nacional Área Informática

2. Haz clic en el botón Crear (“Create”), se desplegará un cuadro de diálogo para que ingreses la
carpeta (directorio) y nombre para la animación. En nuestro caso construiremos la animación
de nuestro Player “descansando”. Asegúrate de que la carpeta sea la de las animaciones y que
el nombre de la animación represente el estado del Player (“Dino Descansando.anim”)

3. Las animaciones corresponden a la modificación, en una línea de tiempo, de una o más

propiedades de un GameObject. En nuestro caso modificaremos su imagen visible. Haz clic en
Agregar Propiedad (“Add Property”), de la componente “Sprite Renderer” selecciona el
elemento “Sprite” y agrégalo a la animación haciendo un clic en el símbolo “+” ubicado a su
derecha

Dirección Nacional Área Informática

4. Ahora selecciona las otras imágenes que componen la secuencia de animación y arrástralas
hacia la línea de tiempo distribuyendo los “keyframes” (ubicación en la línea de tiempo donde
queda un elemento de la propiedad a modificar). Presiona el botón “Play” para ver la animación
(también puedes arrastrar el mouse en la zona donde se despliega el tiempo)

5. Ahora crea una animación para otro estado del Player (“Dino Corriendo”) haciendo clic en la
opción que se muestra en la imagen siguiente y arrastrando luego las imágenes de la animación
hacia la línea de tiempo

Dirección Nacional Área Informática

Árbol de Animaciones

Ahora que tienes varios clips de animación te mostraremos como organizarlos con el Controlador
Animador y dejarlos preparados para su activación

1. Haz un doble clic sobre el Control Animador de tu Player. Se desplegará una ventana con varios
rectángulos (“estados”) que incluyen los clips que creaste

Dirección Nacional Área Informática

2. Ordena los estados de acuerdo con la imagen de más abajo. Haz un clic con el botón derecho
del mouse sobre el estado “Any State”, selecciona “Make Transition” y arrastra el mouse hasta
uno de tus clips. Repite esto por cada clip que hayas creado.

3. Esta “máquina de estados” debes leerla como sigue:

a. Al iniciar (estado “Entry”) se ejecuta la animación “Dino Descansando” (transición por
defecto destacada en tono anaranjado)
b. Desde cualquier estado (“Any State”) se pasa al estado “Dino Descansando”, “Dino
“Corriendo” o “Dino Muriendo”

4. La transición del estado “Any State” a cualquier otro la activaremos utilizando variables de
control

Transiciones

Las transiciones las controlaremos a través de variables cuyo valor le indicará al Controlador de
Animación el estado que debe adquirir

1. Haz clic en la pestaña “Parameters”, luego selecciona el tipo de dato “Int” (Integer), asígnale un
nombre (“Estado”) y déjala con el valor 0 (“cero”)

Dirección Nacional Área Informática

2. Para configurar la transición desde cualquier estado (“Any
State”) hacia “Dino Descansando” haz clic en la flecha que une
ambos estados. A tu derecha aparecerá la ventana de
configuración de esta transición y déjala como se observa en la
figura.
En la parte inferior agrega la condición para activarla y que en
nuestro caso será cuando el “Estado” sea igual a “0”

3. Haz lo mismo para las otras transiciones, asigna s “Estado” un

“1” para la transición de “Any State” hacia “Dino Corriendo” y
un “2” para la transición de “Any State” hacia “Dino Muriendo”

4. Copia el script “PlayerTransiciones” dentro de la carpeta

“Script/” y asócialo a tu Player.

5. Ejecuta el juego y analiza el script poniendo énfasis en el

método “SetInteger” de la componente “Animator”, la
propiedad “transform.eulerAngles” y el uso del método
“Math.abs”

Eventos de Animación

Los clips de animación tienen un elemento que resulta muy útil en ciertas ocasiones, y es el poder
ejecutar un método cuando la animación se encuentre en un cuadro específico; por ejemplo, cuando
un Player salta con su arma y necesitas que en un punto del salto dispare un proyectil. Esto implica
que en un instante específico de la animación se debe especificar la ejecución de una acción (para
lo anterior, el script asociado a tu Player debe tener el método incorporado en la clase)

1. Abre la ventana del Clip de Animación que deseas intervenir y ubica en la línea de tiempo el
“keyframe” específico en donde deseas ejecutar tu acción. Haz clic con el botón derecho del
mouse en dicho punto entre la línea de tiempo y las marcas de “keyfranes” y selecciona “Add
Animation Event”

Dirección Nacional Área Informática

2. Aparecerá una marca en dicho punto, y a tu derecha se desplegará una ventana en donde
podrás acceder a la lista de métodos del script que tienes asociado a tu Player. Selecciona
“TestDeEvento()” y prueba el juego observando la Consola

Dirección Nacional Área Informática