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 quethis
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 iaddEvent
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!
Phaser - Desenvolupament de jocs amb JavaScript
Mòdul 1: Introducció al desenvolupament de jocs i Phaser
- Què és el desenvolupament de jocs?
- Visió general de Phaser
- Configuració del teu entorn de desenvolupament
- El teu primer projecte amb Phaser
Mòdul 2: Fonaments de Phaser
- Entendre el bucle del joc
- Configuració del joc i escenes
- Carregar i mostrar imatges
- Treballar amb text
- Gestió d’entrada (teclat i ratolí)
Mòdul 3: Sprites i animació
- Què són els sprites?
- Afegir i moure sprites
- Fonaments de l’animació de sprites
- Grups de sprites i gestió
Mòdul 4: Física i interactivitat en el joc
- Introducció a la física a Phaser
- Activar la física en els sprites
- Col·lisions i superposicions
- Objectes interactius i esdeveniments
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
- Efectes de partícules
- Tweens i animacions
- Timers i esdeveniments retardats
- IA i comportament dels enemics