pixi.js
    Preparing search index...

    Interface BitmapFontInstallOptions

    The options for installing a new BitmapFont. Once installed, the font will be available for use in BitmapText objects through the fontFamily property of TextStyle.

    import { BitmapFont, BitmapText } from 'pixi.js';

    // Basic font installation
    BitmapFont.install({
        name: 'BasicFont',
        style: {
            fontFamily: 'Arial',
            fontSize: 24,
            fill: '#ffffff'
        }
    });

    // Advanced font installation
    BitmapFont.install({
        name: 'AdvancedFont',
        style: {
            fontFamily: 'Arial',
            fontSize: 32,
            fill: '#ff0000',
            stroke: { color: '#000000', width: 2 }
        },
        // Include specific character ranges
        chars: [
            ['a', 'z'],           // lowercase letters
            ['A', 'Z'],           // uppercase letters
            ['0', '9'],           // numbers
            '!@#$%^&*()_+-=[]{}' // symbols
        ],
        resolution: 2,            // High-DPI support
        padding: 4,              // Glyph padding
        skipKerning: false,      // Enable kerning
        textureStyle: {
            scaleMode: 'linear',
        }
    });

    // Using the installed font
    const text = new BitmapText({
        text: 'Hello World',
        style: {
            fontFamily: 'AdvancedFont',
            fontSize: 48
        }
    });
    interface BitmapFontInstallOptions {
        chars?: string | (string | string[])[];
        name?: string;
        padding?: number;
        resolution?: number;
        skipKerning?: boolean;
        style?: TextStyle | TextStyleOptions;
        textureStyle?: TextureStyleOptions | TextureStyle;
    }
    Index

    Properties

    chars? name? padding? resolution? skipKerning? style? textureStyle?

    Properties

    chars?: string | (string | string[])[]

    Characters included in the font set. You can specify individual characters or ranges. Don't forget to include spaces ' ' in your character set!

    BitmapFont.ALPHANUMERIC

    // Different ways to specify characters
    BitmapFont.install({
        name: 'RangeFont',
        chars: [
            ['a', 'z'],              // Range of characters
            '0123456789',            // String of characters
            [['0', '9'], ['A', 'Z']] // Multiple ranges
        ]
    });
    name?: string

    The name of the font. This will be used as the fontFamily in text styles to access this font. Must be unique across all installed bitmap fonts.

    BitmapFont.install({
        name: 'MyCustomFont',
        style: { fontFamily: 'Arial' }
    });
    padding?: number

    Padding between glyphs on texture atlas. Balances visual quality with texture space.

    • Lower values: More compact, but may have visual artifacts
    • Higher values: Better quality, but uses more texture space
    4

    BitmapFont.install({
        name: 'PaddedFont',
        padding: 8 // More padding for better quality
    });
    resolution?: number

    Render resolution for glyphs. Higher values create sharper text at the cost of memory. Useful for supporting high-DPI displays.

    1

    BitmapFont.install({
        name: 'HiDPIFont',
        resolution: window.devicePixelRatio || 2
    });
    skipKerning?: boolean

    Skip generation of kerning information for the BitmapFont.

    • true: Faster generation, but text may have inconsistent spacing
    • false: Better text appearance, but slower generation
    false

    BitmapFont.install({
        name: 'FastFont',
        skipKerning: true // Prioritize performance
    });
    style?: TextStyle | TextStyleOptions

    Style options to render the BitmapFont with. Supports all TextStyle properties including fill, stroke, and shadow effects.

    BitmapFont.install({
        name: 'StyledFont',
        style: {
            fontFamily: 'Arial',
            fontSize: 32,
            fill: ['#ff0000', '#00ff00'], // Gradient
            stroke: { color: '#000000', width: 2 },
            dropShadow: {
                color: '#000000',
                blur: 2,
                distance: 3
            }
        }
    });
    textureStyle?: TextureStyleOptions | TextureStyle

    Optional texture style to use when creating the font textures. Controls how the font textures are rendered and filtered.

    BitmapFont.install({
        name: 'CrispFont',
        textureStyle: {
            scaleMode: 'nearest',
        }
    });

    Settings

    Member Visibility

    On This Page

    Properties