PixiJS BitmapFont.from

Simple example using BitmapFont instead of Text to render faster text.

by Bouh

HTML

<script src="https://pixijs.download/feature/turbo-bitmap-fonts/pixi-legacy.min.js"></script>

CSS

body { margin: 0; overflow: hidden }

JavaScript

// Boilerplate setup
const app = new PIXI.Application({
	resizeTo: window,
  resolution: devicePixelRatio,
  autoDensity: true,
  backgroundColor: 0x999999,
  forceCanvas: false,
});
document.body.appendChild(app.view);

// Create a new font and give it style
// options same as TextStyle
const fontName = 'foobar';
PIXI.BitmapFont.from(fontName, {
    fill: "#333333",
    fontSize: 100,
    fontWeight: 'bold'
		},
		{
			chars: [[' ', '~'], "é"],
		},
		{ resolution: devicePixelRatio });

// Add the display object
const text = new PIXI.BitmapText(
  'Hello Wor é.! ld',
	{ font: fontName }
);
text.roundPixels = true;
text.anchor.set(0.5);
text.position.set(
	app.screen.width / 2,
  app.screen.height / 2
);
app.stage.addChild(text);