PixiJS BitmapFont.from

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

by Bouh

HTML

<script src="https://pixijs.download/dev/pixi-legacy.min.js"></script>
<script src="http://witly.fr/GD11/Silver.ttf"></script>

CSS

body { margin: 0; overflow: hidden }

@font-face{
            font-family: "Silver";
            src: url("http://witly.fr/GD11/Silver.ttf");
        }

JavaScript

// Boilerplate setup
const app = new PIXI.Application({
	backgroundColor : 0x000000,
	forceCanvas: false,
	resolution: window.devicePixelRatio || 1,
	autoDensity: true,
	resizeTo: window,
	antialias: true,
});

PIXI.settings.PRECISION_FRAGMENT = PIXI.PRECISION.LOW;
PIXI.settings.PRECISION_VERTEX = PIXI.PRECISION.LOW;
PIXI.settings.MIPMAP_TEXTURES = PIXI.MIPMAP_MODES.OFF;

PIXI.settings.ROUND_PIXELS = true;

PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;

document.body.appendChild(app.view);

// Create a new font and give it style
// options same as TextStyle
const fontName = 'presetComicFont';
PIXI.BitmapFont.from(fontName, {
	fill: "#ffffff",
	fontSize: 200,
	fontFamily: 'Silver', //
	//dropShadow: true,
	//dropShadowAngle: 1,
	//dropShadowColor: "#ffffff",
	//dropShadowAlpha: 1,
	//dropShadowDistance: 1,
}, { resolution: devicePixelRatio });

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