En aquest tema aprendràs com mostrar informació important al jugador mitjançant la puntuació i altres elements d’interfície (HUD, Head-Up Display) utilitzant Phaser. El HUD és essencial per comunicar l’estat del joc, com la puntuació, vides restants, temps, etc.
Conceptes clau
- HUD (Head-Up Display): Elements gràfics superposats a la pantalla que mostren informació rellevant al jugador.
- Puntuació: Valor numèric que representa el progrés o èxit del jugador.
- Text dinàmic: Text que pot canviar durant el joc (per exemple, la puntuació que augmenta).
- Actualització del HUD: Modificar els elements del HUD en resposta a esdeveniments del joc.
Elements habituals del HUD
Element | Descripció | Exemple visual |
---|---|---|
Puntuació | Mostra els punts del jugador | Score: 150 |
Vides | Indica quantes vides queden | Vides: ♥♥♥ |
Temps | Cronòmetre o compte enrere | Temps: 01:23 |
Nivell | Mostra el nivell actual | Nivell: 2 |
Missatges | Informació temporal (ex: "Game Over", "Pausa") | Game Over! |
Exemple pràctic: Afegir i actualitzar la puntuació
- Crear el text de la puntuació
// A l'escena principal (per exemple, dins de create) this.score = 0; this.scoreText = this.add.text(16, 16, 'Puntuació: 0', { fontSize: '32px', fill: '#fff' });
Explicació:
this.score
guarda la puntuació actual.this.add.text(x, y, text, style)
crea un text a la posició (16, 16) amb estil personalitzat.this.scoreText
és una referència per poder actualitzar el text més endavant.
- Actualitzar la puntuació
Suposem que el jugador recull una moneda:
recollirMoneda(player, moneda) { moneda.disableBody(true, true); // Amaga la moneda this.score += 10; // Suma 10 punts this.scoreText.setText('Puntuació: ' + this.score); // Actualitza el text }
Explicació:
- Quan el jugador recull una moneda, s’afegeixen punts.
setText
canvia el text mostrat al HUD.
- Afegir més elements al HUD
Pots afegir més textos o icones per mostrar vides, temps, etc.
// Vides this.lives = 3; this.livesText = this.add.text(16, 56, 'Vides: 3', { fontSize: '32px', fill: '#fff' }); // Actualitzar vides perdreVida() { this.lives -= 1; this.livesText.setText('Vides: ' + this.lives); }
Exercicis pràctics
Exercici 1: Afegir un cronòmetre al HUD
Enunciat:
Afegeix un cronòmetre que mostri el temps transcorregut des de l’inici del joc i que s’actualitzi cada segon.
Pista:
Utilitza this.time.addEvent
per crear un esdeveniment repetitiu.
Solució
// Dins de create this.timeElapsed = 0; this.timerText = this.add.text(16, 96, 'Temps: 0', { fontSize: '32px', fill: '#fff' }); this.time.addEvent({ delay: 1000, // 1 segon callback: () => { this.timeElapsed += 1; this.timerText.setText('Temps: ' + this.timeElapsed); }, callbackScope: this, loop: true });
Consell:
Assegura’t de posar el text en una posició que no se superposi amb altres elements del HUD.
Exercici 2: Mostrar un missatge temporal al HUD
Enunciat:
Mostra el missatge "Nivell completat!" durant 2 segons quan el jugador acaba el nivell.
Solució
mostrarMissatge(text) { const missatge = this.add.text(400, 300, text, { fontSize: '48px', fill: '#ff0' }).setOrigin(0.5); this.time.delayedCall(2000, () => { missatge.destroy(); }); } // Quan el jugador acaba el nivell: this.mostrarMissatge('Nivell completat!');
Error comú:
Oblidar destruir el text després del temps pot fer que s’acumulin missatges a la pantalla.
Resum
- El HUD mostra informació essencial al jugador, com la puntuació, vides i temps.
- Utilitza
this.add.text
per afegir textos al HUD i actualitza’ls ambsetText
. - Pots afegir qualsevol element visual al HUD, incloent-hi icones o imatges.
- Els esdeveniments de Phaser (
time.addEvent
,delayedCall
) són útils per actualitzar elements del HUD de manera periòdica o temporal. - Practica afegint i actualitzant diferents elements al HUD per fer el teu joc més informatiu i atractiu.
Pròxim pas:
En el següent tema aprendràs a organitzar el codi del teu joc per mantenir-lo net i escalable a mesura que el HUD i altres funcionalitats creixin.
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