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

Crear botons i menús

Següent ►
►

En aquesta secció aprendràs a crear botons interactius i menús dins del teu joc amb Phaser. Els botons i els menús són elements essencials per a la navegació, la configuració i la interacció amb l’usuari. Veurem com crear botons visuals, gestionar els seus esdeveniments i organitzar menús senzills i avançats.

Conceptes clau

  • Botó: Element interactiu que respon a l’entrada de l’usuari (clic, toc, etc.).
  • Menú: Conjunt d’opcions o botons agrupats per facilitar la navegació o la selecció dins el joc.
  • Esdeveniments d’entrada: Accions com el clic del ratolí o el toc en pantalla que activen una resposta.

  1. Crear un botó bàsic amb Phaser

Phaser permet crear botons de diverses maneres. La més senzilla és utilitzar una imatge o un sprite i fer-lo interactiu.

Exemple: Botó d’inici senzill

class MainMenu extends Phaser.Scene {
  constructor() {
    super({ key: 'MainMenu' });
  }

  preload() {
    this.load.image('startButton', 'assets/start_button.png');
  }

  create() {
    // Afegim el botó al centre de la pantalla
    const button = this.add.image(400, 300, 'startButton')
      .setInteractive();

    // Canviem l’opacitat quan el ratolí passa per sobre
    button.on('pointerover', () => {
      button.setAlpha(0.7);
    });

    // Tornem a l’opacitat normal quan el ratolí surt
    button.on('pointerout', () => {
      button.setAlpha(1);
    });

    // Acció quan es fa clic
    button.on('pointerdown', () => {
      this.scene.start('GameScene');
    });
  }
}

Explicació:

  • setInteractive(): Fa que la imatge respongui a esdeveniments d’entrada.
  • pointerover i pointerout: Esdeveniments per canviar l’aspecte del botó quan el ratolí passa per sobre o surt.
  • pointerdown: Esdeveniment que s’activa quan es fa clic o toc.

  1. Crear un botó amb text

També pots crear botons utilitzant text, útil per a menús senzills o prototips.

Exemple: Botó de text

const playButton = this.add.text(400, 300, 'Jugar', {
  fontSize: '32px',
  fill: '#fff',
  backgroundColor: '#007bff',
  padding: { x: 20, y: 10 }
})
.setOrigin(0.5)
.setInteractive({ useHandCursor: true });

playButton.on('pointerover', () => playButton.setStyle({ fill: '#ff0' }));
playButton.on('pointerout', () => playButton.setStyle({ fill: '#fff' }));
playButton.on('pointerdown', () => this.scene.start('GameScene'));

Explicació:

  • add.text: Crea un objecte de text.
  • setOrigin(0.5): Centra el text respecte a la posició donada.
  • setInteractive({ useHandCursor: true }): Fa el text interactiu i mostra el cursor de mà.

  1. Agrupar botons per crear un menú

Un menú sol ser un conjunt de botons organitzats verticalment o horitzontalment.

Exemple: Menú principal amb diversos botons

const options = [
  { label: 'Jugar', action: () => this.scene.start('GameScene') },
  { label: 'Opcions', action: () => this.scene.start('OptionsScene') },
  { label: 'Sortir', action: () => this.game.destroy(true) }
];

options.forEach((option, i) => {
  const btn = this.add.text(400, 250 + i * 60, option.label, {
    fontSize: '28px',
    fill: '#fff',
    backgroundColor: '#333',
    padding: { x: 30, y: 10 }
  })
  .setOrigin(0.5)
  .setInteractive({ useHandCursor: true });

  btn.on('pointerover', () => btn.setStyle({ fill: '#ff0' }));
  btn.on('pointerout', () => btn.setStyle({ fill: '#fff' }));
  btn.on('pointerdown', option.action);
});

Explicació:

  • Utilitzem un array d’opcions per crear diversos botons de manera dinàmica.
  • Cada botó té la seva acció associada.

  1. Taula comparativa: Tipus de botons a Phaser

Tipus de botó Avantatges Inconvenients Exemple d’ús
Imatge/Sprite Visualment atractiu, personalitzable Requereix assets gràfics Botó d’inici, pausa
Text Fàcil i ràpid de crear Menys atractiu visualment Menús, prototips
Botó amb gràfics vectorials Escalable, sense assets externs Pot requerir més codi per personalitzar Botons d’opcions, HUD

  1. Exercicis pràctics

Exercici 1: Crea un botó de "Reiniciar"

Enunciat:
Afegeix un botó de text que, en fer-hi clic, reiniciï l’escena actual.

Solució:

const restartButton = this.add.text(400, 400, 'Reiniciar', {
  fontSize: '28px',
  fill: '#fff',
  backgroundColor: '#e74c3c',
  padding: { x: 20, y: 10 }
})
.setOrigin(0.5)
.setInteractive({ useHandCursor: true });

restartButton.on('pointerdown', () => {
  this.scene.restart();
});

Consell:
Assegura’t que el botó sigui visible i no se superposi amb altres elements.

Exercici 2: Menú amb tres opcions

Enunciat:
Crea un menú amb tres botons: "Jugar", "Ajuda" i "Sortir". Fes que cada botó mostri un missatge diferent a la consola quan es clica.

Solució:

const menuOptions = [
  { label: 'Jugar', action: () => console.log('Has clicat Jugar!') },
  { label: 'Ajuda', action: () => console.log('Has clicat Ajuda!') },
  { label: 'Sortir', action: () => console.log('Has clicat Sortir!') }
];

menuOptions.forEach((option, i) => {
  const btn = this.add.text(400, 250 + i * 60, option.label, {
    fontSize: '28px',
    fill: '#fff',
    backgroundColor: '#2980b9',
    padding: { x: 30, y: 10 }
  })
  .setOrigin(0.5)
  .setInteractive({ useHandCursor: true });

  btn.on('pointerdown', option.action);
});

Error comú:
Oblidar el .setInteractive() farà que el botó no respongui als clics.

  1. Consells addicionals

  • Utilitza setInteractive({ useHandCursor: true }) per millorar l’experiència d’usuari.
  • Pots afegir animacions o efectes sonors als botons per fer-los més atractius.
  • Organitza els botons en grups o contenidors (Phaser.GameObjects.Container) per facilitar la gestió de menús complexos.

Resum

En aquesta secció has après a:

  • Crear botons interactius amb imatges i text.
  • Gestionar esdeveniments d’entrada per als botons.
  • Organitzar botons en menús funcionals.
  • Aplicar bones pràctiques i evitar errors comuns.

Ara ja pots afegir menús i botons als teus jocs amb Phaser, millorant la interacció i la navegació per als jugadors. El següent pas serà mostrar puntuacions i HUD per oferir més informació a l’usuari durant la partida.

◄ 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