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.
- 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
ipointerout
: 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.
- 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à.
- 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.
- 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 |
- 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.
- 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.
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