El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Gestió d’entrada (teclat i ratolí)

Següent ►
►

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.

  1. 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 retorna true només el primer frame en què la tecla es prem.

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

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

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

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

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats