El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Timers i esdeveniments retardats

Següent ►
►

Els timers i els esdeveniments retardats són eines fonamentals en el desenvolupament de jocs per controlar accions que han de succeir després d’un cert temps o de manera periòdica. Phaser proporciona una API potent per gestionar aquests casos, permetent crear jocs més dinàmics i interactius.

Conceptes clau

  • Timer: Un mecanisme que executa una acció després d’un període de temps determinat.
  • Delayed Event: Un esdeveniment programat per ocórrer després d’un retard específic.
  • Repetició: Possibilitat de repetir una acció diverses vegades amb un interval fix.
  • Cancel·lació: Aturar un timer abans que s’executi l’acció programada.

Timers a Phaser: scene.time

Phaser utilitza el sistema de temps de l’escena (scene.time) per gestionar timers i esdeveniments retardats. Les funcions més utilitzades són:

Funció Descripció
scene.time.addEvent(config) Afegeix un esdeveniment de temps (únic o repetitiu)
scene.time.delayedCall(delay, ...) Executa una funció després d’un retard específic (en mil·lisegons)
scene.time.removeEvent(event) Elimina un esdeveniment de temps abans que s’executi

Exemple bàsic: Esdeveniment retardat

Suposem que volem mostrar un missatge 2 segons després d’iniciar l’escena.

// Dins del mètode create() d'una escena Phaser
this.time.delayedCall(2000, () => {
    this.add.text(100, 100, 'Han passat 2 segons!', { fontSize: '24px', color: '#fff' });
});

Explicació:

  • this.time.delayedCall(2000, ...) crea un esdeveniment que s’executarà després de 2000 ms (2 segons).
  • La funció passada com a segon paràmetre s’executa quan el temps ha passat.
  • S’afegeix un text a la pantalla quan es compleix el temps.

Exemple avançat: Timer repetitiu

Volem crear un enemic nou cada segon, 5 vegades.

// Dins del mètode create() d'una escena Phaser
this.time.addEvent({
    delay: 1000,           // 1 segon
    callback: crearEnemic, // Funció a executar
    callbackScope: this,   // Context de la funció
    repeat: 4              // Es repeteix 4 vegades (total 5 execucions)
});

function crearEnemic() {
    // Aquí aniria el codi per crear un enemic
    this.add.text(100, 150 + 30 * this.enemicsCreats, 'Enemic creat!', { fontSize: '20px', color: '#f00' });
    this.enemicsCreats = (this.enemicsCreats || 0) + 1;
}

Explicació:

  • delay: 1000 indica l’interval entre execucions.
  • callback és la funció que s’executa cada vegada.
  • repeat: 4 fa que s’executi 5 vegades en total (la primera + 4 repeticions).
  • callbackScope: this assegura que this dins de la funció sigui l’escena.

Comparativa: delayedCall vs addEvent

Característica delayedCall addEvent
Ús principal Acció única després d’un retard Accions úniques o repetitives
Retard Sí Sí
Repetició No Sí (amb la propietat repeat)
Cancel·lació fàcil Sí (retorna l’objecte de l’event) Sí (retorna l’objecte de l’event)
Sintaxi Més simple per accions puntuals Més flexible per accions complexes

Exercicis pràctics

Exercici 1: Missatge retardat

Enunciat:
Mostra un text que digui “Preparat?” i, després de 3 segons, canvia’l per “Comença!”.

Solució:

// Dins del mètode create() d'una escena Phaser
let missatge = this.add.text(200, 200, 'Preparat?', { fontSize: '32px', color: '#fff' });

this.time.delayedCall(3000, () => {
    missatge.setText('Comença!');
});

Consell:
Assegura’t de guardar la referència al text per poder-lo modificar després.

Exercici 2: Comptador regressiu

Enunciat:
Crea un comptador que mostri els números del 5 al 1, canviant cada segon, i després mostri “Go!”.

Solució:

// Dins del mètode create() d'una escena Phaser
let valor = 5;
let text = this.add.text(200, 200, valor, { fontSize: '32px', color: '#fff' });

let event = this.time.addEvent({
    delay: 1000,
    callback: () => {
        valor--;
        if (valor > 0) {
            text.setText(valor);
        } else {
            text.setText('Go!');
            event.remove(); // Atura el timer
        }
    },
    callbackScope: this,
    loop: true
});

Error comú:
Oblidar aturar el timer quan arriba a 0 pot fer que el text “Go!” es sobreescrigui o que el timer segueixi executant-se innecessàriament.

Exercici 3: Cancel·lar un esdeveniment

Enunciat:
Programa un esdeveniment que mostri “Hola!” després de 5 segons, però si l’usuari fa clic abans, cancel·la l’esdeveniment i mostra “Cancel·lat!”.

Solució:

// Dins del mètode create() d'una escena Phaser
let text = this.add.text(200, 200, '', { fontSize: '32px', color: '#fff' });

let event = this.time.delayedCall(5000, () => {
    text.setText('Hola!');
});

this.input.once('pointerdown', () => {
    event.remove(false); // Cancel·la l’esdeveniment
    text.setText('Cancel·lat!');
});

Consell:
Utilitza once per assegurar que només es cancel·la la primera vegada que es fa clic.

Resum

  • Els timers i esdeveniments retardats permeten executar accions després d’un temps o de manera periòdica.
  • Phaser ofereix delayedCall per accions puntuals i addEvent per accions més complexes o repetitives.
  • És important gestionar la cancel·lació dels timers quan sigui necessari per evitar comportaments inesperats.
  • Practicar amb exercicis t’ajudarà a dominar aquests conceptes i a crear jocs més dinàmics.

Pròxim pas:
Ara que domines els timers i esdeveniments retardats, pots passar a explorar la IA i el comportament dels enemics per fer els teus jocs encara més interessants!

◄ Anterior
◄
Següent ►
►

Phaser - Desenvolupament de jocs amb JavaScript

Mòdul 1: Introducció al desenvolupament de jocs i Phaser

Mòdul 2: Fonaments de Phaser

Mòdul 3: Sprites i animació

Mòdul 4: Física i interactivitat en el joc

Mòdul 5: Món del joc i càmera

Mòdul 6: Àudio i interfície d’usuari

Mòdul 7: Arquitectura del joc i gestió d’estats

Mòdul 8: Funcionalitats avançades de joc

Mòdul 9: Desplegament i optimització

Mòdul 10: Projecte final

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats