Text

The Text type allows to create Text objects.

based on HTML fonts. It allows customizing the color of the text, the shadows, the stroke, etc…

You can create a Text object by dropping a Text built-in block on the scene.

Also, using the type replacing dialog, you can convert a Bitmap Text (or any other object) into a Text object.

The Text objects are created in code using the text factory. This is how the scene compiler generates that code:

Copyconst text_1 = this.add.text(90, 385, "", {});
text_1.text = "New Text object";
text_1.setStyle({
    "backgroundColor":"blue",
    "color":"orange",
    "fontFamily":"serif",
    "fontSize":"60px",
    "fontStyle":"bold italic",
    "stroke":"orange",
    "shadow.offsetX":5,
    "shadow.offsetY":5,
    "shadow.color":"brown",
    "shadow.blur":7,
    "shadow.stroke":true,
    "shadow.fill":true});
text_1.setPadding({"left":10,"top":10,"right":10,"bottom":10});

Font family property

One especial property in the Text game object is the Font Family. You can write any font name supported by the browser, like "Arial", "Verdana", "Monospace", etc.. or you can use custom fonts loaded in your game.

Phaser provides a simple Loader API to load custom fonts in your games:

Copythis.load.font({
   key: "Nokia",
   url: "assets/nokia.ttf",
   format: "truetype",
   descriptors: { style: "normal", weight: "400" }
});

Then, you can use the font in your Text objects:

Copythis.add.text(x, y, "Hello World", { 
    fontFamily: "Nokia", 
    fontSize: 48 
});

With Phaser Editor the workflow is same, you can load the font in the Asset Pack editor and use it in the Font Family property.

You can follow this steps:

• Upload the font file to the project.

• Select the font file in the Files view:

  

• Click the Import as font button in the Inspector view:

  

• In the Font Family property, you can write the font name or select it from the three-dots menu:

  

Scott Westover did an amazing video tutorial about how to add custom fonts to a Phaser game. Check it out!

Phaser Editor v4 Tutorial: Native Custom Fonts!

Text type properties

The Text type contains many of the common object properties:

• Variable properties
• Lists properties
• Transform properties
• Origin properties
• Flip properties
• Visible property
• Alpha properties

It also contains the Text property, that is dedicated to all the objects with texts, and its specific properties:

• The TextStyle properties.
• The TextShadow properties.
• The TextPadding properties.
• The TextWordWrap properties.

In the Inspector view, hover the mouse in the label of each property to get a tooltip with the Phaser API.