El text és una part fonamental de qualsevol joc: serveix per mostrar puntuacions, instruccions, diàlegs, menús i molt més. Phaser facilita la creació i manipulació de text dins del teu joc. En aquesta secció aprendràs com afegir text, personalitzar-lo i actualitzar-lo dinàmicament.


Conceptes clau

  • Objecte de text: Element que mostra una cadena de caràcters a la pantalla.
  • Estils de text: Propietats visuals com la font, mida, color, alineació, etc.
  • Actualització de text: Modificar el contingut del text durant el joc.
  • Text dinàmic: Text que canvia segons les accions del jugador o l’estat del joc.

Afegir text bàsic

Per afegir text a una escena de Phaser, utilitzem el mètode this.add.text. La seva sintaxi bàsica és:

this.add.text(x, y, text, style);
  • x, y: Coordenades on es mostrarà el text.
  • text: Cadena de caràcters a mostrar.
  • style: Objecte amb les propietats d’estil.

Exemple bàsic

class MyScene extends Phaser.Scene {
  create() {
    this.add.text(100, 50, 'Hola, món!', {
      font: '32px Arial',
      fill: '#ffffff'
    });
  }
}

Explicació:

  • El text "Hola, món!" apareixerà a la posició (100, 50) amb una mida de 32 píxels, font Arial i color blanc.

Personalitzar l’estil del text

Pots personalitzar molts aspectes visuals del text. Aquí tens algunes de les propietats més comunes:

Propietat Descripció Exemple
font Tipus i mida de la font '24px Verdana'
fill Color del text '#ff0000'
align Alineació del text 'center', 'right'
backgroundColor Color de fons del text '#000000'
stroke Color del contorn '#00ff00'
strokeThickness Gruix del contorn 4
shadow Ombra del text { offsetX: 2, offsetY: 2, color: '#333', blur: 2, fill: true }

Exemple amb estils avançats

this.add.text(50, 100, 'Puntuació: 0', {
  font: '28px Comic Sans MS',
  fill: '#ffff00',
  backgroundColor: '#222222',
  stroke: '#ff00ff',
  strokeThickness: 3,
  shadow: {
    offsetX: 2,
    offsetY: 2,
    color: '#000000',
    blur: 2,
    fill: true
  }
});

Actualitzar el text durant el joc

Per actualitzar el text (per exemple, la puntuació), primer has de guardar una referència a l’objecte de text:

class MyScene extends Phaser.Scene {
  create() {
    this.score = 0;
    this.scoreText = this.add.text(20, 20, 'Puntuació: 0', {
      font: '24px Arial',
      fill: '#ffffff'
    });
  }

  update() {
    // Suposem que la puntuació canvia en algun moment
    this.score += 1;
    this.scoreText.setText('Puntuació: ' + this.score);
  }
}

Explicació:

  • this.scoreText guarda l’objecte de text.
  • setText() permet canviar el contingut del text en qualsevol moment.

Exercicis pràctics

Exercici 1: Mostra un missatge de benvinguda

Enunciat:
Crea una escena que mostri el text "Benvingut al joc!" al centre de la pantalla, amb una mida de 36px i color blau.

Solució:

class WelcomeScene extends Phaser.Scene {
  create() {
    this.add.text(400, 300, 'Benvingut al joc!', {
      font: '36px Arial',
      fill: '#0000ff'
    }).setOrigin(0.5);
  }
}

Consell:
Utilitza .setOrigin(0.5) per centrar el text respecte a les coordenades donades.


Exercici 2: Actualitza la puntuació

Enunciat:
Crea un marcador de puntuació que comenci a 0 i augmenti en 10 cada cop que es prem la barra espaiadora.

Solució:

class ScoreScene extends Phaser.Scene {
  create() {
    this.score = 0;
    this.scoreText = this.add.text(20, 20, 'Puntuació: 0', {
      font: '24px Arial',
      fill: '#ffffff'
    });

    this.input.keyboard.on('keydown-SPACE', () => {
      this.score += 10;
      this.scoreText.setText('Puntuació: ' + this.score);
    });
  }
}

Error comú:
Oblidar actualitzar el text després de canviar la puntuació. Recorda cridar setText() cada cop que la puntuació canviï.


Resum

  • Has après a afegir text a una escena de Phaser amb this.add.text.
  • Saps com personalitzar l’estil del text amb diverses propietats.
  • Pots actualitzar el contingut del text dinàmicament durant el joc.
  • Has practicat amb exercicis per mostrar i modificar text segons les accions del jugador.

Pròxim pas:
A la següent secció aprendràs a gestionar l’entrada de teclat i ratolí per fer el teu joc més interactiu!

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

© Copyright 2024. Tots els drets reservats