BitmapText

Low-level text drawing

The Text class farms out text-drawing operations to this class.

  • ImageManager.allImages_ob stores data on the bitmap font spritesheet images
  • The data (originating from PD/IMAGE_DATA.js) lists allowed multiples for each font, so eg a font might be allowed to be displayed at 2x, 4x, 8x of its original size
  • The spritesheet images store 1-bit fonts at their smallest sizes
  • The best-fitting multiple is stored as BitmapText.spritesheetScale for use by this and other classes
  • If no font/multiple can be found to fit the desired number of characters in this viewport, use the smallest font and set BitmapText.useShortVersions = true
Author
  • Mark Mayes / mm-dev
License
  • GPL-3.0-only

Methods

(static) cacheCharacter(_char)

Source
Get a character from the spritesheet and cache it to BitmapText.charCanvasCache[_char]
Parameters
Name Type Description
_char string

The character to cache

(static) charCoordsFromSpritesheetIndex(_index) → {object}

Source
Given an index, find the coordinates of a character in the spritesheet
Parameters
Name Type Description
_index number

The index of the character in the spritesheet
Returns
  object

Coordinates {x, y} of where the character appears in the spritesheet

(static) chooseBestFittingFont()

Source
Choose a font and scaling based on viewport dimensions

Calculate character sizes that allow us to fit the desired number of characters (GAME.CHARS_IN_CANVAS_WIDTH and GAME.CHARS_IN_CANVAS_HEIGHT) on the main canvas.

(static) drawCharacterToStringCache(_char, _x, _y)

Source
Get a character from the cache and add it to BitmapText.stringCacheCanvas
Parameters
Name Type Description
_char string

The character to add
_x number

X coordinate where it should be drawn to
_y number

Y coordinate where it should be drawn to

(static) drawLineColor(_x, _y, _color)

Source
The main, coloured text
Parameters
Name Type Description
_x number

X coordinate for the line
_y number

Y coordinate for the line
_color string

The fill colour for the text

(static) drawLineShadow(_x, _y, _color)

Source
Draw the shadow underneath the line of text
Parameters
Name Type Description
_x number

X coordinate for the line
_y number

Y coordinate for the line
_color string

The fill colour for the shadow

(static) getCharCoordsInSpritesheet(_char) → {object}

Source
Find the index of a character in the spritesheet, then use the index to get its coordinates

Charactes are indexed in the spritesheet in left-to-right, top-to-bottom order so eg:

ABCDEFGH
IJKLMNOP

are indexed as:

0, 1, 2, 3, 4, 5, 6, 7, 8,
9, 10, 11, 12, 13, 14, 15, 16
Parameters
Name Type Description
_char string

The character to find
Returns
  object

Coordinates {x, y} of where the character appears in the spritesheet

(static) init()

Source
Create some canvas elements and references to their contexts

BitmapText.stringCacheCanvas

  • When drawing a string this canvas is used as a buffer before drawing to the main canvas.

BitmapText.coloredStringBufferCanvas

  • The bitmap font is black pixels on a transparent background. This canvas is used with globalCompositeOperation = 'destination-atop' to re-colour the black pixels, according to the level settings.

(static) lineToBitmap(_str, _x, _y, _color, _shadowColor)

Source
Convert a line of text to a bitmap and draw it to the main canvas
  • First it is drawn 3 times at different offsets to form the text 'shadow'
  • Then a coloured version is made and stacked on top to create the main coloured text
Parameters
Name Type Description
_str string

The single-line string to be converted to a bitmap
_x number

X coordinate where it should be drawn to
_y number

Y coordinate where it should be drawn to
_color string

Desired colour
_shadowColor string

Colour for shadow

(static) precacheAllCharacters()

Source
Build a cache of all available characters
  • List of available characters is defined in GAME.CHARS_IN_SPRITESHEET_AR
  • Each character is drawn to a canvas and stored in BitmapText.charCanvasCache, indexed by its character
  • So eg the letter 'C' would be stored as BitmapText.charCanvasCache['C']
Unknown characters

We want to gracefully handle characters which don't appear in the spritesheet.

STRING.UNKNOWN_CHARACTER is a special string we use to represent them.

BitmapText.unknownCharacterSpritesheetCoords are some coordinates outside the bitmap font image, meaning they return an empty image (which is in effect a space character).

Intentional space characters are treated as an unknown character, so we don't have to include them on the spritesheet and waste space.

(static) recreateCharCacheCanvas()

Source
Recreate the temporary canvas used for the cached bitmap characters