BitmapText

class BitmapText extends Renderable

a bitmap font object

Constructor

new BitmapText(x: number, y: number, settings: object) → {}

// Use me.loader.preload or me.loader.load to load assets
me.loader.preload([
    { name: "arial", type: "binary" src: "data/font/arial.fnt" },
    { name: "arial", type: "image" src: "data/font/arial.png" },
])
// Then create an instance of your bitmap font:
let myFont = new me.BitmapText(x, y, {font:"arial", text:"Hello"});
// two possibilities for using "myFont"
// either call the draw function from your Renderable draw function
myFont.draw(renderer, "Hello!", 0, 0);
// or just add it to the word container
me.game.world.addChild(myFont);

Parameters:
Name	Type	Attributes	Default	Description
x	number			position of the text object
y	number			position of the text object
settings	object			the text configuration
settings.font	string \| Image			a font name to identify the corresponing source image
settings.fontData	string	<optional>	settings.font	the bitmap font data corresponding name, or the bitmap font data itself
settings.size	number	<optional>		size a scaling ratio
settings.fillStyle	Color \| string	<optional>		a CSS color value used to tint the bitmapText (@see BitmapText.tint)
settings.lineWidth	number	<optional>	1	line width, in pixels, when drawing stroke
settings.textAlign	string	<optional>	"left"	horizontal text alignment
settings.textBaseline	string	<optional>	"top"	the text baseline
settings.lineHeight	number	<optional>	1.0	line spacing height
settings.anchorPoint	Vector2d	<optional>	{x:0.0, y:0.0}	anchor point to draw the text at
settings.wordWrapWidth	number	<optional>		the maximum length in CSS pixel for a single segment of text
settings.text	string \| Array<string>	<optional>		a string, or an array of strings

Summary

Properties from BitmapText

Color	fillStyle
number	lineHeight = 1.0
string	textAlign = "left"
string	textBaseline = "top"
number	wordWrapWidth = -1

Methods from BitmapText

	draw(renderer: CanvasRenderer \| WebGLRenderer, text: string, x: number, y: number)
TextMetrics	measureText(text: string)
BitmapText	resize(scale: number)
BitmapText	set(textAlign: string, scale: number)
BitmapText	setText(value: number \| string \| Array<string>)
Bounds	updateBounds(absolute: boolean)

Properties inherited from Renderable

number	alpha = 1.0
boolean	alwaysUpdate = false
Container \| Entity	ancestor = undefined
ObservableVector2d	anchorPoint = <0.5,0.5>
boolean	autoTransform = true
string	blendMode = "normal"
Body	body
Matrix2d	currentTransform
number	depth
boolean	floating = false
string	GUID
boolean	inViewport = false
boolean	isDirty = true
boolean	isFlippedX
boolean	isFlippedY
boolean	isFloating
boolean	isKinematic = true
boolean	isPersistent = false
Rect \| RoundRect \| Polygon \| Line \| Ellipse	mask = undefined
string	name = ""
Function	onVisibilityChange = undefined
Application	parentApp
ObservableVector3d	pos
GLShader	shader = undefined
Color	tint = (255, 255, 255)
boolean	updateWhenPaused = false

Properties inherited from Rect

number	bottom
number	centerX
number	centerY
number	height
number	left
number	right
number	top
string	type = "Rectangle"
number	width

Properties inherited from Polygon

Array<Vector2d>

points

Methods inherited from Renderable

number	angleTo(target: Renderable \| Vector2d \| Vector3d)
number	distanceTo(target: Renderable \| Vector2d \| Vector3d)
Renderable	flipX(flip: boolean)
Renderable	flipY(flip: boolean)
Vector2d	getAbsolutePosition()
Bounds	getBounds()
number	getOpacity()
Renderable	lookAt(target: Renderable \| Vector2d \| Vector3d)
boolean	onCollision(response: ResponseObject, other: Renderable \| Container \| Entity \| Sprite \| NineSliceSprite)
	onDestroyEvent()
	postDraw(renderer: CanvasRenderer \| WebGLRenderer)
	preDraw(renderer: CanvasRenderer \| WebGLRenderer)
Renderable	rotate(angle: number, v: Vector2d \| ObservableVector2d)
Renderable	scale(x: number, y: number)
Renderable	scaleV(v: Vector2d)
	setOpacity(alpha: number)
Renderable	transform(m: Matrix2d)
boolean	update(dt: number)

Methods inherited from Rect

Rect	centerOn(x: number, y: number)
Rect	clone()
boolean	contains(x: number \| Vector2d \| Rect, y: number)
Rect	copy(rect: Rect)
boolean	equals(rect: Rect)
boolean	isFinite()
boolean	overlaps(rect: Rect)
Rect	setShape(x: number, y: number, w: number \| Vector2d<Array>, h: number)
Polygon	toPolygon()
Rect	union(rect: Rect)

Methods inherited from Polygon

Array<number>	getIndices()
boolean	isConvex()
Polygon	recalc()
Polygon	setVertices(vertices: Array<Vector2d>)
	shift(x: number \| Vector2d, y: number)
Polygon	to2d()
Polygon	toIso()
Polygon	translate(x: number \| Vector2d, y: number)

Public Properties

fillStyle bitmaptext.js:243

fillStyle: Color

Color

defines the color used to tint the bitmap text

See: Renderable#tint

lineHeight bitmaptext.js:64

lineHeight: number = 1.0

number

Set the line spacing height (when displaying multi-line strings).
Current font height will be multiplied with this value to set the line height.

textAlign bitmaptext.js:46

textAlign: string = "left"

string

Set the default text alignment (or justification),
possible values are "left", "right", and "center".

textBaseline bitmaptext.js:55

textBaseline: string = "top"

string

Set the text baseline (e.g. the Y-coordinate for the draw operation),
possible values are "top", "hanging, "middle, "alphabetic, "ideographic, "bottom"

wordWrapWidth bitmaptext.js:73

wordWrapWidth: number = -1

number

the maximum length in CSS pixel for a single segment of text. (use -1 to disable word wrapping)

Public Methods

draw bitmaptext.js:285

draw(renderer: CanvasRenderer | WebGLRenderer, text: string, x: number, y: number) → {}

draw the bitmap font

Parameters:
Name	Type	Attributes	Description
renderer	CanvasRenderer \| WebGLRenderer		Reference to the destination renderer instance
text	string	<optional>
x	number	<optional>
y	number	<optional>

measureText bitmaptext.js:276

measureText(text: string) → {TextMetrics}

measure the given text size in pixels

Parameters:
Name	Type	Attributes	Description
text	string	<optional>

Returns:
Type	Description
TextMetrics	a TextMetrics object with two properties: `width` and `height`, defining the output dimensions

resize bitmaptext.js:261

resize(scale: number) → {BitmapText}

change the font display size

Parameters:
Name	Type	Description
scale	number	ratio

Returns:
Type	Description
BitmapText	this object for chaining

set bitmaptext.js:143

set(textAlign: string, scale: number) → {BitmapText}

change the font settings

Parameters:
Name	Type	Attributes	Description
textAlign	string		("left", "center", "right")
scale	number	<optional>

Returns:
Type	Description
BitmapText	this object for chaining

setText bitmaptext.js:160

setText(value: number | string | Array<string>) → {BitmapText}

change the text to be displayed

Parameters:
Name	Type	Default	Description
value	number \| string \| Array<string>	""	a string, or an array of strings

Returns:
Type	Description
BitmapText	this object for chaining

updateBounds bitmaptext.js:184

updateBounds(absolute: boolean) → {Bounds}

update the bounding box for this Bitmap Text.

Parameters:
Name	Type	Attributes	Default	Description
absolute	boolean	<optional>	true	update the bounds size and position in (world) absolute coordinates

Returns:
Type	Description
Bounds	this Bitmap Text bounding box Rectangle object