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:
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
- 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