Textos en Phaser

Al igual que tenemos GameObject de imágenes, tenemos objetos de texto. Si queremos colocar títulos, subtítulos o textos en nuestro videojuego, podemos utilizar el objeto Text y sus métodos, que funciona de una forma muy similar a la que hemos visto con las imágenes.

Crear un texto en Phaser

Veamos un sencillo ejemplo donde creamos un título para nuestro juego y lo colocamos en las coordenadas 0x0:

import Phaser from "phaser";

export class Screen extends Phaser.Scene {
  create() {
    const text = this.add.text(0, 0, "Título de nuestro juego");
  }
}

Observa que en el caso de los textos, si que tenemos el punto de origen en la parte izquierda, al contrario que con las imágenes, que se encuentra en el centro. No obstante, recuerda que puedes cambiar en cualquier momento el punto de origen con el método .setOrigin() y la posición del texto con los métodos .setX() y .setY(), o con el método .setPosition(x, y), que es un atajo de los dos anteriores.

Con los textos también podemos usar los típicos métodos que ya conocemos si hemos trabajado con imágenes en Phaser. Métodos como, por ejemplo, .setAlpha(), .setVisible(), .setAngle(), .setBlendMode(), .setCrop(), .setFlip(), .setScale(), .setTint() y otros.

Añadir o cambiar texto

Al crear el objeto podemos indicar el texto, pero esto no significa que siempre deba ser ese texto. Podemos modificarlo utilizando el método .setText(), o incluso añadir fragmentos de texto al que ya tenemos si utilizamos el método .appendText():

import Phaser from "phaser";

export class Screen extends Phaser.Scene {
  create() {
    const text = this.add.text(0, 0, "Título de nuestro juego:");
    text.appendText("ManzPhaser");
  }
}

Recuerda que los textos pueden ser tanto como de textos. También ten en cuenta que al añadir un texto, hay una terminación de cadena de texto con un \n, por lo que al hacer un .appendText() aparece en una nueva línea.

Opciones de texto

Aunque en los ejemplos anteriores, al crear el texto con this.add.text() solo hemos indicado la posición x,y y el texto, también podemos añadir un cuarto parámetro con las opciones de formato de texto. Son muchas opciones, pero veamos una lista de las más comunes:

import Phaser from "phaser";

const textOptions = {
  fontFamily: "Jost, sans-serif",
  fontSize: 32,
  backgroundColor: "#000",
  color: "#fff",
  stroke: "#f00",
  strokeThickness: 4
}

export class Screen extends Phaser.Scene {
  create() {
    const text = this.add.text(0, 0, "Título de nuestro juego", textOptions);
  }
}

Podría ser muy interesante utilizar este objeto textOptions en un archivo externo donde guardemos los estilos de los textos de nuestro videojuego que sean suficientemente diferentes: titleFontStyle, talkCharacterFontStyle, etc... Luego, los importamos en nuestra escena e incluso podemos desestructurar y sobreescribir o añadir detalles específicos:

import Phaser from "phaser";
import { titleFontStyle } from "./styles/fontStyles.js";

export class Screen extends Phaser.Scene {
  create() {
    const text = this.add.text(0, 0, "ManzDevGame", { ...titleFontStyle, color: "#0ff" });
  }
}

Recuerda que si lo prefieres, puedes utilizar métodos como .setFontFamily(), .setFontSize(), setBackgroundColor(), .setColor(), .setStroke(color, thickness) y cambiar donde sea necesario.

Crear sombras

Si queremos, también podemos crear sombras para nuestro texto, indicando posición, desenfoque o colores. Podemos hacerlo facilmente en nuestro objeto textOptions mediante una propiedad shadow que contenga un objeto con las propiedades offsetX, offsetY, blur (), color (), stroke y fill ():

const textOptions = {
  /* ... */
  shadow: {
    offsetX: 2,
    offsetY: 2,
    blur: 2,
    color: "#f00",
    stroke: false,
    fill: true
  }
}

Pero recuerda que también las podemos añadir mediante métodos: .setShadow(x, y, color, blur, stroke, fill), o mediante métodos individuales más específicos como .setShadowBlur(), .setShadowColor(), setShadowFill(), .setShadowOffset(x, y) o setShadowStroke().

Alinear textos

Quizás, la forma más sencilla de alinear textos en Phaser es utilizar los métodos .setFixedSize() y .setAlign(). Con el primero de ellos establecemos que el bloque contenedor del texto tenga un tamaño fijo, ya que normalmente depende del tamaño del texto. Y con el segundo establecemos el tipo de alineación a usar.

Observa el siguiente ejemplo:

import Phaser from "phaser";

export class Screen extends Phaser.Scene {
  create() {
    const text = this.add.text(0, 0, "Título de nuestro juego", textOptions);
    text.setBackgroundColor("red");
    text.setColor("white");
    text.setFixedSize(800, 0);
    text.setAlign("center");
  }
}

Observa que hemos colocado un color de fondo en rojo, con texto blanco, para ver cuanto ocupa el fragmento en todo momento. Luego, con setFixedSize() establecemos que el bloque contenedor de texto ocupe toda la pantalla (recuerda que 800 es el tamaño de ancho del juego) y con .setAlign() indicamos que queremos el texto centrado.

¡Recuerda que no hace falta hacer múltiples llamadas! Puedes encadenar los métodos sobre el mismo objeto, o mejor aún, utilizar las propiedades correspondientes en un objeto textOptions.

Algo que puede que nos interese es personalizar la tipografía del texto y colocar una concreta. Phaser permite hacer esto sin problemas aprovechando la plataforma web, sin embargo, debes tener en cuenta varias cosas, por lo que hablaremos de esto en el siguiente artículo.