Class: Phaser.RetroFont

Constructor

new RetroFont(game, key, characterWidth, characterHeight, chars, charsPerRow, xSpacing, ySpacing, xOffset, yOffset)

A Retro Font is similar to a BitmapFont, in that it uses a texture to render the text. However unlike a BitmapFont every character in a RetroFont
is the same size. This makes it similar to a sprite sheet. You typically find font sheets like this from old 8/16-bit games and demos.

Parameters

Name	Type	Argument	Default	Description
`game`	Phaser.Game			Current game instance.
`key`	string			The font set graphic set as stored in the Game.Cache.
`characterWidth`	number			The width of each character in the font set.
`characterHeight`	number			The height of each character in the font set.
`chars`	string			The characters used in the font set, in display order. You can use the TEXT_SET consts for common font set arrangements.
`charsPerRow`	number	<optional>		The number of characters per row in the font set. If not given charsPerRow will be the image width / characterWidth.
`xSpacing`	number	<optional>	0	If the characters in the font set have horizontal spacing between them set the required amount here.
`ySpacing`	number	<optional>	0	If the characters in the font set have vertical spacing between them set the required amount here.
`xOffset`	number	<optional>	0	If the font set doesn't start at the top left of the given image, specify the X coordinate offset here.
`yOffset`	number	<optional>	0	If the font set doesn't start at the top left of the given image, specify the Y coordinate offset here.

Source code: gameobjects/RetroFont.js (Line 25)

Extends

Phaser.RenderTexture

Public Properties

[static] ALIGN_CENTER : string

Align each line of multi-line text in the center.

Source code: gameobjects/RetroFont.js (Line 196)

[static] ALIGN_LEFT : string

Align each line of multi-line text to the left.

Source code: gameobjects/RetroFont.js (Line 182)

[static] ALIGN_RIGHT : string

Align each line of multi-line text to the right.

Source code: gameobjects/RetroFont.js (Line 189)

[static] TEXT_SET1 : string

Text Set 1 = !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{ | }~

Source code: gameobjects/RetroFont.js (Line 203)

[static] TEXT_SET2 : string

Text Set 2 = !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ

Source code: gameobjects/RetroFont.js (Line 210)

[static] TEXT_SET3 : string

Text Set 3 = ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

Source code: gameobjects/RetroFont.js (Line 217)

[static] TEXT_SET4 : string

Text Set 4 = ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

Source code: gameobjects/RetroFont.js (Line 224)

[static] TEXT_SET5 : string

Text Set 5 = ABCDEFGHIJKLMNOPQRSTUVWXYZ.,/() '!?-*:0123456789

Source code: gameobjects/RetroFont.js (Line 231)

[static] TEXT_SET6 : string

Text Set 6 = ABCDEFGHIJKLMNOPQRSTUVWXYZ!?:;0123456789"(),-.'

Source code: gameobjects/RetroFont.js (Line 238)

[static] TEXT_SET7 : string

Text Set 7 = AGMSY+:4BHNTZ!;5CIOU.?06DJPV,(17EKQW")28FLRX-'39

Source code: gameobjects/RetroFont.js (Line 245)

[static] TEXT_SET8 : string

Text Set 8 = 0123456789 .ABCDEFGHIJKLMNOPQRSTUVWXYZ

Source code: gameobjects/RetroFont.js (Line 252)

[static] TEXT_SET9 : string

Text Set 9 = ABCDEFGHIJKLMNOPQRSTUVWXYZ()-0123456789.:,'"?!

Source code: gameobjects/RetroFont.js (Line 259)

[static] TEXT_SET10 : string

Text Set 10 = ABCDEFGHIJKLMNOPQRSTUVWXYZ

Source code: gameobjects/RetroFont.js (Line 266)

[static] TEXT_SET11 : string

Text Set 11 = ABCDEFGHIJKLMNOPQRSTUVWXYZ.,"-+!?()':;0123456789

Source code: gameobjects/RetroFont.js (Line 273)

align : string

Alignment of the text when multiLine = true or a fixedWidth is set. Set to RetroFont.ALIGN_LEFT (default), RetroFont.ALIGN_RIGHT or RetroFont.ALIGN_CENTER.

Source code: gameobjects/RetroFont.js (Line 77)

autoUpperCase : boolean

Automatically convert any text to upper case. Lots of old bitmap fonts only contain upper-case characters, so the default is true.

Default Value

true

Source code: gameobjects/RetroFont.js (Line 89)

baseTexture : PIXI.BaseTexture

The base texture object that this texture uses

Inherited From

PIXI.RenderTexture#baseTexture

Source code: pixi/textures/RenderTexture.js (Line 78)

characterHeight : number

The height of each character in the font set.

Source code: gameobjects/RetroFont.js (Line 45)

characterPerRow : number

The number of characters per row in the font set.

Source code: gameobjects/RetroFont.js (Line 60)

characterSpacingX : number

If the characters in the font set have horizontal spacing between them set the required amount here.

Source code: gameobjects/RetroFont.js (Line 50)

characterSpacingY : number

If the characters in the font set have vertical spacing between them set the required amount here.

Source code: gameobjects/RetroFont.js (Line 55)

characterWidth : number

The width of each character in the font set.

Source code: gameobjects/RetroFont.js (Line 40)

crop :Rectangle

This is the area of the BaseTexture image to actually copy to the Canvas / WebGL when rendering,
irrespective of the actual frame size or placement (which can be influenced by trimmed texture atlases)

Inherited From

PIXI.RenderTexture#crop

Source code: pixi/textures/RenderTexture.js (Line 69)

customSpacingX : number

Adds horizontal spacing between each character of the font, in pixels.

Source code: gameobjects/RetroFont.js (Line 95)

customSpacingY : number

Adds vertical spacing between each line of multi-line text, set in pixels.

Source code: gameobjects/RetroFont.js (Line 101)

fixedWidth : number

If you need this RetroFont image to have a fixed width you can set the width in this value.
If text is wider than the width specified it will be cropped off.

Source code: gameobjects/RetroFont.js (Line 108)

fontSet :Image

A reference to the image stored in the Game.Cache that contains the font.

Source code: gameobjects/RetroFont.js (Line 113)

frame :Rectangle

The framing rectangle of the render texture

Inherited From

PIXI.RenderTexture#frame

Source code: pixi/textures/RenderTexture.js (Line 61)

frameData : Phaser.FrameData

The FrameData representing this Retro Font.

Source code: gameobjects/RetroFont.js (Line 130)

game : Phaser.Game

A reference to the currently running game.

Inherited From

Phaser.RenderTexture#game

Source code: gameobjects/RenderTexture.js (Line 30)

height : number

The height of the render texture

Inherited From

PIXI.RenderTexture#height

Source code: pixi/textures/RenderTexture.js (Line 45)

isTiling : boolean

Is this a tiling texture? As used by the likes of a TilingSprite.

Inherited From

PIXI.Texture#isTiling

Source code: pixi/textures/Texture.js (Line 79)

key : string

The key of the RenderTexture in the Cache, if stored there.

Inherited From

Phaser.RenderTexture#key

Source code: gameobjects/RenderTexture.js (Line 35)

multiLine : boolean

If set to true all carriage-returns in text will form new lines (see align). If false the font will only contain one single line of text (the default)

Source code: gameobjects/RetroFont.js (Line 83)

noFrame : boolean

Does this Texture have any frame data assigned to it?

Inherited From

PIXI.Texture#noFrame

Source code: pixi/textures/Texture.js (Line 28)

[readonly] offsetX : number

If the font set doesn't start at the top left of the given image, specify the X coordinate offset here.

Source code: gameobjects/RetroFont.js (Line 66)

[readonly] offsetY : number

If the font set doesn't start at the top left of the given image, specify the Y coordinate offset here.

Source code: gameobjects/RetroFont.js (Line 72)

renderer : PIXI.CanvasRenderer | PIXI.WebGLRenderer

The renderer this RenderTexture uses. A RenderTexture can only belong to one renderer at the moment if its webGL.

Type

PIXI.CanvasRenderer | PIXI.WebGLRenderer

Inherited From

PIXI.RenderTexture#renderer

Source code: pixi/textures/RenderTexture.js (Line 99)

requiresReTint : boolean

This will let a renderer know that a tinted parent has updated its texture.

Inherited From

PIXI.Texture#requiresReTint

Source code: pixi/textures/Texture.js (Line 95)

requiresUpdate : boolean

This will let a renderer know that a texture has been updated (used mainly for webGL uv updates)

Inherited From

PIXI.Texture#requiresUpdate

Source code: pixi/textures/Texture.js (Line 87)

resolution : number

The Resolution of the texture.

Inherited From

PIXI.RenderTexture#resolution

Source code: pixi/textures/RenderTexture.js (Line 53)

smoothed : boolean

Sets if the stamp is smoothed or not.

Source code: gameobjects/RetroFont.js (Line 585)

[readonly] stamp : Phaser.Image

The image that is stamped to the RenderTexture for each character in the font.

Source code: gameobjects/RetroFont.js (Line 163)

text : string

Set this value to update the text in this sprite. Carriage returns are automatically stripped out if multiLine is false. Text is converted to upper case if autoUpperCase is true.

Source code: gameobjects/RetroFont.js (Line 547)

trim :Rectangle

The texture trim data.

Inherited From

PIXI.Texture#trim

Source code: pixi/textures/Texture.js (Line 63)

type : number

Base Phaser object type.

Source code: gameobjects/RetroFont.js (Line 170)

valid : boolean

Inherited From

PIXI.RenderTexture#valid

Source code: pixi/textures/RenderTexture.js (Line 125)

width : number

The with of the render texture

Inherited From

PIXI.RenderTexture#width

Source code: pixi/textures/RenderTexture.js (Line 37)

Public Methods

buildRetroFontText()

Updates the texture with the new text.

Source code: gameobjects/RetroFont.js (Line 328)

clear()

Clears the RenderTexture.

Inherited From

PIXI.RenderTexture#clear

Source code: pixi/textures/RenderTexture.js (Line 175)

destroy(destroyBase)

Destroys this texture

Parameters

Name	Type	Description
`destroyBase`	Boolean	Whether to destroy the base texture as well

Inherited From

PIXI.Texture#destroy

Source code: pixi/textures/Texture.js (Line 165)

getBase64() → {String}

Will return a base64 encoded string of this texture. It works by calling RenderTexture.getCanvas and then running toDataURL on that.

Returns

String -

A base64 encoded string of the texture.

Inherited From

PIXI.RenderTexture#getBase64

Source code: pixi/textures/RenderTexture.js (Line 309)

getCanvas() → {HTMLCanvasElement}

Creates a Canvas element, renders this RenderTexture to it and then returns it.

Returns

HTMLCanvasElement -

A Canvas element with the texture rendered on.

Inherited From

PIXI.RenderTexture#getCanvas

Source code: pixi/textures/RenderTexture.js (Line 320)

getImage() → {Image}

Will return a HTML Image of the texture

Returns

Image -

Inherited From

PIXI.RenderTexture#getImage

Source code: pixi/textures/RenderTexture.js (Line 296)

getLongestLine() → {number}

Works out the longest line of text in _text and returns its length

Returns

number -

The length of the longest line of text.

Source code: gameobjects/RetroFont.js (Line 459)

pasteLine(line, x, y, customSpacingX)

Internal function that takes a single line of text (2nd parameter) and pastes it into the BitmapData at the given coordinates.
Used by getLine and getMultiLine

Parameters

Name	Type	Description
`line`	string	The single line of text to paste.
`x`	number	The x coordinate.
`y`	number	The y coordinate.
`customSpacingX`	number	Custom X spacing.

Source code: gameobjects/RetroFont.js (Line 420)

<internal> removeUnsupportedCharacters(stripCR) → {string}

Internal helper function that removes all unsupported characters from the _text String, leaving only characters contained in the font set.

Parameters

Name	Type	Argument	Default	Description
`stripCR`	boolean	<optional>	true	Should it strip carriage returns as well?

Returns

string -

A clean version of the string.

Internal:

This member is internal (protected) and may be modified or removed in the future.

Source code: gameobjects/RetroFont.js (Line 486)

render(displayObject, matrix, clear)

This function will draw the display object to the RenderTexture.

In versions of Phaser prior to 2.4.0 the second parameter was a Phaser.Point object.
This is now a Matrix allowing you much more control over how the Display Object is rendered.
If you need to replicate the earlier behavior please use Phaser.RenderTexture.renderXY instead.

If you wish for the displayObject to be rendered taking its current scale, rotation and translation into account then either
pass null, leave it undefined or pass displayObject.worldTransform as the matrix value.

Parameters

Name	Type	Argument	Default	Description
`displayObject`	Phaser.Sprite \| Phaser.Image \| Phaser.Text \| Phaser.BitmapText \| Phaser.Group			The display object to render to this texture.
`matrix`	Phaser.Matrix	<optional>		Optional matrix to apply to the display object before rendering. If null or undefined it will use the worldTransform matrix of the given display object.
`clear`	boolean	<optional>	false	If true the texture will be cleared before the display object is drawn.

Inherited From

Phaser.RenderTexture#render

Source code: gameobjects/RenderTexture.js (Line 117)

renderRawXY(displayObject, x, y, clear)

This function will draw the display object to the RenderTexture at the given coordinates.

When the display object is drawn it doesn't take into account scale, rotation or translation.

If you need those then use RenderTexture.renderXY instead.

Parameters

Name	Type	Argument	Default	Description
`displayObject`	Phaser.Sprite \| Phaser.Image \| Phaser.Text \| Phaser.BitmapText \| Phaser.Group			The display object to render to this texture.
`x`	number			The x position to render the object at.
`y`	number			The y position to render the object at.
`clear`	boolean	<optional>	false	If true the texture will be cleared before the display object is drawn.

Inherited From

Phaser.RenderTexture#renderRawXY

Source code: gameobjects/RenderTexture.js (Line 89)

renderXY(displayObject, x, y, clear)

This function will draw the display object to the RenderTexture at the given coordinates.

When the display object is drawn it takes into account scale and rotation.

If you don't want those then use RenderTexture.renderRawXY instead.

Parameters

Name	Type	Argument	Default	Description
`displayObject`	Phaser.Sprite \| Phaser.Image \| Phaser.Text \| Phaser.BitmapText \| Phaser.Group			The display object to render to this texture.
`x`	number			The x position to render the object at.
`y`	number			The y position to render the object at.
`clear`	boolean	<optional>	false	If true the texture will be cleared before the display object is drawn.

Inherited From

Phaser.RenderTexture#renderXY

Source code: gameobjects/RenderTexture.js (Line 57)

resize(width, height, updateBase)

Resizes the RenderTexture.

Parameters

Name	Type	Description
`width`	Number	The width to resize to.
`height`	Number	The height to resize to.
`updateBase`	Boolean	Should the baseTexture.width and height values be resized as well?

Inherited From

PIXI.RenderTexture#resize

Source code: pixi/textures/RenderTexture.js (Line 139)

setFixedWidth(width, lineAlignment)

If you need this RetroFont to have a fixed width and custom alignment you can set the width here.
If text is wider than the width specified it will be cropped off.

Parameters

Name	Type	Argument	Default	Description
`width`	number			Width in pixels of this RetroFont. Set to zero to disable and re-enable automatic resizing.
`lineAlignment`	string	<optional>	'left'	Align the text within this width. Set to RetroFont.ALIGN_LEFT (default), RetroFont.ALIGN_RIGHT or RetroFont.ALIGN_CENTER.

Source code: gameobjects/RetroFont.js (Line 275)

setFrame(frame)

Specifies the region of the baseTexture that this texture will use.

Parameters

Name	Type	Description
`frame`	Rectangle	The frame of the texture to set it to

Inherited From

PIXI.Texture#setFrame

Source code: pixi/textures/Texture.js (Line 178)

setText(content, multiLine, characterSpacing, lineSpacing, lineAlignment, allowLowerCase)

A helper function that quickly sets lots of variables at once, and then updates the text.

Parameters

Name	Type	Argument	Default	Description
`content`	string			The text of this sprite.
`multiLine`	boolean	<optional>	false	Set to true if you want to support carriage-returns in the text and create a multi-line sprite instead of a single line.
`characterSpacing`	number	<optional>	0	To add horizontal spacing between each character specify the amount in pixels.
`lineSpacing`	number	<optional>	0	To add vertical spacing between each line of text, set the amount in pixels.
`lineAlignment`	string	<optional>	'left'	Align each line of multi-line text. Set to RetroFont.ALIGN_LEFT, RetroFont.ALIGN_RIGHT or RetroFont.ALIGN_CENTER.
`allowLowerCase`	boolean	<optional>	false	Lots of bitmap font sets only include upper-case characters, if yours needs to support lower case then set this to true.

Source code: gameobjects/RetroFont.js (Line 293)

updateOffset(xOffset, yOffset)

Updates the x and/or y offset that the font is rendered from. This updates all of the texture frames, so be careful how often it is called.
Note that the values given for the x and y properties are either ADDED to or SUBTRACTED from (if negative) the existing offsetX/Y values of the characters.
So if the current offsetY is 8 and you want it to start rendering from y16 you would call updateOffset(0, 8) to add 8 to the current y offset.

Parameters

Name	Type	Argument	Default	Description
`xOffset`	number	<optional>	0	If the font set doesn't start at the top left of the given image, specify the X coordinate offset here.
`yOffset`	number	<optional>	0	If the font set doesn't start at the top left of the given image, specify the Y coordinate offset here.

Source code: gameobjects/RetroFont.js (Line 514)

© 2016 Richard Davey, Photon Storm Ltd.
Licensed under the MIT License.
http://phaser.io/docs/2.6.2/Phaser.RetroFont.html