El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta sección aprenderás a utilizar temporizadores y eventos retardados en Phaser, herramientas fundamentales para controlar el tiempo dentro de tus juegos. Los temporizadores permiten ejecutar acciones después de un intervalo específico, crear bucles temporizados, programar eventos recurrentes y mucho más. Dominar estos conceptos te permitirá añadir dinamismo y control preciso sobre la jugabilidad.

Conceptos Clave

Temporizador (Timer): Mecanismo que ejecuta una función después de un tiempo determinado.
Evento Retardado (Delayed Event): Acción programada para ocurrir tras un retraso específico.
Repetición (Loop): Ejecución periódica de una función a intervalos regulares.
Cancelación: Detener un temporizador antes de que se ejecute o mientras está en curso.

Temporizadores en Phaser: Métodos Principales

Phaser proporciona varias formas de trabajar con el tiempo. Las más comunes son:

Método/Objeto	Descripción
`scene.time.addEvent`	Crea un evento temporizado (único o repetitivo).
`scene.time.delayedCall`	Ejecuta una función una sola vez después de un retraso.
`scene.time.removeEvent`	Elimina un evento temporizado antes de que ocurra.
`scene.time.now`	Devuelve el tiempo actual (en ms) desde el inicio de la escena.

Ejemplo Básico: Evento Retardado Único

Supongamos que quieres mostrar un mensaje 2 segundos después de iniciar la escena.

// Dentro de una escena de Phaser
this.time.delayedCall(2000, () => {
    console.log('¡Han pasado 2 segundos!');
}, [], this);

Explicación:

2000 es el tiempo de espera en milisegundos (2 segundos).
La función flecha se ejecuta después del retraso.
El tercer parámetro es un array de argumentos (vacío en este caso).
El cuarto parámetro es el contexto (this), necesario para acceder a la escena.

Ejemplo: Evento Repetitivo (Loop)

Para ejecutar una acción cada segundo, usa addEvent con la opción loop: true:

this.time.addEvent({
    delay: 1000, // 1 segundo
    callback: () => {
        console.log('¡Un segundo ha pasado!');
    },
    callbackScope: this,
    loop: true
});

Explicación:

delay: Intervalo entre ejecuciones (en ms).
callback: Función a ejecutar.
callbackScope: Contexto de la función.
loop: true: Hace que el evento se repita indefinidamente.

Ejemplo: Temporizador con Contador de Repeticiones

Puedes limitar el número de repeticiones usando la propiedad repeat:

this.time.addEvent({
    delay: 500, // 0.5 segundos
    callback: () => {
        console.log('¡Medio segundo ha pasado!');
    },
    callbackScope: this,
    repeat: 4 // Se ejecuta 5 veces en total (0 a 4)
});

Nota: El evento se ejecuta repeat + 1 veces.

Cancelar un Temporizador

Guarda la referencia al evento para poder cancelarlo más tarde:

let myEvent = this.time.addEvent({
    delay: 1000,
    callback: () => {
        console.log('Esto podría cancelarse');
    },
    callbackScope: this,
    loop: true
});

// Para cancelar:
myEvent.remove();

Tabla Comparativa: Métodos de Temporización

Método	Único/Loop	¿Devuelve referencia?	¿Puede cancelarse?	Uso típico
`scene.time.delayedCall`	Único	Sí	Sí	Acciones únicas tras un retraso
`scene.time.addEvent`	Ambos	Sí	Sí	Acciones repetitivas o únicas

Ejercicio Práctico

Enunciado:
Crea una escena en la que, al iniciar, aparezca un texto que diga "¡Prepárate!". Después de 3 segundos, el texto debe cambiar a "¡Comienza el juego!". Además, cada segundo, muestra en consola el tiempo transcurrido desde el inicio de la escena, durante 5 segundos.

Solución Propuesta

class TemporizadoresEscena extends Phaser.Scene {
    constructor() {
        super({ key: 'TemporizadoresEscena' });
    }

    create() {
        // Mostrar el texto inicial
        this.texto = this.add.text(100, 100, '¡Prepárate!', { fontSize: '32px', fill: '#fff' });

        // Cambiar el texto después de 3 segundos
        this.time.delayedCall(3000, () => {
            this.texto.setText('¡Comienza el juego!');
        }, [], this);

        // Contador de segundos
        let segundos = 0;
        this.time.addEvent({
            delay: 1000,
            callback: () => {
                segundos++;
                console.log(`Han pasado ${segundos} segundos`);
            },
            callbackScope: this,
            repeat: 4 // 5 veces en total (0 a 4)
        });
    }
}

Explicación:

Se crea un texto inicial.
Se usa delayedCall para cambiar el texto tras 3 segundos.
Se usa addEvent con repeat: 4 para mostrar el tiempo transcurrido cada segundo, durante 5 segundos.

Errores Comunes y Consejos

Olvidar el contexto (callbackScope): Si no lo defines, this dentro del callback puede no referirse a la escena.
Confundir repeat con número de ejecuciones: Recuerda que repeat: 4 ejecuta el callback 5 veces.
No guardar la referencia al evento: Si necesitas cancelar un temporizador, guarda la referencia al crearlo.
Demasiados temporizadores activos: Usa temporizadores solo cuando sea necesario para evitar sobrecargar la escena.

Resumen

Los temporizadores y eventos retardados permiten ejecutar acciones tras un retraso o de forma periódica.
Usa delayedCall para acciones únicas y addEvent para acciones repetitivas o más configurables.
Siempre define el contexto (callbackScope) para evitar errores con this.
Puedes cancelar eventos guardando su referencia.
Estos mecanismos son esenciales para crear dinámicas de juego como cuenta regresiva, generación de enemigos, animaciones temporizadas, etc.

¡Ahora estás listo para controlar el tiempo en tus juegos con Phaser!
En la próxima sección aprenderás sobre IA y comportamiento de enemigos, donde los temporizadores serán aún más útiles.

Temporizadores y Eventos Retardados

Conceptos Clave

Temporizadores en Phaser: Métodos Principales

Ejemplo Básico: Evento Retardado Único

Ejemplo: Evento Repetitivo (Loop)

Ejemplo: Temporizador con Contador de Repeticiones

Cancelar un Temporizador

Tabla Comparativa: Métodos de Temporización

Ejercicio Práctico

Solución Propuesta

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