Texto y tipografías en Phaser

Un elemento muchas veces menospreciado en los juegos es el manejo de texto en pantalla y las tipografías. En primer lugar hay que diferenciar entre dos tipos de fuentes: vectoriales y bitmap. Las vectoriales son las habituales en el día a día. Las que usamos en Internet, en Word, etc. Se pueden hacer grandes y pequeñas. Hay varios formatos, pero la mayoría son en formato TrueType, OpenType y derivadas. Estas fuentes pueden ser cargadas usando CSS3, pero ten cuidado pues al principio puede que no estén cargadas.

Texto en Phaser: fuentes vectoriales

Las fuentes vectoriales las solemos encontrar en formato TTF (TrueType), OTF (OpenType) o WOFF (versión 1 o 2, son TrueType u OpenType optimizados para la web). Deberemos añadir esto al fichero CSS.

@font-face{
    font-family: 'NombreDeLaFuente';
    src: local('NombreDeLaFuente'), url('fonts/fuente.woff') format('woff');
}

Ahora podemos usar esa fuente para dibujar texto sobre la pantalla.

game.add.text(100,50,"Phaser.js Hispano",{
    font: 'NombreDeLaFuente',
    fontSize: 32,
    fill: 'purple'
});
var texto = game.add.text(200,100,"http://www.phaser-hispano.gq");
texto.font = "Agency FB";
texto.fontSize = 24;
texto.fill = "green";

Texto en Phaser: fuentes de tipo bitmap

En videojuegos también es común usar fuentes de tipo bitmap. Estas son simplemente imágenes de cada caracter.

game.load.bitmapFont('desyrel', 'assets/fonts/bitmapFonts/desyrel.png', 'assets/fonts/bitmapFonts/desyrel.xml');
...
game.add.bitmapText(200, 100, 'desyrel', 'Phaser & Pixi\nrocking!', 64);