Draw. FontImage

Font Image 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 FontImage(tileInfo)

Create an image font

Parameters:
NameTypeDescription
tileInfoTileInfo

Tile info of first characeter in font

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

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

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

Parameters:
NameTypeAttributesDefaultDescription
textstring | number
posVector2
sizeVector2 | number<optional>
1
centerboolean<optional>
true
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
colorColor<optional>
WHITE
useWebGLboolean<optional>
glEnable
contextCanvasRenderingContext2D | OffscreenCanvasRenderingContext2D<optional>