El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

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 amb setText.
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.

Mostrar puntuacions i HUD

Conceptes clau

Elements habituals del HUD

Exemple pràctic: Afegir i actualitzar la puntuació

Crear el text de la puntuació

Actualitzar la puntuació

Afegir més elements al HUD

Exercicis pràctics

Exercici 1: Afegir un cronòmetre al HUD

Solució

Exercici 2: Mostrar un missatge temporal al HUD

Solució

Resum

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