Styling Text

Text can be included in your game using PIXI’s Text, BitmapText, or HTMLText classes. Which styling options are available will depend on the class you choose.

Text

The Text class is the most basic way to include text in your game.

const myText = this.add.text({
  value: 'Hello World!',
  style: {
    fontFamily: 'sans-serif',
    fontSize: 24,
  },
  anchor: 0.5,
});

Text elements are styled using the style property which can reference a locally installed font family or a web font.

Web Fonts

To use a web font in your game, you can use a service like Google Fonts or Adobe fonts to find the fonts you want to include and grab the @import URL to include it in your CSS file or in your game’s index.html file:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');

To use the font, include it in the style property of a text element in your game:

const myText = this.add.text({
  value: 'Hello World!',
  style: {
    fontFamily: 'Open Sans',
    fontSize: 24,
    fontWeight: 'bold',
    fill: 'red',
  },
  anchor: 0.5,
});

BitmapText

Bitmap text elements use PIXI’s BitmapText class and can be styled using bitmap fonts that you’ve already loaded. For example:

public static get Assets(): AssetMapData[] {
  return [
    new FontAsset('myBitmapFont')
  ];
}

...

const myBitmapText = this.add.bitmapText({
  value: 'Hello Bitmap Text!',
  style: {
    fontName: 'myBitmapFont',
    fontSize: 48,
    fill: 'red'
  }
});

HTMLText

HTML text elements can be styled using HTML tags. For example:

const myText = this.add.htmlText({
  value: 'This will <strong>be bold</strong> and <em>this will be italicized</em>'
});

To style HTML text, pass a style property to the htmlText method:

const myText = this.add.htmlText({
  value: 'This will <strong>render</strong> in <em>Helvetica</em>',
  style: { fontFamily: 'helvetica', fontSize: 40 }
});

If the user has Helvetica installed locally it will render correctly, but if not it will fall back to a default font. To ensure it loads correctly, we can preload the font and use that to apply the style.

Custom Fonts

To load a custom font and apply it to an HTMLText element we use dill pixel’s loadAndAddHTMLTextStyle method to create the styles and load the individual font files for the different weights. Then we can retrieve the style using getHTMLTextStyle and apply it to the HTMLText element.

import { getHTMLTextStyle, loadAndAddHTMLTextStyle } from 'dill-pixel';

...

// Load the font files into a new HTML text style

await loadAndAddHTMLTextStyle(
  'myCustomFont',
  'Arboria',
  {
    fontFamily: 'Arboria',
    fontSize: 40,
    fill: 'white',
    align: 'center'
  },
  [
    { url: 'assets/fonts/arboria-bold.woff2', weight: 'bold' },
    { url: 'assets/fonts/arboria.woff2', weight: 'normal' },
    { url: 'assets/fonts/arboria-semibold.woff2', weight: '600' },
  ],
);

// Retrieve the style

const style = getHTMLTextStyle('arboria');

// Apply it to an HTMLText element

const myHtmlText = this.add.htmlText({
  value: 'This will <strong>render</strong> in Arboria',
  style
});