Class: RetroFont

Phaser. RetroFont

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:
src/gameobjects/RetroFont.js line 25

Extends

Members

<static, constant> ALIGN_CENTER : string

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

Type:
  • string
Source:
src/gameobjects/RetroFont.js line 197

<static, constant> ALIGN_LEFT : string

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

Type:
  • string
Source:
src/gameobjects/RetroFont.js line 183

<static, constant> ALIGN_RIGHT : string

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

Type:
  • string
Source:
src/gameobjects/RetroFont.js line 190

<static, constant> TEXT_SET1 : string

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

Type:
  • string
Source:
src/gameobjects/RetroFont.js line 204

<static, constant> TEXT_SET2 : string

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

Type:
  • string
Source:
src/gameobjects/RetroFont.js line 211

<static, constant> TEXT_SET3 : string

Text Set 3 = ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

Type:
  • string
Source:
src/gameobjects/RetroFont.js line 218

<static, constant> TEXT_SET4 : string

Text Set 4 = ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

Type:
  • string
Source:
src/gameobjects/RetroFont.js line 225

<static, constant> TEXT_SET5 : string

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

Type:
  • string
Source:
src/gameobjects/RetroFont.js line 232

<static, constant> TEXT_SET6 : string

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

Type:
  • string
Source:
src/gameobjects/RetroFont.js line 239

<static, constant> TEXT_SET7 : string

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

Type:
  • string
Source:
src/gameobjects/RetroFont.js line 246

<static, constant> TEXT_SET8 : string

Text Set 8 = 0123456789 .ABCDEFGHIJKLMNOPQRSTUVWXYZ

Type:
  • string
Source:
src/gameobjects/RetroFont.js line 253

<static, constant> TEXT_SET9 : string

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

Type:
  • string
Source:
src/gameobjects/RetroFont.js line 260

<static, constant> TEXT_SET10 : string

Text Set 10 = ABCDEFGHIJKLMNOPQRSTUVWXYZ

Type:
  • string
Source:
src/gameobjects/RetroFont.js line 267

<static, constant> TEXT_SET11 : string

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

Type:
  • string
Source:
src/gameobjects/RetroFont.js line 274

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.

Type:
  • string
Source:
src/gameobjects/RetroFont.js line 78

autoUpperCase : boolean

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

Type:
  • boolean
Default Value:
  • true
Source:
src/gameobjects/RetroFont.js line 90

baseTexture : BaseTexture

The base texture object that this texture uses

Type:
  • BaseTexture
Inherited From:
Source:
src/gameobjects/RenderTexture.js line 67

characterHeight : number

The height of each character in the font set.

Type:
  • number
Source:
src/gameobjects/RetroFont.js line 46

characterPerRow : number

The number of characters per row in the font set.

Type:
  • number
Source:
src/gameobjects/RetroFont.js line 61

characterSpacingX : number

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

Type:
  • number
Source:
src/gameobjects/RetroFont.js line 51

characterSpacingY : number

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

Type:
  • number
Source:
src/gameobjects/RetroFont.js line 56

characterWidth : number

The width of each character in the font set.

Type:
  • number
Source:
src/gameobjects/RetroFont.js line 41

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)

Type:
  • Rectangle
Inherited From:
Source:
src/pixi/textures/Texture.js line 134

customSpacingX : number

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

Type:
  • number
Source:
src/gameobjects/RetroFont.js line 96

customSpacingY : number

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

Type:
  • number
Source:
src/gameobjects/RetroFont.js line 102

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.

Type:
  • number
Source:
src/gameobjects/RetroFont.js line 109

fontSet : Image

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

Type:
  • Image
Source:
src/gameobjects/RetroFont.js line 114

frame : Rectangle

The frame specifies the region of the base texture that this texture uses

Type:
  • Rectangle
Inherited From:
Source:
src/pixi/textures/Texture.js line 60

frameData : Phaser.FrameData

The FrameData representing this Retro Font.

Type:
Source:
src/gameobjects/RetroFont.js line 131

game : Phaser.Game

A reference to the currently running game.

Type:
Inherited From:
Source:
src/gameobjects/RenderTexture.js line 35

height : Number

The height of the Texture in pixels.

Type:
  • Number
Inherited From:
Source:
src/pixi/textures/Texture.js line 125

isTiling : Boolean

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

Type:
  • Boolean
Inherited From:
Source:
src/pixi/textures/Texture.js line 84

key : string

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

Type:
  • string
Inherited From:
Source:
src/gameobjects/RenderTexture.js line 40

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)

Type:
  • boolean
Source:
src/gameobjects/RetroFont.js line 84

noFrame : Boolean

Does this Texture have any frame data assigned to it?

Type:
  • Boolean
Inherited From:
Source:
src/pixi/textures/Texture.js line 33

<readonly> offsetX : number

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

Type:
  • number
Source:
src/gameobjects/RetroFont.js line 67

<readonly> offsetY : number

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

Type:
  • number
Source:
src/gameobjects/RetroFont.js line 73

renderer : CanvasRenderer | WebGLRenderer

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

Type:
  • CanvasRenderer | WebGLRenderer
Inherited From:
Source:
src/gameobjects/RenderTexture.js line 85

requiresReTint : Boolean

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

Type:
  • Boolean
Inherited From:
Overrides:
Source:
src/pixi/textures/Texture.js line 100

requiresUpdate : Boolean

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

Type:
  • Boolean
Inherited From:
Source:
src/pixi/textures/Texture.js line 92

rotated : Boolean

A flag that controls if this frame is rotated or not. Rotation allows you to use rotated frames in texture atlas packing, it has nothing to do with Sprite rotation.

Type:
  • Boolean
Inherited From:
Source:
src/pixi/textures/Texture.js line 144

smoothed : boolean

Sets if the stamp is smoothed or not.

Type:
  • boolean
Source:
src/gameobjects/RetroFont.js line 595

<readonly> stamp : Phaser.Image

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

Type:
Source:
src/gameobjects/RetroFont.js line 164

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.

Type:
  • string
Source:
src/gameobjects/RetroFont.js line 555

trim : Rectangle

The texture trim data.

Type:
  • Rectangle
Inherited From:
Source:
src/pixi/textures/Texture.js line 68

type : number

Base Phaser object type.

Type:
  • number
Overrides:
Source:
src/gameobjects/RetroFont.js line 171

valid : Boolean

Type:
  • Boolean
Inherited From:
Source:
src/gameobjects/RenderTexture.js line 108

width : Number

The width of the Texture in pixels.

Type:
  • Number
Inherited From:
Source:
src/pixi/textures/Texture.js line 117

Methods

buildRetroFontText()

Updates the texture with the new text.

Source:
src/gameobjects/RetroFont.js line 331

clear()

Clears the RenderTexture.

Inherited From:
Source:
src/gameobjects/RenderTexture.js line 263

destroy(destroyBase)

Destroys this texture

Parameters:
Name Type Description
destroyBase Boolean

Whether to destroy the base texture as well

Inherited From:
Source:
src/pixi/textures/Texture.js line 174

fromCanvas(canvas, scaleMode)

Helper function that creates a new a Texture based on the given canvas element.

Parameters:
Name Type Description
canvas Canvas

The canvas element source of the texture

scaleMode Number

See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values

Inherited From:
Source:
src/pixi/textures/Texture.js line 287
Returns:
Type
Texture

getBase64()

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

Inherited From:
Source:
src/gameobjects/RenderTexture.js line 408
Returns:

A base64 encoded string of the texture.

Type
String

getCanvas()

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

Inherited From:
Source:
src/gameobjects/RenderTexture.js line 421
Returns:

A Canvas element with the texture rendered on.

Type
HTMLCanvasElement

getImage()

Will return a HTML Image of the texture

Inherited From:
Source:
src/gameobjects/RenderTexture.js line 392
Returns:
Type
Image

getLongestLine()

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

Source:
src/gameobjects/RetroFont.js line 464
Returns:

The length of the longest line of text.

Type
number

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:
src/gameobjects/RetroFont.js line 424

<protected> removeUnsupportedCharacters( [stripCR])

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?

Source:
src/gameobjects/RetroFont.js line 492
Returns:

A clean version of the string.

Type
string

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:
Source:
src/gameobjects/RenderTexture.js line 181

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:
Source:
src/gameobjects/RenderTexture.js line 152

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:
Source:
src/gameobjects/RenderTexture.js line 119

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:
Source:
src/gameobjects/RenderTexture.js line 219

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:
src/gameobjects/RetroFont.js line 276

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:
Source:
src/pixi/textures/Texture.js line 187

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:
src/gameobjects/RetroFont.js line 295

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:
src/gameobjects/RetroFont.js line 521

phaser-ce@2.10.6 is on GitHub and NPM

Documentation generated by JSDoc 3.5.4 on 2018-06-01 using Tomorrow.