Creando Personajes Animados 2D en Godot 4: Diseñando y Programando Movimiento

🚀 Introducción: Dando Vida a tus Personajes 2D en Godot 4

Crear personajes con movimiento y personalidad es uno de los aspectos más gratificantes del desarrollo de videojuegos. En Godot 4, el proceso es intuitivo y potente, permitiéndonos transformar una colección de imágenes estáticas en un héroe o villano dinámico.

Este tutorial te proporcionará las herramientas y el conocimiento necesario para:

• Importar y configurar tus assets 🎨
  
• Crear y gestionar animaciones con el nodo AnimationPlayer ✨
  
• Programar el movimiento y la lógica de los estados del personaje 🎮

¡Prepárate para dar los primeros pasos en la animación de tus propios héroes pixelados!

🎨 Preparación de Assets: Spritesheets y Recortes

Antes de sumergirnos en Godot, necesitamos nuestros assets. Para personajes 2D, lo más común es usar spritesheets, que son imágenes grandes que contienen múltiples fotogramas de animación.

🖼️ ¿Qué es un Spritesheet?

Un spritesheet es una única imagen que agrupa varios frames (cuadros) de animación de un personaje o elemento del juego. Esto optimiza el rendimiento al cargar una sola textura en lugar de múltiples imágenes individuales.

✅ Obtener y Organizar tus Sprites

Para este tutorial, utilizaremos un spritesheet simple de un personaje caminando y en reposo. Puedes crear el tuyo propio o buscar uno gratuito en sitios como itch.io o OpenGameArt.

1. Descarga o crea tu spritesheet: Asegúrate de que los frames estén bien alineados y espaciados para facilitar el recorte.
2. Crea una carpeta Assets en tu proyecto Godot: Dentro, crea subcarpetas como Characters y Player para mantener todo organizado.
3. Importa el spritesheet: Arrastra tu archivo de imagen (.png o .webp son comunes) a la carpeta Player dentro del panel FileSystem de Godot.

🛠️ Configuración del Personaje en Godot

Ahora que tenemos nuestros assets, vamos a configurar la escena de nuestro personaje en Godot.

📝 Creando la Escena del Personaje

1. Nueva escena 2D: Haz clic en Scene -> New Scene. Selecciona 2D Scene. Godot creará un nodo Node2D raíz. Renómbralo a Player.

2. Añadir un nodo CharacterBody2D: Este es el nodo base para personajes con movimiento físico y colisiones. Selecciona Player, haz clic en el botón + para añadir un nuevo nodo y busca CharacterBody2D. Renómbralo también a Player.

   ⚠️ Advertencia: El nodo raíz de la escena del personaje debe ser un `CharacterBody2D` para que las colisiones y el movimiento basado en física funcionen correctamente.

3. Añadir un nodo Sprite2D: Este nodo mostrará nuestros sprites. Selecciona el CharacterBody2D recién creado, haz clic en + y busca Sprite2D. Renómbralo a Visuals o PlayerSprite.

4. Asignar textura al Sprite2D: Arrastra tu spritesheet desde el panel FileSystem al slot Texture en el Inspector del nodo Visuals.

   📌 Nota: Si tu spritesheet tiene varios frames, el `Sprite2D` por defecto solo mostrará el primer frame. No te preocupes, lo ajustaremos más adelante con `AnimationPlayer`.

📏 Configuración de la Colisión

Para que nuestro personaje interactúe con el mundo, necesita una forma de colisión.

1. Añadir un nodo CollisionShape2D: Selecciona el CharacterBody2D Player, haz clic en + y busca CollisionShape2D.
2. Asignar una forma al CollisionShape2D: En el Inspector, en la propiedad Shape, haz clic en [Empty] -> New CapsuleShape2D (o RectangleShape2D, dependiendo de tu personaje). Una cápsula suele ser buena para personajes bípedos.
3. Ajustar la forma: Usa los manipuladores en el viewport 2D para ajustar el tamaño y la posición de la forma de colisión para que se adapte bien a tu personaje. Intenta que sea ligeramente más pequeña que el sprite para una sensación más natural.

✨ Animación con AnimationPlayer

Aquí es donde la magia ocurre. Usaremos el nodo AnimationPlayer para definir y reproducir nuestras animaciones.

🎬 Añadiendo AnimationPlayer y Recortando Sprites

1. Añadir AnimationPlayer: Selecciona el nodo Visuals (tu Sprite2D), haz clic en + y busca AnimationPlayer.

2. Configurar Hframes y Vframes: En el Inspector, selecciona el nodo Visuals. Busca las propiedades Hframes (frames horizontales) y Vframes (frames verticales) y ajusta los valores para que coincidan con la cuadrícula de tu spritesheet. Por ejemplo, si tienes 8 frames en una fila, Hframes sería 8.

   100% Configurado

3. Crear la primera animación: Con el nodo AnimationPlayer seleccionado, en la parte inferior del editor, verás el panel Animation. Haz clic en Animation -> New y nómbrala Idle (reposo).

4. Añadir pistas de animación: Asegúrate de que el nodo Visuals esté seleccionado en el panel Scene. En el Inspector, busca la propiedad Frame (dentro de Animation). Haz clic en el botón de la llave 🔑 junto a Frame.

   • Asegúrate de que Create New Track esté seleccionado y haz clic en Create.
   • Esto añadirá una pista de animación para la propiedad frame en el AnimationPlayer.

🚶 Animación de Reposo (Idle)

Vamos a animar el estado Idle.

1. Establecer duración: En el panel Animation, ajusta la duración de la animación a un valor corto, por ejemplo, 0.6 segundos.
2. Añadir fotogramas clave: En la pista frame, haz clic derecho en la línea de tiempo y selecciona Insert Key. Establece el valor de Frame a 0. Este es el primer frame.
3. Añadir más fotogramas clave: Avanza un poco en la línea de tiempo (ej. 0.2s), inserta otro fotograma clave y establece Frame a 1. Repite para los frames que componen tu animación de reposo (ej. 0, 1, 0, 1 para una animación simple de 2 frames).
4. Activar Loop: Marca la casilla Loop junto al nombre de la animación Idle para que se repita continuamente.

🏃 Animación de Caminar (Walk)

Repite el proceso para la animación de caminar.

1. Nueva animación: Haz clic en Animation -> New y nómbrala Walk.
2. Añadir pista de Frame: Si no está, añade una pista frame para el nodo Visuals como antes.
3. Establecer duración: Ajusta la duración (ej. 0.8 segundos).
4. Añadir fotogramas clave: Añade los fotogramas clave correspondientes a la secuencia de caminar en tu spritesheet. Por ejemplo, si tu caminar usa los frames 2-7, añadirías 2 en 0.0s, 3 en 0.15s, 4 en 0.3s, y así sucesivamente hasta el 7.
5. Activar Loop: Marca la casilla Loop.

🎮 Programando el Movimiento del Personaje

Ahora vamos a darle interactividad a nuestro personaje con un script GDScript.

📄 Adjuntar un Script

1. Adjuntar script al CharacterBody2D: Selecciona el nodo Player (el CharacterBody2D raíz). Haz clic en el botón Adjuntar Script (el ícono del pergamino) en el Inspector.
2. Configurar el script: Deja la Ruta por defecto (generalmente Player.gd), Idioma como GDScript, y Plantilla como CharacterBody2D (Built-in). Haz clic en Crear.

extends CharacterBody2D


const SPEED = 150.0
const JUMP_VELOCITY = -400.0

# Get the gravity from the project settings to be synced with RigidBody nodes.
var gravity = ProjectSettings.get_setting("physics/2d/default_gravity")


func _physics_process(delta: float):
# Add the gravity.
if not is_on_floor():
velocity.y += gravity * delta

# Handle Jump.
if Input.is_action_just_pressed("ui_accept") and is_on_floor():
velocity.y = JUMP_VELOCITY

# Get the input direction and handle the movement/deceleration.
# As good practice, you should replace UI actions with custom gameplay actions.
var direction = Input.get_vector("ui_left", "ui_right", "ui_up", "ui_down")
if direction:
velocity.x = direction.x * SPEED
else:
velocity.x = move_toward(velocity.x, 0, SPEED)

move_and_slide()

🏃 Implementando Movimiento y Animación

Vamos a modificar el script Player.gd para controlar el movimiento horizontal y cambiar las animaciones.

extends CharacterBody2D

const SPEED = 150.0
const JUMP_VELOCITY = -400.0

var gravity = ProjectSettings.get_setting("physics/2d/default_gravity")

@onready var animation_player = $Visuals/AnimationPlayer
@onready var visuals = $Visuals # Referencia al Sprite2D para voltear


func _physics_process(delta: float):
# Aplicar gravedad si no está en el suelo
if not is_on_floor():
velocity.y += gravity * delta

# Manejar Salto
if Input.is_action_just_pressed("ui_accept") and is_on_floor():
velocity.y = JUMP_VELOCITY

# Obtener la dirección de entrada horizontal
var input_direction_x = Input.get_axis("ui_left", "ui_right")

# Calcular la velocidad horizontal
if input_direction_x != 0:
velocity.x = input_direction_x * SPEED
update_animation(input_direction_x) # Actualizar animación y dirección
else:
velocity.x = move_toward(velocity.x, 0, SPEED) # Desacelerar si no hay input
update_animation(0) # Parado

move_and_slide()

func update_animation(direction_x: float):
if direction_x > 0: # Moviéndose a la derecha
visuals.flip_h = false # No voltear horizontalmente
animation_player.play("Walk")
elif direction_x < 0: # Moviéndose a la izquierda
visuals.flip_h = true # Voltear horizontalmente
animation_player.play("Walk")
else: # Parado
animation_player.play("Idle")

🔑 Configuración de Inputs

Para que Input.get_axis() y Input.is_action_just_pressed() funcionen, necesitamos configurar las acciones en Project Settings.

1. Abrir Project Settings: Ve a Project -> Project Settings.
2. Pestaña Input Map: En esta pestaña, verás una lista de acciones. Godot ya tiene acciones ui_left, ui_right, ui_up, ui_down, y ui_accept (generalmente mapeado a Espacio o Enter).
3. Asignar teclas: Asegúrate de que ui_left esté mapeado a A o Flecha Izquierda, ui_right a D o Flecha Derecha, y ui_accept a Espacio.

🌍 Integrando el Personaje en el Mundo

Ahora que nuestro personaje está animado y se mueve, necesitamos un mundo donde pueda existir.

🗺️ Creando una Escena de Nivel Básico

1. Nueva escena 2D: Scene -> New Scene -> 2D Scene. Renómbrala a World.
2. Añadir un StaticBody2D para el suelo: Este será nuestro suelo. Selecciona World, añade un nodo StaticBody2D. Renómbralo a Ground.
3. Añadir CollisionShape2D al Ground: Como antes, añade un CollisionShape2D al Ground. Asigna una RectangleShape2D y ajústala para que sea una plataforma larga y plana.
4. Añadir un ColorRect (opcional): Para que el suelo sea visible, añade un ColorRect como hijo de Ground y ajusta su tamaño y color.

    # En tu escena World, puedes tener algo así:
    # - World (Node2D)
    #   - Ground (StaticBody2D)
    #     - CollisionShape2D (Shape: RectangleShape2D)
    #     - ColorRect (para visualización)
    ```

### 🧍 Instanciando el Personaje

1.  **Guardar la escena del personaje**: Asegúrate de haber guardado tu escena `Player` (ej. `Player.tscn`).
2.  **Instanciar en la escena `World`**: Arrastra el archivo `Player.tscn` desde el panel `FileSystem` a la escena `World`.
3.  **Posicionar el personaje**: Arrastra el nodo `Player` en el viewport para que esté por encima del `Ground`.

<div class="callout tip">💡 <strong>Consejo:</strong> Usa el atajo <kbd>F6</kbd> para ejecutar la escena actual, o <kbd>F5</kbd> para ejecutar la escena principal que hayas configurado en `Project Settings` -> `Application` -> `Run` -> `Main Scene`.</div>

--- 

## 📈 Mejoras y Pasos Siguientes

Has creado un personaje 2D animado y controlable. ¡Felicidades! Aquí hay algunas ideas para llevarlo al siguiente nivel:

### 🔄 Más Estados de Animación

*   **Salto/Caída**: Añade animaciones para cuando el personaje salta y cae. Modifica `_physics_process` para reproducir estas animaciones cuando `is_on_floor()` sea falso.
*   **Ataque/Habilidad**: Si tu personaje tiene acciones, crea animaciones para ellas y un sistema de control para activarlas.
*   **Correr**: Si quieres diferenciar entre caminar y correr, añade una animación de `Run` y un input para activarla (ej. <kbd>Shift</kbd>).

### 📊 Sistema de Estados (State Machine)

Para juegos más complejos, un sistema de estados es esencial para gestionar lógicas y animaciones de manera ordenada. En lugar de un montón de `if/else`, puedes tener estados como `IDLE`, `WALK`, `JUMP`, `ATTACK`, cada uno con su propia lógica y animaciones.

🌐 Interacción con el Entorno

• Plataformas móviles: Crea nodos AnimatableBody2D para plataformas que se muevan y con las que tu personaje pueda interactuar.
• Recogibles: Añade Area2D a tu personaje para detectar y recoger objetos.
• Enemigos: Implementa la detección de colisiones con otros CharacterBody2D o RigidBody2D para combate o interacción.

🎯 Conclusión

Has completado un viaje emocionante, transformando un spritesheet en un personaje 2D funcional y animado en Godot 4. Desde la configuración inicial hasta la programación de su movimiento y la gestión de animaciones, ahora posees una base sólida para crear tus propios protagonistas de videojuegos.

Recuerda que la práctica es clave. No dudes en experimentar con diferentes sprites, animaciones y mecánicas para perfeccionar tus habilidades. ¡El mundo de Godot está esperando tus creaciones!

Tutorial Completado