Qué aprenderás
- Prepara un personaje que pueda animarse
- Construye poses clave antes de añadir cuadros
- Haz un ciclo de caminar de cuatro fotogramas
- Controla el ritmo con los FPS
Pixel Studio de Pixambas y un navegador moderno; puedes comenzar sin crear cuenta.
Esta ruta amplía los cursos básicos con prácticas y comprobaciones que puedes realizar en Pixambas. Abrir Pixel Studio →
Mi progreso
Guarda el avance de este curso en este navegador.
Prepara un personaje que pueda animarse
Empieza con una figura sencilla de 32×32 píxeles. Deja espacio para brazos, piernas y movimientos de cabeza; una silueta muy compacta dificulta notar los cambios. Decide si lo verás de perfil o de frente y anota su altura base.
Pasos
- Crea un proyecto de 32×32 con fondo transparente y una capa de boceto.
- Dibuja cabeza, torso y extremidades con cuatro o cinco colores.
- Marca en tu guía el suelo, el centro del personaje y su altura.
Ejemplo explicado
Si los pies están siempre en la fila 28, evitarás que el personaje parezca flotar entre cuadros.
Práctica
Prepara un personaje reconocible a tamaño real y guarda un archivo de proyecto.
Qué evitar: Error común: comenzar con demasiados detalles antes de comprobar que se entiende la silueta.
Construye poses clave antes de añadir cuadros
Un ciclo se entiende mejor cuando empiezas con las poses de contacto y de paso. La posición de brazos y piernas debe alternarse para producir la sensación de movimiento. Puedes exagerar ligeramente la postura para mejorar la lectura a tamaños pequeños.
Pasos
- Duplica el fotograma inicial y crea la primera pose de contacto.
- Duplica otra vez e invierte la posición principal de piernas y brazos.
- Alterna las dos poses a velocidad lenta y corrige la silueta.
Ejemplo explicado
En una vista lateral, una pierna puede adelantarse mientras el brazo contrario va hacia delante.
Práctica
Dibuja dos poses diferenciadas que se reconozcan sin reproducir la animación.
Qué evitar: Error común: mover solo los pies y dejar totalmente rígido el torso.
Haz un ciclo de caminar de cuatro fotogramas
El ciclo básico puede utilizar contacto A, paso A, contacto B y paso B. No es una regla universal: es un punto de partida para aprender continuidad. Mantén constante el tamaño del personaje y comprueba que el pie que soporta el peso no salte sin razón.
Pasos
- Organiza cuatro fotogramas en el orden contacto, paso, contacto inverso, paso inverso.
- Usa papel cebolla para comparar pies, cabeza y caderas.
- Reproduce en bucle y revisa el movimiento tanto ampliado como a escala real.
Ejemplo explicado
Si la cabeza sube un píxel en los pasos y baja en los contactos, se percibirá un pequeño rebote.
Práctica
Entrega una caminata de cuatro fotogramas y anota qué mejorarías tras verla a tamaño real.
Qué evitar: Error común: cambiar la altura total del personaje en cada cuadro sin una razón física.
Controla el ritmo con los FPS
FPS significa fotogramas por segundo. Una secuencia de cuatro cuadros a ocho FPS tarda medio segundo en completarse; al reducir el valor se reproduce más lentamente. Los dibujos siguen siendo los mismos: cambia su duración percibida.
Pasos
- Prueba tu caminata a 4, 8 y 12 FPS.
- Observa si los pasos se leen o si parecen demasiado rápidos.
- Elige una velocidad y verifica el bucle durante al menos diez repeticiones.
Ejemplo explicado
Cuatro fotogramas a 8 FPS dan una vuelta cada 0,5 segundos: útil como referencia, no como velocidad obligatoria.
Práctica
Selecciona un ritmo cómodo y explica por qué ese FPS favorece tu personaje.
Qué evitar: Error común: agregar muchos cuadros para arreglar un problema que en realidad es de ritmo.
Añade reposo y movimiento secundario
Una animación de reposo puede ser mínima: respiración, parpadeo o una prenda que se mueve. Distingue los movimientos principales de los secundarios; si todo cambia a la vez, el personaje pierde legibilidad. Trabaja con pocos colores para mantener consistencia.
Pasos
- Crea una copia de tu personaje antes de cambiar de animación.
- Dibuja dos o tres cuadros de respiración o parpadeo sin desplazar los pies.
- Reproduce el reposo y comprueba que no parezca una caminata.
Ejemplo explicado
Un parpadeo de un solo fotograma dentro de una secuencia más larga puede resultar suficiente.
Práctica
Entrega una animación de reposo y compárala visualmente con el ciclo de caminar.
Qué evitar: Error común: introducir desplazamientos grandes en una animación que debería ser tranquila.
Exporta hojas de sprites y comprueba el resultado
Una Sprite Sheet es una imagen que contiene los fotogramas ordenados. En Pixambas puedes exportar en horizontal, vertical o cuadrícula. Para GameMaker utiliza una tira horizontal con nombre _stripN; para Godot o Unity utiliza una cuadrícula regular que puedas dividir en celdas del tamaño correcto. Estos presets no instalan complementos en los motores.
Pasos
- Selecciona «Hoja de sprites (todos)» en Exportar y mantén escala 1 para recursos de Pixel Art.
- Para GameMaker elige Horizontal, activa _stripN y comprueba el número de cuadros.
- Para Godot o Unity elige Cuadrícula, comprueba filas/columnas e importa separando por celda.
Ejemplo explicado
Con cuatro cuadros de 32×32, una tira horizontal mide 128×32 píxeles; una cuadrícula de dos columnas mide 64×64.
Práctica
Exporta una tira y una cuadrícula, comprueba dimensiones y prueba al menos una importación.
Qué evitar: Error común: exportar con bordes o escalas distintas y después cortar los cuadros incorrectamente.
Proyecto final
Reúne los ejercicios de los seis módulos. Exporta una imagen PNG y una copia de tu proyecto editable. Comprueba el resultado a tamaño real y escribe qué mejorarías en una segunda versión.
Abrir Pixel Studio →Comprueba lo que aprendiste
Recursos de importación
Documentación de Godot · Documentación de Unity
Los archivos guardados en este navegador no se sincronizan entre dispositivos. Descarga una copia de tu proyecto.