La interacció de l’usuari és fonamental en qualsevol joc. Phaser proporciona eines potents i senzilles per capturar i gestionar l’entrada del teclat i el ratolí, permetent que els jugadors controlin personatges, naveguin per menús o activin accions especials.
Conceptes clau
- Entrada del teclat: Detectar quan una tecla s’ha premut, mantingut o alliberat.
- Entrada del ratolí: Capturar clics, moviments i posició del cursor.
- Assignació d’accions: Relacionar esdeveniments d’entrada amb accions dins el joc.
- Gestió d’esdeveniments: Utilitzar callbacks per respondre a l’entrada de l’usuari.
- Entrada del teclat
Com funciona?
Phaser permet escoltar esdeveniments de teclat de dues maneres:
- Tecles individuals: Per accions específiques (ex: saltar amb la barra espaiadora).
- CursorKeys: Per moviments bàsics (fletxes de direcció).
Exemple bàsic: Detectar fletxes de direcció
// A l'escena del teu joc create() { // Crear objecte per controlar les fletxes this.cursors = this.input.keyboard.createCursorKeys(); } update() { if (this.cursors.left.isDown) { // Moure a l'esquerra console.log('Esquerra'); } if (this.cursors.right.isDown) { // Moure a la dreta console.log('Dreta'); } if (this.cursors.up.isDown) { // Moure amunt console.log('Amunt'); } if (this.cursors.down.isDown) { // Moure avall console.log('Avall'); } }
Explicació:
this.input.keyboard.createCursorKeys()
crea un objecte amb propietats per a cada fletxa (left
,right
,up
,down
)..isDown
comprova si la tecla està premuda en aquell moment.
Exemple avançat: Tecles personalitzades
create() { // Assignar la tecla 'A' a una acció this.keyA = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A); } update() { if (Phaser.Input.Keyboard.JustDown(this.keyA)) { console.log('Has premut la tecla A!'); } }
Explicació:
addKey
permet escoltar qualsevol tecla.JustDown
retornatrue
només el primer frame en què la tecla es prem.
- Entrada del ratolí
Com funciona?
Phaser gestiona l’entrada del ratolí a través de l’objecte this.input.mousePointer
i esdeveniments sobre objectes interactius.
Exemple bàsic: Detectar clics globals
create() { this.input.on('pointerdown', function (pointer) { console.log('Clic a:', pointer.x, pointer.y); }, this); }
Explicació:
- L’esdeveniment
'pointerdown'
es dispara quan es fa clic amb el ratolí (o es toca la pantalla en dispositius tàctils). pointer.x
ipointer.y
donen la posició del clic.
Exemple: Fer un sprite interactiu
create() { this.sprite = this.add.sprite(100, 100, 'player').setInteractive(); this.sprite.on('pointerdown', function () { console.log('Has clicat el personatge!'); }); }
Explicació:
.setInteractive()
fa que el sprite pugui rebre esdeveniments de ratolí..on('pointerdown', ...)
escolta el clic sobre aquest sprite.
- Taula resum: Diferències entre entrada de teclat i ratolí
Característica | Teclat | Ratolí |
---|---|---|
Esdeveniments bàsics | keydown, keyup, isDown, JustDown | pointerdown, pointerup, pointermove |
Ús típic | Moviment, accions, menús | Selecció, apuntar, interactuar |
Assignació | Tecles individuals o grups (CursorKeys) | Objectes interactius o global |
Posició | No aplica | pointer.x, pointer.y |
- Exercicis pràctics
Exercici 1: Mou un sprite amb les fletxes
Enunciat:
Crea un sprite i fes que es mogui a l’esquerra o dreta quan l’usuari prem les fletxes corresponents.
Solució:
create() { this.player = this.add.sprite(200, 200, 'player'); this.cursors = this.input.keyboard.createCursorKeys(); } update() { if (this.cursors.left.isDown) { this.player.x -= 2; } if (this.cursors.right.isDown) { this.player.x += 2; } }
Consell:
Assegura’t que el sprite no surti de la pantalla comprovant els límits de this.player.x
.
Exercici 2: Canvia el color d’un sprite en fer clic
Enunciat:
Fes que un sprite canviï de tint (color) cada vegada que l’usuari fa clic a sobre seu.
Solució:
create() { this.box = this.add.sprite(300, 300, 'box').setInteractive(); this.box.on('pointerdown', () => { // Assigna un tint aleatori this.box.setTint(Math.random() * 0xffffff); }); }
Error comú:
Oblidar .setInteractive()
farà que el sprite no rebi esdeveniments de ratolí.
- Resum
- Phaser facilita la gestió d’entrada tant de teclat com de ratolí.
- Pots detectar tecles individuals, grups de tecles (com les fletxes) i assignar accions a qualsevol tecla.
- El ratolí es pot utilitzar tant de manera global com sobre objectes interactius.
- La pràctica amb exercicis t’ajudarà a consolidar aquests conceptes.
Pròxim pas:
A la següent secció aprendràs a treballar amb sprites, la base visual de qualsevol joc a Phaser.
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