pixi-sdf-text

Signed distance fields text implementation for PixiJS

SDF is the most efficient way to draw text in WebGL. It uses special kind of raster atlases and GLSL shader to draw vector scalable text in a very performant way on GPU.

Demo

Installation

npm i pixi-sdf-text --save

Usage

var style = {
    fontSize: 24,
    fontWeight: 'bold',
    fill: 0x39FF14,
    align: 'left',
    wordWrapWidth: 400,
    lineHeight: 64,
    fontURL: 'assets/Lato-Regular-64.fnt',
    imageURL: 'assets/lato.png'
};
 
var sdfText = new PIXI.sdf.Text('Abc', style);
stage.addChild(sdfText);

How to generate font descriptors and SDF atlases?

Use this manual

Bugs

Feel free to submit issues to GitHub tracker

License

MIT: http://mit-license.org/

Copyright 2017 Denis Radin aka PixelsCommander