En aquest tema aprendràs com fer que els objectes del teu joc responguin a les accions dels jugadors, com ara clics, moviments del ratolí o tocs a la pantalla. Aquesta funcionalitat és essencial per crear jocs dinàmics i atractius.
- Què són els objectes interactius?
Els objectes interactius són elements del joc (com botons, personatges, ítems, etc.) que poden detectar i respondre a accions de l’usuari. A Phaser, qualsevol objecte visual (com un sprite o una imatge) pot ser interactiu.
Conceptes clau
- Objecte interactiu: Element que pot rebre esdeveniments d’entrada (clic, toc, etc.).
- Esdeveniment: Acció que succeeix (per exemple, un clic) i que pot ser capturada pel joc.
- Callback: Funció que s’executa quan es produeix un esdeveniment.
- Fer un objecte interactiu
Per fer que un objecte sigui interactiu a Phaser, cal cridar el mètode .setInteractive() sobre l’objecte.
Exemple bàsic
// Afegim una imatge al joc let estrella = this.add.image(400, 300, 'estrella'); // Fem la imatge interactiva estrella.setInteractive();
Explicació:
this.add.image(400, 300, 'estrella'): Afegeix una imatge al centre de la pantalla..setInteractive(): Permet que la imatge respongui a esdeveniments d’entrada.
- Escoltar esdeveniments d’entrada
Un cop l’objecte és interactiu, pots escoltar diferents esdeveniments, com ara:
| Esdeveniment | Descripció |
|---|---|
| pointerdown | Quan es fa clic o toc sobre l’objecte |
| pointerup | Quan s’allibera el clic o toc |
| pointerover | Quan el ratolí entra a sobre l’objecte |
| pointerout | Quan el ratolí surt de l’objecte |
Exemple: Detectar un clic
Explicació:
.on('pointerdown', callback): Executa la funció cada cop que es fa clic o toc a l’objecte.
- Exemple complet: Canviar la imatge en fer clic
let estrella = this.add.image(400, 300, 'estrella');
estrella.setInteractive();
estrella.on('pointerdown', function () {
estrella.setTexture('estrella_brillant');
});Explicació:
- Quan l’usuari fa clic a l’estrella, la textura de la imatge canvia a
'estrella_brillant'.
- Afegir efectes visuals a la interacció
Pots millorar la resposta visual quan l’usuari interactua amb l’objecte.
Exemple: Efecte de ressaltat
estrella.on('pointerover', function () {
estrella.setScale(1.2); // Fa l’objecte més gran
});
estrella.on('pointerout', function () {
estrella.setScale(1); // Torna a la mida original
});
- Exercicis pràctics
Exercici 1
Enunciat:
Crea una imatge interactiva que, en fer-hi clic, mostri un missatge per consola i canviï la seva opacitat a la meitat.
Solució:
let cofre = this.add.image(200, 200, 'cofre');
cofre.setInteractive();
cofre.on('pointerdown', function () {
console.log('Has obert el cofre!');
cofre.setAlpha(0.5);
});Consell:
Recorda que .setAlpha(valor) canvia la transparència de l’objecte (1 = opac, 0 = transparent).
Exercici 2
Enunciat:
Fes que un sprite canviï de color quan el ratolí passi per sobre i torni al color original quan el ratolí surti.
Solució:
let gemma = this.add.sprite(300, 300, 'gemma');
gemma.setInteractive();
gemma.on('pointerover', function () {
gemma.setTint(0xff0000); // Vermell
});
gemma.on('pointerout', function () {
gemma.clearTint();
});Error comú:
Oblidar-se de cridar .setInteractive() farà que els esdeveniments no funcionin.
- Resum
- Pots fer qualsevol objecte visual interactiu amb
.setInteractive(). - Utilitza
.on('esdeveniment', callback)per respondre a accions de l’usuari. - Els esdeveniments més comuns són:
pointerdown,pointerup,pointerover,pointerout. - Pots modificar l’aspecte de l’objecte dins del callback per donar feedback visual.
- Practica amb diferents esdeveniments i efectes per fer el teu joc més atractiu.
Pròxim pas:
Ara que saps com fer objectes interactius i gestionar esdeveniments, podràs crear menús, botons i mecàniques de joc més riques. El següent tema tractarà sobre la creació de tilemaps i mons de joc!
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