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