Animación de sprite: Ciclo de caminata
El clásico. Un ciclo de caminata repite dos pasos: contacto, bajada, paso y subida, para cada pie. El nuestro mantiene los pies fijos en los fotogramas de contacto para que el personaje no patine.
Sprite sheet PNG + datos de fotogramas en JSON. Gratis para cualquier proyecto, incluidos juegos comerciales.
Especificaciones
- Fotogramas
- 8
- FPS sugeridos
- 9
- Tamaño de fotograma
- 42×68
- Tipo
- Loop
- Vista
- Vista lateral
Pon a tu personaje en este movimiento
Describe o sube un personaje y lo vestimos sobre este mismo movimiento: mismo timing, mismos contactos de los pies, tu arte.
Cuesta 10 créditos
Usa la animación Ciclo de caminata en tu motor
La hoja es una sola fila (o unas pocas filas) de fotogramas del mismo tamaño sin márgenes, así que cualquier motor puede cortarla por tamaño de fotograma. Aquí tienes la configuración mínima para los motores más comunes, ya completada con el número de fotogramas, el tamaño y la velocidad de este movimiento.
Este movimiento es un loop: configura la animación para que se repita y se reproducirá sin cortes.
Godot 4
# AnimatedSprite2D > SpriteFrames > "Add frames from sprite sheet"
# Horizontal: 8, Vertical: 1, select all 8 frames.
$AnimatedSprite2D.sprite_frames.set_animation_speed("walk", 9)
$AnimatedSprite2D.sprite_frames.set_animation_loop("walk", true)
$AnimatedSprite2D.play("walk")
# Project Settings > Rendering > Textures > Default Texture Filter = Nearest Unity
// Texture: Sprite Mode = Multiple, Filter = Point, Compression = None // Sprite Editor > Slice > Grid By Cell Size: 42 x 68 // Drag all 8 sprites into the scene to create the clip, then: // Animation window > Samples = 9, Loop Time = on
Phaser 3
this.load.spritesheet("walk", "walk.png", { frameWidth: 42, frameHeight: 68 });
// in create():
this.anims.create({
key: "walk",
frames: this.anims.generateFrameNumbers("walk", { start: 0, end: 7 }),
frameRate: 9,
repeat: -1,
});
player.play("walk"); // with pixelArt: true in the game config Fotograma a fotograma
Todos los fotogramas de la hoja del maniquí, en orden. Úsalos como referencia de timing cuando dibujes tus propios fotogramas, o para elegir el fotograma en el que debe reaccionar la jugabilidad.
Preguntas sobre este movimiento
¿Puedo usar la hoja del maniquí en un juego comercial?
Sí. Las sprite sheets del maniquí se pueden usar gratis en cualquier proyecto, incluidos los comerciales. Se agradece el crédito, pero no es obligatorio.
¿Cómo pongo mi propio personaje en esta animación Ciclo de caminata?
Abre el generador, describe o sube tu personaje y elige este movimiento. La IA viste a tu personaje sobre exactamente el mismo timing y las mismas poses, así que el resultado coincide con el maniquí fotograma a fotograma.
¿Por qué mis fotogramas se ven borrosos en el motor?
Tu motor está filtrando la textura. Pon el filtro en Nearest (Godot), Point (Unity) o pixelArt: true (Phaser) para que cada píxel se mantenga nítido.