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
Public Properties
-
[static] ALIGN_CENTER : string
-
Align each line of multi-line text in the center.
- Source code: gameobjects/RetroFont.js, line 205
-
[static] ALIGN_LEFT : string
-
Align each line of multi-line text to the left.
- Source code: gameobjects/RetroFont.js, line 191
-
[static] ALIGN_RIGHT : string
-
Align each line of multi-line text to the right.
- Source code: gameobjects/RetroFont.js, line 198
-
[static] TEXT_SET1 : string
-
Text Set 1 = !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{ | }~
- Source code: gameobjects/RetroFont.js, line 212
-
[static] TEXT_SET2 : string
-
Text Set 2 = !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ
- Source code: gameobjects/RetroFont.js, line 219
-
[static] TEXT_SET3 : string
-
Text Set 3 = ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789
- Source code: gameobjects/RetroFont.js, line 226
-
[static] TEXT_SET4 : string
-
Text Set 4 = ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
- Source code: gameobjects/RetroFont.js, line 233
-
[static] TEXT_SET5 : string
-
Text Set 5 = ABCDEFGHIJKLMNOPQRSTUVWXYZ.,/() '!?-*:0123456789
- Source code: gameobjects/RetroFont.js, line 240
-
[static] TEXT_SET6 : string
-
Text Set 6 = ABCDEFGHIJKLMNOPQRSTUVWXYZ!?:;0123456789"(),-.'
- Source code: gameobjects/RetroFont.js, line 247
-
[static] TEXT_SET7 : string
-
Text Set 7 = AGMSY+:4BHNTZ!;5CIOU.?06DJPV,(17EKQW")28FLRX-'39
- Source code: gameobjects/RetroFont.js, line 254
-
[static] TEXT_SET8 : string
-
Text Set 8 = 0123456789 .ABCDEFGHIJKLMNOPQRSTUVWXYZ
- Source code: gameobjects/RetroFont.js, line 261
-
[static] TEXT_SET9 : string
-
Text Set 9 = ABCDEFGHIJKLMNOPQRSTUVWXYZ()-0123456789.:,'"?!
- Source code: gameobjects/RetroFont.js, line 268
-
[static] TEXT_SET10 : string
-
Text Set 10 = ABCDEFGHIJKLMNOPQRSTUVWXYZ
- Source code: gameobjects/RetroFont.js, line 275
-
[static] TEXT_SET11 : string
-
Text Set 11 = ABCDEFGHIJKLMNOPQRSTUVWXYZ.,"-+!?()':;0123456789
- Source code: gameobjects/RetroFont.js, line 282
-
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
- 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 : PIXI.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
- Source code: pixi/textures/RenderTexture.js, line 69
-
customSpacingX : number
-
Adds horizontal spacing between each character of the font, in pixels.
- Default Value
- 0
- Source code: gameobjects/RetroFont.js, line 95
-
customSpacingY : number
-
Adds vertical spacing between each line of multi-line text, set in pixels.
- Default Value
- 0
- 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 : PIXI.Rectangle
-
The framing rectangle of the render texture
- Inherited From
- 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
- Source code: gameobjects/RenderTexture.js, line 31
-
height : number
-
The height of the render texture
- Inherited From
- Source code: pixi/textures/RenderTexture.js, line 45
-
key : string
-
The key of the RenderTexture in the Cache, if stored there.
- Inherited From
- Source code: gameobjects/RenderTexture.js, line 36
-
matrix : PIXI.Matrix
-
The matrix that is applied when display objects are rendered to this RenderTexture.
- Inherited From
- Source code: gameobjects/RenderTexture.js, line 46
-
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)
- Default Value
- false
- Source code: gameobjects/RetroFont.js, line 83
-
noFrame : boolean
-
Does this Texture have any frame data assigned to it?
- Inherited From
- Source code: pixi/textures/Texture.js, line 24
-
[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
- Inherited From
- Source code: pixi/textures/RenderTexture.js, line 99
-
requiresUpdate : boolean
-
This will let a renderer know that a texture has been updated (used mainly for webGL uv updates)
- Inherited From
- Source code: pixi/textures/Texture.js, line 75
-
resolution : number
-
The Resolution of the texture.
- Inherited From
- Source code: pixi/textures/RenderTexture.js, line 53
-
[readonly] stamp : Phaser.Image
-
The image that is stamped to the RenderTexture for each character in the font.
- Source code: gameobjects/RetroFont.js, line 172
-
trim : PIXI.Rectangle
-
The texture trim data.
- Inherited From
- Source code: pixi/textures/Texture.js, line 59
-
type : number
-
Base Phaser object type.
- Source code: gameobjects/RetroFont.js, line 179
-
valid : boolean
-
- Inherited From
- Source code: pixi/textures/RenderTexture.js, line 125
-
width : number
-
The with of the render texture
- Inherited From
- Source code: pixi/textures/RenderTexture.js, line 37
Public Methods
-
buildRetroFontText()
-
Updates the texture with the new text.
- Source code: gameobjects/RetroFont.js, line 337
-
clear()
-
Clears the RenderTexture.
- Inherited From
- Source code: pixi/textures/RenderTexture.js, line 171
-
destroy(destroyBase)
-
Destroys this texture
Parameters
Name Type Description destroyBase
Boolean Whether to destroy the base texture as well
- Inherited From
- Source code: pixi/textures/Texture.js, line 149
-
getBase64() → {String}
-
Will return a 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
- Source code: pixi/textures/RenderTexture.js, line 291
-
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
- Source code: pixi/textures/RenderTexture.js, line 302
-
getImage() → {Image}
-
Will return a HTML Image of the texture
Returns
Image -- Inherited From
- Source code: pixi/textures/RenderTexture.js, line 278
-
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 470
-
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 428
-
<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 497
-
render(displayObject, position, clear)
-
This function will draw the display object to the texture.
Parameters
Name Type Description displayObject
Phaser.Sprite | Phaser.Image | Phaser.Text | Phaser.BitmapText | Phaser.Group The display object to render to this texture.
position
Phaser.Point A Point object containing the position to render the display object at.
clear
boolean If true the texture will be cleared before the display object is drawn.
- Inherited From
- Source code: gameobjects/RenderTexture.js, line 82
-
renderXY(displayObject, x, y, clear)
-
This function will draw the display object to the texture.
Parameters
Name Type 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 If true the texture will be cleared before the display object is drawn.
- Inherited From
- 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
- Source code: pixi/textures/RenderTexture.js, line 137
-
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 284
-
setFrame(frame)
-
Specifies the region of the baseTexture that this texture will use.
Parameters
Name Type Description frame
PIXI.Rectangle The frame of the texture to set it to
- Inherited From
- Source code: pixi/textures/Texture.js, line 162
-
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 302
-
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 525