Activa JavaScript para disfrutar de los vídeos de la Mediateca.
Primeros pasos en Unity. 2D parte 2 (Animation) - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Continuamos viendo proyectos en 2D, en este caso animando objetos 3D y Sprites
Bueno, nos adentramos en el terreno de la animación y es que Unity, aparte de ser un motor de videojuegos, pues también permite crear animaciones dentro, lo cual es lógico porque muchas veces tenemos que animar elementos, no sólo para crear sprites animados, sino también para objetos que se mueven, desde una nube que pasa, una palanca que se baja o una puerta que se abre.
00:00:06
Incluso se pueden animar cámaras para crear escenas cinemáticas
00:00:25
Pero antes de empezar tenemos que entender que Unity tiene dos herramientas básicas
00:00:30
Que son el Animation y el Animator
00:00:33
Ya sé que se parecen mucho en el nombre pero son distintas y en muchos casos complementarias
00:00:35
Vamos a empezar por la primera de todas que es el Animation
00:00:41
Que nos permite crear animaciones a través de una línea de tiempo como se hacen en programas habituales de animación
00:00:44
Si nos vamos a Unity, podemos abrir la ventana de Animation dentro del menú de Window, nos vamos a la sección de Animation y veremos que efectivamente, como decía, tenemos la opción de Animation y la de Animator.
00:00:49
Bien, si le abrimos la Animation, veremos que se nos abre una línea de tiempo, pero obviamente no tenemos nada, ninguna animación creada.
00:01:04
para ello lo que tenemos que hacer es seleccionar un elemento de nuestra escena
00:01:11
voy a hacer un ejercicio clásico en la animación
00:01:15
que es la de animar una pelota que bota
00:01:19
de hecho voy a crear un plano
00:01:22
y voy a crear también una esfera
00:01:23
y la voy a llevar a 0
00:01:26
pero en este caso la voy a dejar en 5
00:01:28
y Z0
00:01:31
muy bien
00:01:33
veremos que ahora sí, si abro la ventana de Animation
00:01:33
al tener un objeto de nuestra escena seleccionado
00:01:36
ahora sí que me está preguntando si quiero crear una animación a partir de
00:01:41
ese game object le voy a decir que sí y una cosa que tenemos que entender es que
00:01:45
las animaciones se guardan en nuestro proyecto de unity tanto el animation que
00:01:49
es lo que va a guardar ahora como el animator que es la que gestiona las
00:01:55
diferentes animaciones del mismo objeto que lo veremos más adelante así que muy
00:01:58
importante como siempre elegir una buena ubicación de hecho voy a crear un nuevo
00:02:01
folder en mis assets que se va a llamar animations
00:02:07
de momento lo voy a guardar aquí le voy a llamar bota pelota
00:02:11
safe y si nos fijamos en la carpeta que he creado veremos que ha creado dos
00:02:17
archivos uno este el que tiene un icono como de play que es el animation que es
00:02:22
lo que estoy ahora mismo editando pero ha creado otro que es el animator
00:02:27
De hecho, el animator, si nos vamos a Window, Animation y Animator, veremos que abre un panel nuevo, que es este.
00:02:32
El animator lo veremos más adelante, pero básicamente es el que gestiona cómo nuestro objeto pasa de una animación a otra.
00:02:39
Eso es lógico, por ejemplo, en personajes que están corriendo, luego saltan, luego se agachan.
00:02:45
Entonces cada uno tiene su animación y de alguna forma tenemos que decirle cómo y cuándo pasa de una a otra.
00:02:49
Eso lo haremos más adelante con el animator, pero de momento nos quedaremos con el animation, que es este de aquí.
00:02:53
Y como podemos ver, ya se nos abre una línea de tiempo.
00:02:58
De hecho, este panel es tan importante que lo voy a anclar aquí abajo porque ya lo voy a estar usando constantemente.
00:03:01
Para poder empezar a animar, tengo que seleccionar mi objeto.
00:03:08
Voy a empezar por algo muy importante.
00:03:12
Podemos crear tantas animaciones como queramos, en este caso, en nuestra pelota.
00:03:15
Y de hecho, ahora mismo hemos creado una que se llama Bota Pelota, que se corresponde con esta.
00:03:18
Pero yo podría crear más.
00:03:25
si desplegamos este
00:03:27
donde tenemos aquí
00:03:29
podemos crear un nuevo clip
00:03:31
y entonces le podemos llamar por ejemplo
00:03:32
bota y en este caso le voy a decir
00:03:34
que explota
00:03:37
y si nos fijamos ha creado
00:03:38
su propio archivo
00:03:41
de explotar que se corresponde con el que
00:03:42
tenemos aquí y podemos movernos de uno a otro
00:03:45
entonces quiero que eso quede claro
00:03:47
que nosotros podemos crear tantas animaciones como queramos
00:03:48
en un mismo objeto y luego mediante
00:03:51
el animator gestionarlo
00:03:53
pero vamos a hacer que bote, podemos hacerlo
00:03:54
varias de varias formas la más cómoda ahora mismo para mí es la de darle el botón de grabar que como
00:03:56
cualquier programa de grabación significa que a partir de este momento cualquier modificación que
00:04:03
hagan en las propiedades de mi objeto por supuesto las de transformar la posición la escala la
00:04:08
rotación va a quedar registrado como un fotograma clave para luego interpolar ahora mismo no se ha
00:04:13
creado ningún fotograma clave pero si yo quisiese crearlo pues nada no tenía más que mover el objeto
00:04:19
veis lo estoy moviendo en el eje y y automáticamente como podemos ver se ha
00:04:25
creado un fotograma clave en que se ha creado una fotograma clave en los
00:04:30
parámetros de posición con la rueda del ratón podemos alejarnos en la línea de
00:04:33
tiempo entonces puedo ponerme por ejemplo en el fotograma 60 que es un
00:04:38
segundo pero estoy trabajando a 60 fotogramas por segundo y voy a hacer que
00:04:44
la pelota baje y además lo voy a hacer aquí directamente hasta aquí que toca el
00:04:49
suelo y me voy a ir al segundo en el fotograma 120 pues podría volver a subirlo y estaría si
00:04:56
me sé los parámetros después los puedo escribir aquí directamente y como estoy en el modo grabación
00:05:07
se crea bien pues ya tengo la pelota que bota podemos hacerlo con cualquier parámetro por
00:05:14
ejemplo si yo quiero que se escale cuando toca el suelo aquí yo en este caso no le voy a dar
00:05:20
grabar sino que directamente le voy a dar en add property y como podemos ver se nos abre la ventana
00:05:25
donde tienen todas las propiedades que podemos animar no todas se pueden animar y depende además
00:05:32
de qué objeto tengamos en este caso es un objeto 3d las luces tienen otras propiedades para animar
00:05:36
y en fin pero por ejemplo por supuesto tengo todas las propiedades de transform en este caso
00:05:41
la escala. Entonces le digo que añada aquí una propiedad de escala. De forma que yo le
00:05:46
voy a crear un fotograma clave aquí. Si hacemos un doble clic se nos crea allá donde hagamos
00:05:57
un clic. Entonces yo le puedo decir que en este punto tiene una escala y en este punto
00:06:05
por ejemplo la voy a achatar. Aquí sí le voy a dar a grabar de forma que entro en la
00:06:12
modificación de la escala y la escaló en la vertical y aquí le voy a decir que
00:06:19
tiene una escala de 1 y aquí tiene una escala de 1
00:06:26
de forma que cuando toca el suelo se deforma y ahí está voy a parar la
00:06:34
grabación podemos darle al play ahí tenemos una pelota que bota si queremos
00:06:41
actuar sobre las aceleraciones pues como los que ya hayáis tocado algo de
00:06:50
animación sabéis que lo más preciso es trabajar con curvas y esa opción la
00:06:54
tiene unity aquí abajo en curvas donde efectivamente podéis seleccionar la
00:06:58
propiedad que estáis animando en este caso por ejemplo el movimiento ni y viene
00:07:02
aquí tocando las tangentes de las animaciones o incluso con el botón
00:07:06
derecho si pinchamos sobre ella pues tenemos varias opciones para ajustar las
00:07:10
aceleraciones y cómo queremos que se comporte esto que hemos hecho ha sido
00:07:14
animar un objeto 3d ahora cómo se anima un objeto 2d pues prácticamente de la
00:07:18
misma forma, lo único que lo vamos a hacer mediante un atajo y es que si yo me voy a por ejemplo este
00:07:23
sprite que antes he recortado, veo por ejemplo que todo esto es una animación de correr, pero este
00:07:31
sprite animado no sólo tenía correr, por ejemplo tenía esta que es para saltar y para caer. Entonces
00:07:37
si yo selecciono todas las de correr, que es todas estas, las he seleccionado con la mayúscula y el
00:07:43
cursor, si yo las arrastro a nuestra escena, tal cual, todas seleccionadas, veremos que
00:07:49
me está pidiendo guardar una animación, es decir, lo mismo que hemos hecho antes,
00:07:57
de crear una animation y dónde lo guardo. Muy importante darle el nombre que represente
00:08:00
la animación, en este caso es la de correr, así que le voy a llamar run. Y si nos fijamos,
00:08:06
igual que hemos hecho antes animando un objeto 3D, se nos ha creado el animation y un animator
00:08:14
Controller que es el que luego va a gestionar las animaciones. Tenemos este personaje que ha
00:08:21
traído a la escena y si nos fijamos también tiene un componente animator vinculado al animator que
00:08:27
ha creado. Si yo ahora mismo le diese al play al juego efectivamente veremos que se ejecuta la
00:08:37
animación. Ahí está. Que se corresponde con esta de aquí. Recuerdo que si no tengo seleccionado
00:08:44
mi personaje, no me aparecerá aquí nada, pero en cuanto selecciono mi personaje
00:08:51
que tiene la animación creada, pues ahí están, voy a echarle hacia atrás
00:08:55
un truco, y es que si por ejemplo
00:08:58
quisiese que corriese más despacio, yo puedo seleccionar todos los keyframes
00:09:03
en este caso, cada keyframe se corresponde con un sprite
00:09:07
si nos fijamos, ya no modificamos propiedades, ya no modificamos
00:09:11
posiciones o escalas, sino que cada
00:09:15
keyframe representa una imagen. Pues bien, si seleccionamos todas y cogemos esta barra
00:09:19
que nos aparece, nos permite modificarlas todas de forma uniforme. Una cosa, aunque
00:09:27
ahora mismo no viene mucho a cuento, en este sprite está bien hecho y su último fotograma
00:09:43
corresponde perfectamente al fotograma anterior al primer fotograma, con lo cual la animación
00:09:47
es súper fluida. Pero hay veces en las que el último fotograma repite el primer fotograma
00:09:52
Y en ese caso se produce una especie de pausa porque hay un fotograma que se repite.
00:09:56
Cuando eso nos ocurra, veremos que si seleccionamos la animación, aquí en nuestro proyecto,
00:10:01
tiene aquí varias opciones. Una que es el loop time, que ahora no tiene efecto,
00:10:06
pero cuando vemos el animator sí que tiene efecto para que cuando termine la animación se pare.
00:10:10
Y tenemos aquí un loop pause, que lo que hace es, como bien dice ahí, hacer una animación sin juntas.
00:10:15
y entonces lo que hace es que el último fotograma se ejecuta al mismo tiempo
00:10:22
que el primero y entonces no se produce esa especie de pausa
00:10:27
pero bueno, en este caso insisto, está bien hecha así que no necesito, pero lógicamente este personaje
00:10:31
también tiene que saltar y como hemos visto antes
00:10:35
esta es la animación que hemos creado, ya la he llamado run
00:10:39
insisto, hay que ponerle bien los nombres, vamos a crear una nueva
00:10:43
muy importante, tenemos que seleccionar el elemento dentro de nuestra ventana
00:10:46
de jerarquía, ahora ya sí, nos permite desplegar y nos permite decirle crear un nuevo clip.
00:10:51
De nuevo nos pide que lo guardemos, muy importante, y a este le voy a llamar Jump. Está vacío
00:11:00
pero ahora sí, cojo los sprites, busco en los que está saltando, este y este y este
00:11:08
y este. Pues esos cuatro y los arrastro a mi animación.
00:11:16
Como podemos ver, ahora ya sí, estos sí que necesito
00:11:23
prolongarlos. A lo mejor los dos primeros
00:11:26
que vayan muy juntos, pero el siguiente ya que se quede ahí.
00:11:29
De hecho, en esta animación sí que me interesa, insisto que
00:11:37
aunque ahora no lo vamos a ver, sí que me interesa que no sea en bucle, porque lo que va a determinar
00:11:41
que pase de saltar a volver a correr no es que termine la animación.
00:11:45
es lo que haremos a continuación en el animator
00:11:48
pero eso sí, necesito que se quede quieto
00:11:52
por lo tanto voy a seleccionar esa animación
00:11:55
la de jump
00:11:57
y le voy a decir que loop time
00:11:58
en este caso, no
00:12:00
aquí se sigue ejecutando en bucle
00:12:02
pero no os preocupéis que luego en el animator
00:12:04
sí que se detendrá en el último fotograma
00:12:06
ya tenemos dos animaciones vinculadas a un sprite
00:12:08
en este caso a un personaje
00:12:11
y ahora tendríamos que ir al animator
00:12:13
al control de animaciones
00:12:15
para determinar cuándo pasa de una a otra
00:12:16
y ahí ya sí que tendremos que entrar en código, pero antes de hacerlo quiero que veamos una función muy útil en el Animation
00:12:18
y que nos va a servir para integrar las animaciones que hemos creado en eventos que creemos mediante código.
00:12:25
Para ello tenemos los llamados eventos.
00:12:31
Bien, para explicar lo que son los eventos voy a ir a mi animación anterior, que era la pelota que botaba,
00:12:33
la selecciono y como podemos ver es una pelota que bota, así más.
00:12:39
Bien, pues lo que yo quiero, por ejemplo, y esto es solo un ejemplo, es que cuando toque el suelo suene algo
00:12:43
Y eso lo podemos hacer, lógicamente, mediante código
00:12:51
Ya veremos más en detalle cómo crear sonidos o ejecutar sonidos
00:12:54
Pero lo único que necesito es que en un momento de la animación se ejecute un método, una función de un script
00:12:59
Eso se hace mediante los eventos
00:13:08
De hecho, lo primero que voy a hacer es a mi esfera añadirle un script, le voy a llamar bote, por ejemplo, le podemos llamar como queramos, como siempre, organización.
00:13:11
Bien, y si me voy a este script, voy a borrar los métodos que vienen por defecto, no los voy a usar en este caso, voy a crear el mío propio.
00:13:31
Va a ser un método, llamar por ejemplo sonido votar, no le pido ningún parámetro, luego veremos que sí que podemos pasarle parámetros a través de nuestra animación, pero no voy a hacer ahora que suene un sonido, solo voy a mandar algo a consola para que veamos que efectivamente funciona, luego ya más adelante lo podremos hacer todo lo complejo que queramos.
00:13:39
así que mando a consola
00:14:01
ha tocado suelo
00:14:05
y ahora volviendo a Unity
00:14:10
la cuestión está en cómo
00:14:13
desde el panel de Animation
00:14:15
puedo yo mandarle una orden
00:14:17
al script vinculado con este GameObject
00:14:19
pues muy sencillo
00:14:21
me pongo en el momento
00:14:22
en el que quiero que se ejecute
00:14:24
por ejemplo en este momento
00:14:26
que es cuando ha tocado el suelo
00:14:27
y aquí lo tenemos
00:14:28
añadir evento
00:14:30
es este botoncito de aquí
00:14:31
Add Event
00:14:33
y veremos que se nos abre
00:14:34
el inspector de ese evento
00:14:36
que lo podemos volver, vemos que se ha añadido aquí un evento
00:14:39
y podemos siempre volver a él y clicarle
00:14:42
y nos pregunta qué función queremos o qué método
00:14:44
queremos que ejecute cuando pase por ese punto
00:14:48
entonces le voy a poner, como podéis ver, aparece la función
00:14:51
sonido botar. Voy a abrir el panel
00:14:54
de consola, que no lo tengo abierto ahora mismo
00:14:57
lo voy a poner aquí para que lo veamos, clear
00:15:00
y ahora si ejecutamos el juego
00:15:04
veremos que la pelota bota y efectivamente cada vez que toque el suelo
00:15:07
veis, manda a consola
00:15:12
ese mensaje, y ahora mismo
00:15:16
esa función no exige ninguna variable
00:15:20
pero nosotros se lo podemos dar, por ejemplo el método sonido botar
00:15:24
me pide una variable de tipo string que se va a llamar
00:15:28
mensaje, y le digo
00:15:32
mensaje del evento concatenado
00:15:35
con la variable. Veremos que al seleccionar
00:15:44
el evento, y si nos fijamos ahora en el inspector, no sólo
00:15:48
tenemos que decir qué función se tiene que ejecutar, sino también qué parámetro nos está
00:15:52
pidiendo esa función, concretamente una variable de tipo string.
00:15:56
Pues le voy a decir hola mundo. Con lo cual,
00:16:00
si ahora lanzo el juego y nos vamos a la consola, veremos que cada vez
00:16:04
que la pelota bota
00:16:08
me sale el mensaje
00:16:10
hola mundo
00:16:12
y con esto ya tenemos una herramienta tremenda
00:16:14
para crear animaciones
00:16:16
ya sea en 2D o en 3D
00:16:18
y vincularlo con el código
00:16:20
y ya de nuevo como siempre ocurre
00:16:22
con el tema de la programación
00:16:24
la imaginación es el límite
00:16:25
- Idioma/s:
- Materias:
- Informática, Imagen y Sonido
- Niveles educativos:
- ▼ Mostrar / ocultar niveles
- Formación Profesional
- Ciclo formativo de grado superior
- Primer Curso
- Segundo Curso
- Autor/es:
- Álvaro Holguera
- Subido por:
- Alvaro H.
- Licencia:
- Reconocimiento - No comercial - Sin obra derivada
- Visualizaciones:
- 79
- Fecha:
- 10 de noviembre de 2024 - 21:25
- Visibilidad:
- Público
- Centro:
- CFP JOSÉ LUIS GARCI
- Duración:
- 16′ 28″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1280x720 píxeles
- Tamaño:
- 533.31 MBytes
