[Phaser3] BMFFactory, create bitmapfonts at runtime

Showcase
1

Hi all,
This class creates bitmapfonts at runtime and adds them to the bitmapfonts cache, using default or already loaded browser fonts (included webfonts).

Features

  • Converts any loaded font[1] in the browser to a bitmapfont, ready to use in Phaser3 at runtime.
  • Shares same texture for multiple bitmapfonts.
  • Ensures power of two texture size (optional).
  • Calcs kernings for 97 commonly used pairs. (optional).[2]
  • Supports list of fallback fonts.
  • Predefined fallback font lists for sans-serif, sans, and monospace types.

Repository and more info: https://github.com/jjcapellan/phaser3-bitmapfont-factory
Demo: https://jjcapellan.github.io/phaser3-bitmapfont-factory/
I hope you find it useful !!

  1. Fonts with ligatures are not supported. ↩︎

  2. In Phaser 3.55.2/WebGL kernings are not used by bitmapText objects. This was fixed in new Phaser v3.60. ↩︎

3 Likes
2

Update:
New version v1.1.1 adds support for the latest versions of Phaser(>3.55.2).
The latest changes made to Phaser have allowed font generation to be more than 4 times faster (Thanks Phaser contributors :grinning:).

1 Like
3

Update:

v2.0.0

This version makes the bitmapFont texture without using Phaser.
This change has caused the position and size of BitmapText to differ slightly from previous versions. So, while no breaking changes have occurred, I have decided to increment the major version.

New improvements:

  • Reduced size of the generated texture: Previously, the offsets for each glyph were not calculated, which caused whitespace to be included within the glyph’s frame. Now, offsets are calculated based on the metrics, ensuring frames are the same size as the glyphs.
  • New texture rendering: A dedicated graphic context is now used to generate the texture on a canvas element. Previously, a Phaser.GameObjects.RenderTexture object was used, drawing multiple Phaser.GameObjects.Text objects on it.
  • Performance improvement
  • Support for new Phaser v4.0.0 .

Fixes:

  • Incorrect font verification: Due to changes in the FontFaceSet API across various browsers for privacy reasons, it is no longer possible to use the check() method of this API to verify font availability. The verification now uses a method based on comparing metrics between the browser’s default font and the desired font.
  • Rendering artifacts: This issue arose in Phaser v3.85.2+. The solution was change the way bitmapfont texture is created. Previously, adding a 1px padding was attempted without success.
1 Like