pixi.js
    Preparing search index...

    Class BitmapFont

    A BitmapFont object represents a particular font face, size, and style. This class handles both pre-loaded bitmap fonts and dynamically generated ones.

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

    // Create a bitmap font from loaded textures and data
    const font = new BitmapFont({
        data: {
            pages: [{ id: 0, file: 'font.png' }],
            chars: {
                '65': { // 'A'
                    id: 65,
                    page: 0,
                    x: 0,
                    y: 0,
                    width: 32,
                    height: 32,
                    xOffset: 0,
                    yOffset: 0,
                    xAdvance: 32,
                    letter: 'A'
                }
            },
            fontSize: 32,
            lineHeight: 36,
            baseLineOffset: 26,
            fontFamily: 'MyFont',
            distanceField: {
                type: 'msdf',
                range: 4
            }
        },
        textures: [Texture.from('font.png')]
    });

    // Install a font for global use
    BitmapFont.install({
        name: 'MyCustomFont',
        style: {
            fontFamily: 'Arial',
            fontSize: 32,
            fill: '#ffffff',
            stroke: { color: '#000000', width: 2 }
        }
    });

    // Uninstall when no longer needed
    BitmapFont.uninstall('MyCustomFont');

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    applyFillAsTint baseLineOffset baseMeasurementFontSize chars distanceField fontFamily fontMetrics lineHeight pages url?

    Accessors

    distanceFieldRange distanceFieldType font pageTextures size

    Methods

    destroy install uninstall

    Constructors

    Properties

    applyFillAsTint: boolean = true

    should the fill for this font be applied as a tint to the text.

    baseLineOffset: number = 0

    The offset of the font face from the baseline.

    baseMeasurementFontSize: number = 100

    The size of the font face in pixels.

    chars: Record<string, CharData> = ...

    The map of characters by character code.

    distanceField: { range: number; type: "none" | "sdf" | "msdf" } = ...

    The range and type of the distance field for this font.

    Type declaration

    • range: number

      Range of the distance field in pixels

    • type: "none" | "sdf" | "msdf"

      Type of distance field

    fontFamily: string = ''

    The name of the font face

    fontMetrics: FontMetrics = ...

    The metrics of the font face.

    lineHeight: number = 0

    The line-height of the font face in pixels.

    pages: { texture: Texture }[] = []

    The map of base page textures (i.e., sheets of glyphs).

    url?: string

    The URL from which the font was loaded, if applicable. This is useful for tracking font sources and reloading.

    console.log(font.url); // 'fonts/myFont.fnt'

    Accessors

    • get distanceFieldRange(): number

      The kind of distance field for this font or "none".

      Returns number

      since 8.0.0 Use distanceField.type instead.

    • get distanceFieldType(): "none" | "sdf" | "msdf"

      The range of the distance field in pixels.

      Returns "none" | "sdf" | "msdf"

      since 8.0.0 Use distanceField.range instead.

    • get font(): string

      The name of the font face.

      Returns string

      since 8.0.0 Use fontFamily instead.

    • get pageTextures(): { texture: Texture }[]

      The map of base page textures (i.e., sheets of glyphs).

      Returns { texture: Texture }[]

      since 8.0.0 Use pages instead.

    • get size(): number

      The size of the font face in pixels.

      Returns number

      since 8.0.0 Use fontMetrics.fontSize instead.

    Methods

    • Generates and installs a bitmap font with the specified options. The font will be cached and available for use in BitmapText objects.

      Parameters

      Returns void

      Installed font instance

      // Install a basic font
      BitmapFont.install({
          name: 'Title',
          style: {
              fontFamily: 'Arial',
              fontSize: 32,
              fill: '#ffffff'
          }
      });

      // Install with advanced options
      BitmapFont.install({
          name: 'Custom',
          style: {
              fontFamily: 'Arial',
              fontSize: 24,
              fill: '#00ff00',
              stroke: { color: '#000000', width: 2 }
          },
          chars: [['a', 'z'], ['A', 'Z'], ['0', '9']],
          resolution: 2,
          padding: 4,
          textureStyle: {
              scaleMode: 'nearest'
          }
      });

    • Uninstalls a bitmap font from the cache. This frees up memory and resources associated with the font.

      Parameters

      • name: string

        The name of the bitmap font to uninstall

      Returns void

      // Remove a font when it's no longer needed
      BitmapFont.uninstall('MyCustomFont');

      // Clear multiple fonts
      ['Title', 'Heading', 'Body'].forEach(BitmapFont.uninstall);

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods