How to create a bitmap from an imported font

Phaser 3
1

I’m trying to load a bitmap font following this tutorial but I’m having problems. This is my current code:

import carbonTypeTexture from "../assets/fonts/carbontype_regular_32.png";
import carbonTypeDescription from "../assets/fonts/carbontype_regular_32.fnt";

class Main extends Phaser.Scene {
    constructor() {
        super({
            key: "main"
        });
    }

    preload() {
        this.load.bitmapFont('carbonTypeFont', carbonTypeTexture, carbonTypeDescription);
    }

    create() {
        this.add.bitmapText(400, 100, 'carbonTypeFont', 'Game Title');
    }
}

And this is the error I get:

XML Parsing Error: syntax error
Location: http://localhost:5000/
Line Number 1, Column 1:

In the webpack configuration I use file-loader to bundle the .fnt file. I have tried the same with JSON (just importing it since, as far I have understood, webpack >= v2.0 load JSON by default) and XML files (with raw-loader), but no result.

The only thing that comes to my mind is that the .fnt, JSON or XML files were not well generated. I first downloaded the .tff font, and generated the bitmap files with fontbuilder (https://github.com/andryblack/fontbuilder).

2

Try changing the .fnt extension to .xml. it worked for me.

3

Finally I could load a custom font after 9 hours of pain. I didn’t use any bitmap at all, just discovered a way of using a custom font without taking bitmaps. Although it has been a while since I posted the question, now I had time to put my solution here and hope this can help other people.

Steps to use custom fonts in your Phaser app:

1. Create a @font-face CSS at-rule for each of the fonts you want to use in your app. For this, you can use FontSquirrel webfont generator, for which you only need the .ttf (or other font format) file of your desired font. After following the instructions in the page you will get a .zip like with this structure if you uploaded, let’s say, carbontype.tff:

├── carbontype-demo.html
├── carbontype-webfont.woff    <-- You only need this
├── carbontype-webfont.woff2    <-- You only need this
├── generator_config.txt
├── specimen_files
│   ├── grid_12-825-55-15.css
│   └── specimen_stylesheet.css
└── stylesheet.css    <-- You only need this

For your project, you only need the .woff* and stylesheet.css files.

2. When you put these files into your project, make sure the URL’s in stylesheet.css point correctly to the fonts:

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on March 31, 2019 */

@font-face {
    font-family: 'carbontyperegular';
    src: url('carbontype-webfont.woff2') format('woff2'),
         url('carbontype-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* You can add other @font-faces for different fonts in the same CSS file */
@font-face {
    font-family: 'my_underwoodregular';
    /*...*/
}

3. In your index.html add the webfontloader.js script co-developed by Google and Typekit (Google link, Github link) like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js"></script>

4. In your app.js or wherever you create and initialize your Phaser.Game() object, import the stylesheet.css and load your fonts like this:

import Phaser from "phaser";
import Main from "./scenes/main.js";
import fonts from "./assets/fonts/stylesheet.css";

let webFontLoading = {
  active: function() {
		runGame()
  },
  custom: {
    families: ['carbontyperegular', 'my_underwoodregular'],
    urls: ["stylesheet.css"]
  }
};

let runGame = function() {
    let config = {
        type: Phaser.AUTO,
        width: 540,
        heigth: 960,
        physics: {
            default: "arcade",
            arcade: {
                gravity: {y: 0},
                debug: false
            }
        }
        scene: [Game]
    };

    let game = new Phaser.Game(config);
}

WebFont.load(webFontLoading);

Let’s create the webFontLoading object. Tell it to create our Phaser.Game() object only when the fonts have been finished loading (active property). Also, specify the name of the fonts you want to load (families property) and its source (urls property). Then, the last line and first to execute is the WebFont.load() wich receives as an argument the webFontLoading you defined previously.

6. Use your font in your app, just passing the font name:

let titleText = this.add.text(100, 100, "My custom font!", {
    fill: "#000000",
    font: "48px carbontyperegular"
});

7. Be sure all things are caught by webpack.

Hope the steps are clear and its useful for anybody having problems with this.