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

HOME

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!

Treballar amb text

Conceptes clau

Afegir text bàsic

Exemple bàsic

Personalitzar l’estil del text

Exemple amb estils avançats

Actualitzar el text durant el joc

Exercicis pràctics

Exercici 1: Mostra un missatge de benvinguda

Exercici 2: Actualitza la puntuació

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