SdfAtlas

import { SdfAtlas } from 'pixi-silk/text';

Glyphs of any CSS font, rasterised with Canvas2D and turned into signed distance fields, in one 8-bit texture every SilkText shares.

Glyphs are baked on first use at one size (SdfAtlasOptions.size) and drawn at any size from there. The texture starts small and doubles in height when it fills up. Advances and kerning come from measureText, so layout matches what Canvas would draw.

Web fonts must be loaded before their glyphs are baked. Glyphs baked while a font was still loading are rebaked when document.fonts reports it ready, and every text redraws.

Constructors#

Constructor#

new SdfAtlas(options?: SdfAtlasOptions): SdfAtlas;

Parameters#

Parameter	Type
`options`	`SdfAtlasOptions`

Returns#

SdfAtlas

Properties#

Property	Modifier	Type	Default value	Description	Defined in
`cutoff`	`readonly`	`number`	`undefined`	Fraction of the range spent inside glyphs.	text/atlas.ts:154
`pad`	`readonly`	`number`	`undefined`	Empty space around each glyph’s ink, in texels.	text/atlas.ts:156
`radius`	`readonly`	`number`	`undefined`	Distance in raster pixels the 0 to 255 range spans.	text/atlas.ts:152
`size`	`readonly`	`number`	`undefined`	Font size glyphs are baked at, in pixels.	text/atlas.ts:150
`version`	`public`	`number`	`0`	Grows by one each time the atlas starts over. Texts compare it to know their glyphs moved.	text/atlas.ts:158

Accessors#

dimensions#

Get Signature#

get dimensions(): [number, number];

Texture size in texels.

Returns

[number, number]

shared#

Get Signature#

get static shared(): SdfAtlas;

The atlas every SilkText uses unless given its own.

Returns

SdfAtlas

source#

Get Signature#

get source(): BufferImageSource;

The R8 texture with every glyph. When the atlas grows it moves to a new, taller texture, and the shaders it tracks follow. Read it again after SdfAtlas.flush rather than keeping it.

Returns

BufferImageSource

Methods#

advance()#

advance(font: FontSpec, char: string): number;

Advance width of one character at SdfAtlas.size, from measureText.

Parameters#

Parameter	Type
`font`	`FontSpec`
`char`	`string`

Returns#

number

clear()#

clear(): void;

Forgets every glyph and starts over. Texts rebake what they need on their next frame.

Returns#

void

destroy()#

destroy(): void;

Frees the texture.

Returns#

void

flush()#

flush(): void;

Uploads the texture if glyphs were baked since the last call.

Returns#

void

glyph()#

glyph(font: FontSpec, char: string): Glyph;

The baked glyph of a character, baking it now if needed. Call SdfAtlas.flush to upload.

Parameters#

Parameter	Type
`font`	`FontSpec`
`char`	`string`

Returns#

Glyph

kerning()#

kerning(
   font: FontSpec, 
   a: string, 
   b: string
): number;

Kerning between two characters at SdfAtlas.size: how much closer (negative) Canvas puts them.

Parameters#

Parameter	Type
`font`	`FontSpec`
`a`	`string`
`b`	`string`

Returns#

number

metrics()#

metrics(font: FontSpec): FontMetrics;

Vertical metrics of a font at SdfAtlas.size.

Parameters#

Parameter	Type
`font`	`FontSpec`

Returns#

FontMetrics