Open Source Your Knowledge, Become a Contributor

Technology knowledge has to be shared and made accessible for free. Join the movement.

Create Content

Displaying text

The Graphic Entity Module includes two different classes to display text, here's how they work.

Text

The basic class to display text, it will be displayed as a label in the viewer.

graphicEntityModule.createText("Hello World")
    .setFontFamily("Lato")
    .setStrokeThickness(5) // Adding an outline
    .setStrokeColor(0xffffff) // a white outline
    .setFontSize(50)
    .setFillColor(0x000000); // Setting the text color to black

Example

The only font family values that will work are: "Lato" and those that are available by default on all browsers. If the browser does not recognise the font family, it will be displayed in a fallback font chosen by the browser.

BitmapText

This class is used to display text using a bitmap font in your assets folder.

graphicEntityModule.createBitmapText()
    .setText("Hello World")
    .setFont("myCustomFont")
    // Assuming that you have a working 'myCustomFont.fnt' and 'myCustomFont.png' in your assets folder
    .setFontSize(50)
    .setTint(0xff0000); // Tinting it in red

Example

Extra tips :

  • A little help to turn fonts into bitmap fonts : http://kvazars.com/littera/
  • You can put your font in a sub folder of the assets repository whithout modifying any code
Open Source Your Knowledge: become a Contributor and help others learn. Create New Content