Cuadros y línea de tiempo en Aseprite

Curso de Introducción al Pixel Art y Animaciones con Aseprite

Contenido del curso

Introducción al pixel art

Descubriendo Aseprite

Hablemos de color

Tips para crear sprites profesionales

Introduccion a la animación en Aseprite

Proyecto

20
Crea tu avatar en pixel art paso a paso
16:39 min

Continúa aprendiendo pixel art

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:48

Cuadros y línea de tiempo en Aseprite

Curso de Introducción al Pixel Art y Animaciones con Aseprite

Clase 18 de 22

Clase 18 / 22

Recursos

Animar en Aseprite empieza por entender los cuadros, esos pequeños círculos en la línea de tiempo que representan cada dibujo individual de una animación. Dominar cómo funcionan los cuadros en Aseprite te permite controlar tiempos, opacidades y movimientos para dar vida a tus sprites, ya seas principiante en pixel art o quieras pulir tus primeras animaciones.

¿Qué son los cuadros en Aseprite y cómo se ven en la línea de tiempo?

Cada cuadro es un dibujo individual dentro de tu animación. En la línea de tiempo, que abres y cierras con la tecla Tab, los cuadros aparecen como pequeños círculos. Si no hay círculo, ese cuadro está vacío.

Una animación de 35 cuadros significa, literalmente, 35 dibujos secuenciales. Y aquí viene lo interesante: cada cuadro puede comportarse de manera independiente, incluso cuando comparten la misma capa.

¿Qué es un cuadro en animación? Es cada dibujo individual que compone el movimiento. En Aseprite se representa con un círculo en la línea de tiempo y al reproducirse en secuencia genera la ilusión de animación.

¿Cómo cambiar la opacidad de un solo cuadro sin afectar la capa?

Si bajas la opacidad de la capa completa, todos los cuadros se vuelven transparentes. Pero si haces doble clic en un cuadro y entras a cell properties, puedes ajustar la opacidad solo de esa celda [02:00]. Así controlas transiciones suaves, como un sprite que aparece o desaparece gradualmente.

¿Cómo modificar la duración de cada cuadro de animación?

No todos los cuadros tienen que durar lo mismo. Esta es una de las herramientas más poderosas para darle ritmo a una animación.

Dando clic en un cuadro abres un submenú donde defines su duración en milisegundos. Entre más bajo el número, más rápido pasa ese cuadro. Si pones 10, ese cuadro vuela; si pones 500, se queda casi congelado.

También puedes seleccionar varios cuadros a la vez, dar clic derecho en frame properties y aplicar un tiempo común. Esto sirve cuando quieres que una acción se sienta veloz y otra se tome su tiempo.

Tiempo bajo (10 a 40 ms): movimientos rápidos, impactos, disparos.
Tiempo medio (80 a 120 ms): caminatas, animaciones idle.
Tiempo alto (200 ms o más): pausas dramáticas o estados de espera.

Después de definir tiempos, prueba la reproducción para sentir si el ritmo acompaña la acción.

¿Cómo copiar, duplicar y crear cuadros nuevos?

Los cuadros funcionan igual que cualquier gráfico: puedes seleccionar uno, presionar Ctrl + C y pegar con Ctrl + V en otro cuadro vacío o reemplazar su contenido.

Para duplicar, simplemente arrastras o usas la opción de duplicado y obtienes una copia exacta. Para crear desde cero, das clic derecho en la línea de tiempo y eliges entre dos opciones:

new frame: crea una copia del cuadro anterior, útil cuando quieres modificar pequeños detalles sobre la base previa.
new empty frame: crea un cuadro completamente vacío, ideal cuando un sprite sale del lienzo o necesitas empezar de cero.

¿Para qué sirve la opción link cells en Aseprite?

La función link cells une celdas para que se comporten como una sola [04:30]. Si modificas un cuadro vinculado, el cambio se replica automáticamente en todos los cuadros enlazados.

Lo más útil es que puedes vincular cuadros que ni siquiera están pegados. Seleccionas con Shift los cuadros que quieras, aplicas link cells y cualquier edición se aplica a todos al mismo tiempo. Perfecto para fondos repetidos o elementos estáticos que aparecen en varios momentos de la animación.

¿Qué hace link cells en Aseprite? Une varias celdas para que compartan el mismo contenido. Editar una modifica todas las vinculadas al instante, aunque no estén juntas en la línea de tiempo.

¿Cómo animar una pelota desde cero en Aseprite?

Para entender el flujo completo, nada mejor que un ejemplo simple: una pelota que crece, se mueve y desaparece.

En el primer cuadro dibujas la pelota. En el siguiente frame, la mueves y la haces un poco más grande. Repites el proceso agregando frames hasta que alcance el tamaño deseado. Después usas la herramienta de mover para desplazarla por el lienzo, dándole un salto grande al final para sugerir impulso [06:30].

Cuando el sprite sale del cuadro, no necesitas borrarlo manualmente: usas un empty frame y listo. Sobre los cuadros finales, vas bajando la opacidad de forma gradual para crear un fade out. Si además le pones una duración corta, como 40 ms, la pelota parece ir como bala.

¿Cómo animar sprites más complejos como un personaje?

Con un sprite tipo perrito, la lógica cambia: en lugar de transformaciones grandes, trabajas con movimientos sutiles. Bajar un píxel la cabeza, mover el sombrero, aplastar ligeramente la pancita.

Esa sutileza es la clave cuando empiezas. No te abrumes intentando coreografías complejas. Una animación de respiración o un idle básico se construye duplicando un frame, seleccionando una zona y bajándola un píxel. Luego replicas ese patrón en los cuadros siguientes y ya tienes movimiento orgánico.

Como reto, toma uno de los sprites que ya creaste en el curso y hazle una animación sencilla. Si tienes la versión completa de Aseprite, expórtalo como GIF; si no, graba la pantalla y compártelo en los comentarios para verlo.

Alfredo Castro

Hace 4 años

Línea de tiempo: cuadros

Cuadros (Frames)

Los cuadros son los dibujos individuales que forman una animación en Aseprite. Están representados por círculos en tu línea de tiempo.

Cuando no hay círculos rellenos en el cuadro quiere decir que no hay gráficos en el lienzo en ese cuadro
podemos cambiar la opacidad a la capa y esto se aplica para todos los cuadros y también podemos cambiar la opacidad solo a un cuadro, esto lo hacemos dado clic derecho sobre la opción que nos interese
se puede modificar la velocidad a la que se reproduce el cuadro, esto lo hacemos dando clic derecho sobre el número de cuadro que nos interesa modificar
Podemos copiar, pegar y reemplazar cuadros con las opciones de Ctrl + C, Ctrl + V, etc.
La opción New Frame nos hace una copia del cuadro anterior
Link Cells → unir cuadros de animación, para hacer una fusión y aplicar estilos

💡 Si seleccionamos un cuadro, presionamos Shift y luego seleccionamos otro cuadro, el sistema los une aunque no sean cuadros consecutivos

Comentarios (52)52 comentarios

Fernando Evelio Rivera Flores

Unrisa Fula Miguel Angel

Diaz Mauricio

Gregorio Almazán

Josue Hernandez

Profesor

Sebastián Melo

Diana Castaño Zapata

Deysi Marín Velásquez

christopher malebrán

Joseal Pantoja Durán

Jose Antonio Olpo Vilca

Gerson Armando Lopez Duran

Hace 3 años

Oscar Bermudez

Natalia Sarahí Muñoz Verarubin

Katherine Verde

Melisa Ahumada

Jahiro Bojorquez Uriarte

Pablo Vásquez

Damian Alquinga

Christian Bannert

SEBASTIAN OROZCO GOMEZ

Alejandro Barriga Gasca

Luis Miguel Villarreal Peña

Introducción al pixel art

Qué es el pixel art y para qué sirve

Qué es pixel art y por qué usarlo

Anti-aliasing, Pixel Perfect y Dithering

Descubriendo Aseprite

Qué es Aseprite y por qué usarlo

Herramientas básicas de Aseprite para sprites

Varita mágica para limpiar sprites en Aseprite

Cómo usar el menú de capas en Aseprite

Rotar y reflejar sprites en Aseprite

Reemplaza y unifica colores en Aseprite

Hablemos de color

Modos de color de Aseprite

Paletas de color en Aseprite: 3 métodos

Tips para crear sprites profesionales

Simetría y reflejo en Aseprite

Tiles en Aseprite: modo tiled sin costuras

Cómo usar outline en Aseprite

Brochas personalizadas para texturas en Aseprite

Gradientes y dithering en Aseprite

Cómo exportar GIFs y sprite sheets en Aseprite

Introduccion a la animación en Aseprite

Cuadros y línea de tiempo en Aseprite

Piel de cebolla y etiquetas

Proyecto

Crea tu avatar en pixel art paso a paso

Continúa aprendiendo pixel art

Qué sigue después de terminar el curso

Pixel Art en cine, moda y videojuegos

Cuadros y línea de tiempo en Aseprite

Progreso del curso

Introducción al pixel art

Descubriendo Aseprite

Hablemos de color

Tips para crear sprites profesionales

Introduccion a la animación en Aseprite

Proyecto

Continúa aprendiendo pixel art

Recursos

Recursos