El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema aprenderás a utilizar tweens y animaciones avanzadas en Phaser para crear movimientos suaves, transiciones y efectos visuales atractivos en tus juegos. Los tweens permiten modificar propiedades de objetos (como posición, escala, rotación, opacidad, etc.) de manera gradual y controlada, mientras que las animaciones permiten reproducir secuencias de imágenes (frames) para dar vida a tus sprites.

¿Qué es un Tween?

Un tween (de "in-between") es una interpolación automática entre dos valores a lo largo del tiempo. En Phaser, los tweens se usan para animar propiedades de objetos de forma sencilla y fluida.

Conceptos Clave de Tweens

Objeto objetivo: El objeto cuyas propiedades serán animadas.
Propiedades: Las características del objeto que cambiarán (por ejemplo, x, y, alpha, scale).
Duración: Tiempo que tarda la animación en completarse.
Easing: La forma en que la animación progresa (lineal, acelerada, desacelerada, etc.).
Callbacks: Funciones que se ejecutan en ciertos momentos del tween (inicio, actualización, finalización).

Creando un Tween Básico

Veamos cómo crear un tween que mueva un sprite de izquierda a derecha.

Ejemplo Práctico

// Supón que ya tienes una escena y un sprite llamado 'player'
this.tweens.add({
    targets: player,      // Objeto a animar
    x: 400,               // Nueva posición en X
    duration: 2000,       // Duración en milisegundos (2 segundos)
    ease: 'Power2',       // Tipo de easing
    yoyo: false,          // No regresa al punto inicial
    repeat: 0             // No repite
});

Explicación

targets: El objeto o array de objetos a animar.
x: 400: El valor final de la propiedad x.
duration: 2000: El tween durará 2 segundos.
ease: 'Power2': Usamos una función de aceleración para suavizar el movimiento.
yoyo: Si es true, el tween regresa al valor inicial al terminar.
repeat: Número de repeticiones (0 = solo una vez).

Propiedades que Puedes Animar

Puedes animar casi cualquier propiedad numérica de un objeto. Aquí tienes una tabla con ejemplos comunes:

Propiedad	Descripción	Ejemplo de uso
x, y	Posición en el eje X o Y	`x: 500`
alpha	Opacidad (0 a 1)	`alpha: 0.5`
scaleX/Y	Escala en X o Y	`scaleX: 2`
angle	Rotación en grados	`angle: 180`
tint	Color de tinte (hexadecimal)	`tint: 0xff0000`

Easing: Controlando la Velocidad

El easing define cómo cambia la velocidad del tween durante la animación. Phaser incluye muchas funciones de easing.

Easing	Descripción
Linear	Velocidad constante
Power1, Power2	Aceleración/desaceleración suave
Bounce	Rebote al final
Elastic	Efecto elástico
Sine	Movimiento sinusoidal

Ejemplo:

ease: 'Bounce'

Callbacks en Tweens

Puedes ejecutar funciones en diferentes momentos del tween:

this.tweens.add({
    targets: player,
    x: 400,
    duration: 2000,
    onStart: () => { console.log('Tween iniciado'); },
    onUpdate: () => { /* Se ejecuta en cada frame */ },
    onComplete: () => { console.log('Tween finalizado'); }
});

Tweens Encadenados y Secuencias

Puedes encadenar tweens usando la función timeline para crear animaciones complejas.

Ejemplo de Timeline

this.tweens.timeline({
    targets: player,
    tweens: [
        { x: 400, duration: 1000, ease: 'Power1' },
        { y: 300, duration: 1000, ease: 'Bounce' },
        { alpha: 0, duration: 500 }
    ]
});

Explicación:
El sprite se mueve a la derecha, luego hacia abajo, y finalmente se desvanece.

Animaciones de Sprites (Frames)

Además de tweens, Phaser permite crear animaciones de sprites usando secuencias de imágenes (frames).

Creando una Animación

Supón que tienes un spritesheet llamado player_run con frames numerados del 0 al 5.

this.anims.create({
    key: 'run',
    frames: this.anims.generateFrameNumbers('player_run', { start: 0, end: 5 }),
    frameRate: 10,      // 10 frames por segundo
    repeat: -1          // Repetir indefinidamente
});

Reproducir la Animación

player.anims.play('run');

Ejercicios Prácticos

Ejercicio 1: Mueve un Sprite con Tween

Enunciado:
Crea un tween que mueva un sprite llamado star desde la posición actual hasta x = 600 en 1.5 segundos, usando un easing de tipo Sine.easeInOut.

Solución:

this.tweens.add({
    targets: star,
    x: 600,
    duration: 1500,
    ease: 'Sine.easeInOut'
});

Consejo:
Asegúrate de que el sprite star exista antes de crear el tween.

Ejercicio 2: Crea una Animación de Salto

Enunciado:
Haz que un sprite llamado player suba a y = 200 y luego regrese a su posición original usando un tween con efecto de rebote (Bounce).

Solución:

this.tweens.add({
    targets: player,
    y: 200,
    duration: 800,
    ease: 'Bounce',
    yoyo: true
});

Error común:
Olvidar el yoyo: true hará que el sprite no regrese a su posición original.

Ejercicio 3: Anima la Opacidad de un Sprite

Enunciado:
Haz que un sprite llamado enemy se desvanezca (alpha a 0) en 2 segundos y luego reaparezca (alpha a 1) usando un timeline.

Solución:

this.tweens.timeline({
    targets: enemy,
    tweens: [
        { alpha: 0, duration: 2000 },
        { alpha: 1, duration: 2000 }
    ]
});

Resumen

Los tweens permiten animar propiedades de objetos de forma suave y controlada.
Puedes animar posición, escala, rotación, opacidad y más.
El easing controla la velocidad y el estilo de la animación.
Los timelines permiten encadenar varias animaciones.
Las animaciones de sprites reproducen secuencias de imágenes para dar vida a los personajes.
Practica combinando tweens y animaciones para crear efectos visuales atractivos y dinámicos en tus juegos.

¡Ahora estás listo para llevar la animación de tus juegos en Phaser al siguiente nivel!
En el siguiente tema aprenderás a usar temporizadores y eventos retardados para controlar el tiempo y la secuencia de acciones en tu juego.

Tweens y Animaciones

¿Qué es un Tween?

Conceptos Clave de Tweens

Creando un Tween Básico

Ejemplo Práctico

Explicación

Propiedades que Puedes Animar

Easing: Controlando la Velocidad

Callbacks en Tweens

Tweens Encadenados y Secuencias

Ejemplo de Timeline

Animaciones de Sprites (Frames)

Creando una Animación

Reproducir la Animación

Ejercicios Prácticos

Ejercicio 1: Mueve un Sprite con Tween

Ejercicio 2: Crea una Animación de Salto

Ejercicio 3: Anima la Opacidad de un Sprite

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