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.


  1. 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.

  1. 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.

  1. 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

estrella.on('pointerdown', function () {
    console.log('Has fet clic a l’estrella!');
});

Explicació:

  • .on('pointerdown', callback): Executa la funció cada cop que es fa clic o toc a l’objecte.

  1. 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'.

  1. 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
});

  1. 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.


  1. 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

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

© Copyright 2024. Tots els drets reservats