Sprites, animaciones y estados para personajes en Construct

Importar y crear sprites (con buenas prácticas desde el inicio)

En Construct, un Sprite es el objeto visual 2D más común: puede tener varias animaciones, cada una con varios fotogramas. La clave para que un personaje “se sienta” bien es preparar correctamente: origen (punto de referencia), colisiones (hitbox) y escala (consistencia visual).

Crear un Sprite desde cero

• Inserta un objeto Sprite en tu proyecto.
• Se abrirá el editor de imágenes. Puedes dibujar algo simple o importar una imagen.
• Renombra el objeto con un nombre claro, por ejemplo: Player o Hero.

Importar spritesheets o imágenes sueltas

En el editor de animaciones del Sprite, puedes importar recursos de varias formas:

• Imágenes sueltas: ideal si tienes archivos separados por frame (por ejemplo walk_01.png, walk_02.png).
• Spritesheet: una sola imagen con muchos frames. Útil, pero requiere recorte (slicing) correcto.

Recomendación práctica: si estás aprendiendo, empieza con imágenes sueltas para evitar errores de recorte y alineación.

Punto de origen (Origin): el “ancla” del personaje

El Origin es el punto desde el cual Construct posiciona, rota y escala el Sprite. También afecta cómo “se siente” el personaje al cambiar de animación: si el origen cambia entre animaciones, el personaje parecerá temblar o desplazarse.

Dónde colocar el origen

• Personajes de plataforma: suele funcionar bien en el centro inferior (entre los pies). Así, al aterrizar o cambiar de frame, el contacto con el suelo es consistente.
• Top-down: suele usarse el centro o el centro inferior si quieres que “pise” el suelo.

Guía rápida para fijar el Origin de forma consistente

• Abre el Sprite y selecciona una animación (por ejemplo idle).
• En el editor, activa la herramienta de Origin y colócalo en el punto deseado (ej.: centro inferior).
• Repite en cada animación y verifica que el Origin quede en el mismo lugar relativo (misma “altura de pies”).

Consejo: si tus frames tienen tamaños distintos, primero estandariza el lienzo (canvas) o recorta de forma uniforme para que el Origin sea fácil de mantener.

Continúa en nuestra aplicación.

• Escuche el audio con la pantalla apagada.
• Obtenga un certificado al finalizar.
• ¡Más de 5000 cursos para que explores!

O continúa leyendo más abajo...

Descargar la aplicación

Colisiones: cajas (bounding box) y polígonos (collision polygon)

Las colisiones determinan cuándo el personaje toca el suelo, paredes, enemigos o ataques. En Construct puedes usar colisión por caja (rápida, simple) o por polígono (más precisa).

Bounding box vs Collision polygon

Buenas prácticas para hitboxes de personaje

• La hitbox del cuerpo (colisión principal) suele ser más simple que el dibujo: evita que una mano o arma “choque” con paredes.
• Mantén la hitbox estable entre animaciones. Si cambia mucho, el personaje puede engancharse en esquinas o “flotar”.
• Separa conceptos: hitbox de cuerpo (para moverse) y hitbox de ataque (para golpear). Si lo mezclas en una sola colisión, tendrás comportamientos extraños.

Cómo editar el polígono de colisión

• En el editor del Sprite, busca la opción de Editar polígono de colisión.
• Ajusta los puntos para rodear el cuerpo principal (torso/piernas), ignorando partes “decorativas”.
• Prueba con una forma de 6–10 puntos como máximo para mantenerlo simple.

Animaciones: idle, caminar, salto y ataque

Una animación en Construct es una colección de frames con velocidad y opciones como bucle. Para un personaje base, lo típico es:

• idle: quieto, en bucle suave.
• walk o run: movimiento horizontal, en bucle.
• jump: puede ser un frame o varios; normalmente no en bucle.
• attack: no en bucle; al terminar, vuelve a idle o walk.

Configuración recomendada por animación

Evitar el “temblor” al cambiar de animación

• Usa el mismo tamaño de frame/canvas en todas las animaciones.
• Coloca el Origin en el mismo punto relativo.
• Si el arma se extiende, no agrandes el canvas de forma irregular: mejor deja espacio desde el inicio.

Estados para controlar transiciones (sin programar, con lógica visual)

Para que el personaje cambie de animación correctamente, conviene pensar en estados. Un estado es una etiqueta que describe qué está haciendo el personaje: quieto, caminando, saltando, atacando, etc. En Construct puedes representarlo con variables del objeto (Instance Variables) o con variables globales si lo necesitas para varios objetos.

Variables recomendadas (en el objeto Player)

• state (texto o número): estado actual (por ejemplo: 0=idle, 1=walk, 2=jump, 3=attack).
• isGrounded (booleano o 0/1): si está en el suelo.
• facing (1 o -1): dirección (derecha/izquierda) para voltear el sprite.
• attackLock (0/1): bloquea cambios de animación mientras dura el ataque.

Idea clave: la animación debe ser consecuencia del estado. Evita “forzar” animaciones desde muchos sitios; en su lugar, define el estado y deja que una sección de eventos se encargue de reproducir la animación correcta.

Ejemplo de tabla de estados

Estandarizar tamaños y escalas para consistencia visual

La consistencia visual evita que tu personaje parezca cambiar de tamaño entre animaciones o que no encaje con el entorno.

Checklist de consistencia

• Mismo tamaño de canvas para todos los frames del personaje (por ejemplo 128x128 o 256x256).
• Misma escala del Sprite en el juego (evita escalar cada instancia “a ojo”).
• Proporción coherente con otros elementos (puertas, plataformas, enemigos).
• Pixel art: si usas pixel art, evita escalados no enteros (por ejemplo 1.5x) para no generar blur; usa 2x, 3x, etc. y configura sampling según tu estilo.

Recomendación de flujo

• Define una “altura objetivo” del personaje (ej.: 96 px o 1.8 m equivalentes en tu mundo).
• Ajusta todos los sprites del personaje para que respeten esa altura.
• Si necesitas cambiar tamaño, hazlo de forma global (misma escala para todas las animaciones).

Práctica guiada: preparar un personaje completo con 4 animaciones y estados

Objetivo: tendrás un objeto Player con animaciones idle, walk, jump, attack, con Origin consistente, hitbox ajustada y variables/estados para controlar la lógica visual.

Paso 1: crear el objeto Player y sus animaciones

• Inserta un Sprite y nómbralo Player.
• Abre el editor de animaciones.
• Crea/renombra la primera animación como idle e importa sus frames.
• Agrega una animación nueva walk e importa frames.
• Agrega una animación nueva jump e importa frames (puede ser 1 frame si no tienes más).
• Agrega una animación nueva attack e importa frames.

Paso 2: configurar bucles y velocidades

• idle: activar bucle, 4–8 fps.
• walk: activar bucle, 8–14 fps.
• jump: desactivar bucle, 8–12 fps (o 0 si es un frame).
• attack: desactivar bucle, 10–16 fps.

Paso 3: estandarizar tamaño de frames/canvas

• Verifica que todas las animaciones tengan el mismo tamaño de imagen.
• Si un frame es más grande, ajusta el canvas para que todos coincidan (misma anchura/altura).
• Revisa visualmente que los pies queden a la misma altura en cada animación.

Paso 4: fijar el Origin (centro inferior) en todas las animaciones

• En idle, coloca el Origin en el centro inferior (entre los pies).
• Cambia a walk, coloca el Origin en el mismo punto relativo.
• Repite en jump y attack.

Paso 5: ajustar hitbox (colisión principal) estable

• Edita el polígono de colisión para que cubra torso y piernas.
• Evita incluir el arma o brazos extendidos si eso causaría choques injustos.
• Comprueba que la hitbox no cambie drásticamente entre frames (si cambia, simplifica o ajusta).

Paso 6: crear variables de estado en el objeto

En las propiedades del objeto Player, crea Instance Variables:

• state (Number) valor inicial 0.
• isGrounded (Number) valor inicial 1.
• facing (Number) valor inicial 1.
• attackLock (Number) valor inicial 0.

Paso 7: definir reglas de transición (lógica visual por estados)

En tu hoja de eventos, crea un bloque dedicado solo a “Animación por estado”. La idea es: primero decides el estado, luego reproduces la animación correspondiente.

Ejemplo de reglas (conceptuales) para decidir el estado:

• Si attackLock=1 → mantener state=3.
• Si no está atacando y isGrounded=0 → state=2 (jump).
• Si está en el suelo y la velocidad horizontal es distinta de 0 → state=1 (walk).
• Si está en el suelo y no se mueve → state=0 (idle).

Ejemplo de reglas (conceptuales) para reproducir animación:

• Si state=0 → set animation idle.
• Si state=1 → set animation walk.
• Si state=2 → set animation jump.
• Si state=3 → set animation attack.

Paso 8: controlar el ataque con bloqueo y fin de animación

• Cuando se active el ataque (por ejemplo, al presionar un botón), establece attackLock=1 y state=3, y reinicia la animación de ataque desde el frame 0.
• Cuando la animación attack termine, establece attackLock=0. Luego el estado volverá a idle o walk según corresponda.

Esto evita que el personaje cambie a walk a mitad del ataque solo porque se está moviendo.

Paso 9: voltear el personaje sin duplicar animaciones

Para mirar a izquierda/derecha sin crear animaciones separadas:

• Actualiza facing a 1 o -1 según la dirección.
• Aplica el volteo horizontal (mirror/flip) o escala X negativa según tu configuración.

Regla práctica: decide una dirección “base” (por ejemplo, mirando a la derecha) y voltea cuando facing=-1.

Paso 10: verificación rápida (lista de control)

• Al cambiar entre idle y walk, el personaje no “salta” de posición (Origin consistente).
• La hitbox no crece/encoge de forma notable entre frames.
• attack se reproduce completa y luego vuelve a idle/walk.
• El tamaño del personaje se ve igual en todas las animaciones (canvas y escala consistentes).