phaser-bitmapfont-generator

Node.js module that generates bitmap fonts (xml + png) from a Phaser 3 TextStyle json object

install

npm install -D @rtpa/phaser-bitmapfont-generator

or

yarn add @rtpa/phaser-bitmapfont-generator --dev 

generate an xml bitmap font from a Phaser3 TextStyle object

You can find the details of the Phaser TextStyle configuration object in the documentation: https://photonstorm.github.io/phaser3-docs/Phaser.Types.GameObjects.Text.html#.TextStyle

examples:

The following basic example generates a bitmapfont (Arial20.xml and Arial20.png) from the default settings

const generator = require('@rtpa/phaser-bitmapfont-generator');

(async ()=>{

    //generate textures
    await generator.TextStyle2BitmapFont();

    //exit node
    return process.exit(1);

})();

You are probably interested in generating a more exciting bitmap font. Here is an example with a nicer fontFamily and a border:

const generator = require('@rtpa/phaser-bitmapfont-generator');

(async () => {

    //generate textures
    await generator.TextStyle2BitmapFont(
        {
            path: './mydir',
            fileName: 'myBitmapfont',
            textSet: 'abcde12345=x+',
            textStyle: {
                fontFamily: 'Impact',
                fontSize: '50px',
                color: '#ffffff',
                shadow: {
                    offsetX: 1,
                    offsetY: 1,
                    blur: 0,
                    fill: true,
                    stroke: true,
                    color: '#000000'
                },
            }
        }
    );

    //exit node
    return process.exit(1);

})();

properties

the TextStyle2BitmapFont function accepts a configuration object that has the following properties:

| Property | Type | Description | Default value | | --- | --- | --- | --- | | path | string |the file path that is used to write the .xml and .png files to | './' | | fileName | string | The file name of the .xml and .png file. | <fontFamily> + <fontSize> | | margin | number | Number of pixels that the chars will be separated in the .png file | 2 | | textSet | string | A string that contains all characters that will be included in the bitmap font | Phaser.GameObjects.RetroFont.TEXT_SET1 | | textStyle | TextStyle object | A valid Phaser 3 TextStyle configuration Object | {fontFamily: 'Arial', fontSize: '20px'} | compression | imagemin-pngquant options object (or NULL to disable compression) | A valid imagemin-pngquant configuration Object | {quality: [ .3, .5 ]} | antialias | boolean | This options is useful for generating bitmap fonts intended for pixel art games. When antialias is set to false, the semi-transparant border around the text characters is removed. (It converts all partial transparant bits to either fully transparant of otherwise a fully coloured bit). | true | maxNumberOfColors | number (or NULL to disable) | maximum number of colors that is allowed in the final bitmap font .png file. This option is useful combined with the antialias=false option to generate multi-color bitmap fonts intended for pixel art games. PLEASE BE PATIENT! This option is a bit more time consuming. | null (min: 2, max: 128)