Draw. ImageFont

Image Font Object - Draw text by using tiles in an image

  • 96 characters (from space to tilde) are stored in an image
  • A 8x8 default engine font is supplied for general use
  • This system is WebGL enabled for fast text rendering
  • Fonts can also be colored and scaled along each axis

Constructor

new ImageFont(tileInfo)

Create an image font

Parameters:
NameTypeDescription
tileInfoTileInfo

Tile info of first character in font

Example
// use built in font
const font = engineImageFont;

// draw text
font.drawTextScreen('LittleJS\nHello World!', vec2(200, 50), 16);

Members

tileInfo

Properties
TypeDescription
TileInfo

Tile info for the font

Methods

drawText(text, pos, sizeopt, centeropt, coloropt, useWebGLopt, contextopt)

Draw text in world space using the image font

  • The text stays upright and ignores cameraAngle, each glyph is snapped to whole screen pixels to keep it crisp
Parameters:
NameTypeAttributesDefaultDescription
textstring | number
posVector2
sizeVector2 | number<optional>
1
centerboolean<optional>
true

center each line on pos, and the lines of multi-line text around it

colorColor<optional>
WHITE
useWebGLboolean<optional>
glEnable
contextCanvasRenderingContext2D | OffscreenCanvasRenderingContext2D<optional>

drawTextScreen(text, pos, size, centeropt, coloropt, useWebGLopt, contextopt)

Draw text in screen space using the image font

Parameters:
NameTypeAttributesDefaultDescription
textstring | number
posVector2
sizeVector2 | number
centerboolean<optional>
true

center each line on pos, and the lines of multi-line text around it

colorColor<optional>
WHITE
useWebGLboolean<optional>
glEnable
contextCanvasRenderingContext2D | OffscreenCanvasRenderingContext2D<optional>

getGlyphPos(index, posopt) → {Vector2}

Get where a glyph sits in the texture: counted in the font's own columns when its tile has them, like a font packed by loadSprite, otherwise along the texture's grid from the font's first tile, the way tile() lays it out

Parameters:
NameTypeAttributesDescription
indexnumber

Glyph number, 0 is the space and the characters follow in ASCII order

posVector2<optional>

Written into and returned, for a loop that places many

Returns:
Type: 
Vector2