Animación de UI

Curso de Animación y Arte de Videojuegos 2D

Contenido del curso

Conocer los fundamentos técnicos de los videojuegos

Conceptualizar personajes y escenarios del videojuego

Crear el arte conceptual del videojuego

Aplicar principios de animación a un personaje

Integrar Assets del videojuego a Unity

Implementar UI responsiva del videojuego

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:18

Animación de UI

Curso de Animación y Arte de Videojuegos 2D

Clase 28 de 30

Clase 28 / 30

Recursos

¿Cómo crear animaciones para iconos utilizando anime?

Las animaciones son una poderosa herramienta en el diseño y desarrollo de videojuegos, permitiendo dar vida a los personajes y elementos del juego de una manera dinámica y atractiva. En esta ocasión, te mostraré cómo se pueden usar animaciones para darle vitalidad a los iconos dentro del juego, específicamente al icono del corazón en la esquina superior izquierda de la pantalla. Esta técnica puede ser reutilizada para cualquier otro icono o elemento visual en tu proyecto.

¿Cómo comenzar con la animación del icono?

Primero, es necesario seleccionar el icono que deseamos animar —en este caso, el icono de corazón— y organizar el proyecto de manera coherente. Recomiendo crear una carpeta específicamente para las animaciones dentro del directorio del proyecto para mantener todo bien organizado.

Seleccionar el icono del corazón: Este será nuestro objeto de animación.
Crear una carpeta de animaciones: Dentro, guarda todas las animaciones relacionadas a este elemento.

¿Cómo simular la palpitación del corazón?

El objetivo es que el icono de corazón transmita la sensación de que está palpitando. Comenzaremos por cambiar su escala en la línea de tiempo.

Escala inicial: La escala del icono comienza en 1, representando su tamaño real.
Manipular la línea de tiempo: Usa el botón de récord para bajar el tamaño del icono en ciertos cuadros, logrando que parezca que está palpitando.

Para crear una animación realista y continua, añade aceleración usando keyframes:

Agregar keyframes manualmente: Esto permite controlar cómo el corazón crece y decrece en tamaño, logrando el ritmo de palpitar.

¿Cómo cambiar el color del icono al palpitar?

Cambiar el color del icono añade una capa visual interesante a la animación. Mientras el corazón palpita, puedes cambiarlo a un tono más oscuro, simulando un efecto de latido más dramático.

Tintado de color inicial: El icono debe respetar los colores originales, comenzando en blanco.
Cambiar el color al bajar la palpitación: En los momentos de cambio de tamaño, ajusta el color a un tono más oscuro.

¿Cómo utilizar las curvas para pulir la animación?

Las curvas son fundamentales para suavizar y perfeccionar las transiciones de tu animación.

Visualizar las curvas: En la pestaña de curvas, puedes ver una representación gráfica de la animación.
Comprender las curvas: Las curvas con aceleración y desaceleración ayudan a darle ritmo natural al latido.
Ajustar los manejadores: Esto permite controlar la rapidez y suavidad con las que cambia la escala y el color del corazón.

¿Cómo asegurarse de que las animaciones sean rápidas y efectivas?

La velocidad de la animación impacta directamente en su percepción. Para ajustar la velocidad:

Mover keyframes horizontalmente: Desplazar los keyframes en el eje X hace que la animación se ejecute más rápido.
Controlar la escala final: Asegúrate de que en el pico de la animación, el tamaño sea adecuado sin perder el efecto visual deseado.

Este proceso no solo te permite crear la animación de palpitación que deseas, sino que también te sirve como base para cualquier otra animación que necesites implementar. Con práctica, el uso de keyframes y curvas te permitirá ofrecer experiencias más inmersivas y detalladas a tus usuarios. ¡Anímate a experimentar y ajustar las animaciones según tus necesidades personales y del proyecto!

Conocer los fundamentos técnicos de los videojuegos

Qué aprenderás sobre animación y arte de videojuegos 2D

Entornos de trabajo para juegos móviles

Análisis de juegos

Análisis de legibilidad de videojuegos

Conceptualizar personajes y escenarios del videojuego

Diseño de personajes

Diseño de escenarios

Ideación y definición

Referencias y moodboard

Crear el arte conceptual del videojuego

Construcción de personaje: Silueta

Construcción de personaje: Línea

Construcción del personaje: Color

Diseño de escenarios

Definición del estilo del videojuego

Aplicar principios de animación a un personaje

12 principios de animación

Creación de Sprites

Photoshop para animación

Referencias para animación

Ciclo de Caminado

Preparando assets para Unity

Integrar Assets del videojuego a Unity

Introducción a Unity

Generar Tilesets

Árbol de animación del personaje

Implementación de animación por código

Mover el personaje

Implementar UI responsiva del videojuego

Análisis de UI para videojuegos

Implementación de UI en Unity

Diseño responsivo

Animación de UI

Funcionalidad de botones

Cierre del curso

Animación de UI