El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

La animación de sprites es una de las bases visuales más importantes en el desarrollo de videojuegos. En Phaser, animar un sprite significa mostrar una secuencia de imágenes (frames) para simular movimiento o cambios de estado, como caminar, saltar o atacar.

En esta lección aprenderás:

Qué es una animación de sprite y cómo funciona en Phaser.
Cómo cargar y preparar spritesheets.
Cómo crear y reproducir animaciones.
Ejemplo práctico paso a paso.
Ejercicios para practicar.

¿Qué es una Animación de Sprite?

Un sprite es una imagen o conjunto de imágenes que representan un objeto en el juego. Una animación de sprite es una secuencia de imágenes (llamadas frames) que, al mostrarse rápidamente una tras otra, crean la ilusión de movimiento.

Ejemplo visual:

Frame 1	Frame 2	Frame 3	Frame 4

Cada frame es una imagen diferente del personaje en una posición distinta.

Spritesheets: Preparando la Animación

Un spritesheet es una sola imagen que contiene todos los frames de una animación, organizados en filas y columnas.

Ejemplo de spritesheet:


4 frames de 32x32 píxeles cada uno

Ventajas de usar spritesheets:

Menos archivos que cargar.
Mejor rendimiento.
Fácil manejo de animaciones.

Cargando un Spritesheet en Phaser

Para usar un spritesheet, primero debes cargarlo en la escena. Utiliza el método this.load.spritesheet en la función preload().

// Cargar un spritesheet llamado 'player'
this.load.spritesheet('player', 'assets/player.png', {
    frameWidth: 32,
    frameHeight: 32
});

Explicación:

'player': clave para referenciar el spritesheet.
'assets/player.png': ruta al archivo de imagen.
frameWidth y frameHeight: tamaño de cada frame.

Creando una Animación

Después de cargar el spritesheet, define la animación en la función create() usando this.anims.create.

this.anims.create({
    key: 'walk',
    frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});

Explicación de los parámetros:

Parámetro	Descripción
`key`	Nombre de la animación (usado para reproducirla).
`frames`	Frames que componen la animación (aquí, del 0 al 3).
`frameRate`	Cuántos frames por segundo (fps) se muestran.
`repeat`	Cuántas veces se repite la animación (`-1` es infinito, `0` es una vez).

Reproduciendo una Animación

Para reproducir la animación en un sprite, usa el método play:

// Crear el sprite en la posición (100, 100)
let player = this.add.sprite(100, 100, 'player');

// Reproducir la animación 'walk'
player.play('walk');

Nota: El sprite debe haber sido creado usando el mismo spritesheet que la animación.

Ejemplo Completo: Animación de un Personaje

class MyGame extends Phaser.Scene {
    preload() {
        // Cargar el spritesheet
        this.load.spritesheet('player', 'assets/player.png', {
            frameWidth: 32,
            frameHeight: 32
        });
    }

    create() {
        // Crear la animación
        this.anims.create({
            key: 'walk',
            frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
            frameRate: 8,
            repeat: -1
        });

        // Crear el sprite y reproducir la animación
        this.player = this.add.sprite(100, 100, 'player');
        this.player.play('walk');
    }
}

const config = {
    type: Phaser.AUTO,
    width: 400,
    height: 300,
    scene: MyGame
};

const game = new Phaser.Game(config);

Explicación paso a paso:

Se carga el spritesheet del jugador.
Se define la animación 'walk' usando los frames 0 a 3.
Se crea el sprite y se le asigna la animación.

Ejercicios Prácticos

Ejercicio 1: Cambia la Velocidad de la Animación

Instrucción:
Modifica el ejemplo anterior para que la animación se reproduzca a 15 frames por segundo.

Solución

this.anims.create({
    key: 'walk',
    frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
    frameRate: 15, // Cambiado a 15 fps
    repeat: -1
});

Consejo: Si la animación va demasiado rápido, prueba valores entre 8 y 12 para un movimiento más natural.

Ejercicio 2: Crea una Animación de "Salto"

Instrucción:
Supón que los frames 4 y 5 del spritesheet representan al personaje saltando. Crea una animación llamada 'jump' que use esos frames y se reproduzca solo una vez.

Solución

this.anims.create({
    key: 'jump',
    frames: this.anims.generateFrameNumbers('player', { start: 4, end: 5 }),
    frameRate: 8,
    repeat: 0 // Solo una vez
});

Error común: Olvidar cambiar repeat a 0, lo que haría que la animación se repita infinitamente.

Ejercicio 3: Reproduce la Animación de "Salto" al Presionar una Tecla

Instrucción:
Haz que el sprite reproduzca la animación 'jump' cuando el usuario presione la barra espaciadora.

Solución

create() {
    // ... (código de animaciones y sprite)
    this.input.keyboard.on('keydown-SPACE', () => {
        this.player.play('jump');
    });
}

Consejo: Puedes volver a la animación 'walk' cuando termine la de 'jump' usando el evento animationcomplete.

Errores Comunes y Consejos

Error Común	Solución/Consejo
El sprite no muestra la animación	Asegúrate de que el sprite y la animación usan la misma clave de spritesheet.
La animación no se repite	Usa `repeat: -1` para bucles infinitos.
La animación es demasiado rápida o lenta	Ajusta el `frameRate` hasta que se vea natural.
El sprite muestra solo un frame	Verifica que la animación esté correctamente definida y reproducida.

Resumen

Las animaciones de sprites en Phaser se crean a partir de spritesheets.
Se definen animaciones indicando los frames, velocidad y repetición.
Se reproducen en los sprites usando el método play.
Es importante ajustar el frameRate y el repeat según el efecto deseado.
Practica creando y reproduciendo animaciones para dominar este aspecto fundamental del desarrollo de juegos.

¡Ahora estás listo para animar personajes y objetos en tus juegos con Phaser!
En la próxima lección aprenderás a trabajar con grupos de sprites y su gestión eficiente.

Fundamentos de Animación de Sprites

¿Qué es una Animación de Sprite?

Spritesheets: Preparando la Animación

Cargando un Spritesheet en Phaser

Creando una Animación

Reproduciendo una Animación

Ejemplo Completo: Animación de un Personaje

Ejercicios Prácticos

Ejercicio 1: Cambia la Velocidad de la Animación

Ejercicio 2: Crea una Animación de "Salto"

Ejercicio 3: Reproduce la Animación de "Salto" al Presionar una Tecla

Errores Comunes y Consejos

Resumen

Phaser - Desarrollo de Juegos con JavaScript

Módulo 1: Introducción al Desarrollo de Juegos y Phaser

Módulo 2: Fundamentos de Phaser

Módulo 3: Sprites y Animación

Módulo 4: Física e Interactividad en el Juego

Módulo 5: Mundo del Juego y Cámara

Módulo 6: Audio e Interfaz de Usuario

Módulo 7: Arquitectura del Juego y Gestión de Estados

Módulo 8: Características Avanzadas de Jugabilidad

Módulo 9: Despliegue y Optimización

Módulo 10: Proyecto Final