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 - gameobjects/RetroFont.js, line 25
Extends
Members
-
<static, constant> ALIGN_CENTER :string
-
Align each line of multi-line text in the center.
- Source - gameobjects/RetroFont.js, line 205
-
<static, constant> ALIGN_LEFT :string
-
Align each line of multi-line text to the left.
- Source - gameobjects/RetroFont.js, line 191
-
<static, constant> ALIGN_RIGHT :string
-
Align each line of multi-line text to the right.
- Source - gameobjects/RetroFont.js, line 198
-
<static, constant> TEXT_SET1 :string
-
Text Set 1 = !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~
- Source - gameobjects/RetroFont.js, line 212
-
<static, constant> TEXT_SET2 :string
-
Text Set 2 = !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ
- Source - gameobjects/RetroFont.js, line 219
-
<static, constant> TEXT_SET3 :string
-
Text Set 3 = ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789
- Source - gameobjects/RetroFont.js, line 226
-
<static, constant> TEXT_SET4 :string
-
Text Set 4 = ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
- Source - gameobjects/RetroFont.js, line 233
-
<static, constant> TEXT_SET5 :string
-
Text Set 5 = ABCDEFGHIJKLMNOPQRSTUVWXYZ.,/() '!?-*:0123456789
- Source - gameobjects/RetroFont.js, line 240
-
<static, constant> TEXT_SET6 :string
-
Text Set 6 = ABCDEFGHIJKLMNOPQRSTUVWXYZ!?:;0123456789"(),-.'
- Source - gameobjects/RetroFont.js, line 247
-
<static, constant> TEXT_SET7 :string
-
Text Set 7 = AGMSY+:4BHNTZ!;5CIOU.?06DJPV,(17EKQW")28FLRX-'39
- Source - gameobjects/RetroFont.js, line 254
-
<static, constant> TEXT_SET8 :string
-
Text Set 8 = 0123456789 .ABCDEFGHIJKLMNOPQRSTUVWXYZ
- Source - gameobjects/RetroFont.js, line 261
-
<static, constant> TEXT_SET9 :string
-
Text Set 9 = ABCDEFGHIJKLMNOPQRSTUVWXYZ()-0123456789.:,'"?!
- Source - gameobjects/RetroFont.js, line 268
-
<static, constant> TEXT_SET10 :string
-
Text Set 10 = ABCDEFGHIJKLMNOPQRSTUVWXYZ
- Source - gameobjects/RetroFont.js, line 275
-
<static, constant> TEXT_SET11 :string
-
Text Set 11 = ABCDEFGHIJKLMNOPQRSTUVWXYZ.,"-+!?()':;0123456789
- Source - 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 - 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 - gameobjects/RetroFont.js, line 89
-
baseTexture :PIXI.BaseTexture
-
The base texture object that this texture uses
- Inherited From:
- Source - pixi/textures/RenderTexture.js, line 78
-
characterHeight :number
-
The height of each character in the font set.
- Source - gameobjects/RetroFont.js, line 45
-
characterPerRow :number
-
The number of characters per row in the font set.
- Source - 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 - 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 - gameobjects/RetroFont.js, line 55
-
characterWidth :number
-
The width of each character in the font set.
- Source - 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 - pixi/textures/RenderTexture.js, line 69
-
customSpacingX :number
-
Adds horizontal spacing between each character of the font, in pixels.
- Default Value:
- 0
- Source - gameobjects/RetroFont.js, line 95
-
customSpacingY :number
-
Adds vertical spacing between each line of multi-line text, set in pixels.
- Default Value:
- 0
- Source - 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 - gameobjects/RetroFont.js, line 108
-
fontSet :Image
-
A reference to the image stored in the Game.Cache that contains the font.
- Source - gameobjects/RetroFont.js, line 113
-
frame :PIXI.Rectangle
-
The framing rectangle of the render texture
- Inherited From:
- Source - pixi/textures/RenderTexture.js, line 61
-
frameData :Phaser.FrameData
-
The FrameData representing this Retro Font.
- Source - gameobjects/RetroFont.js, line 130
-
game :Phaser.Game
-
A reference to the currently running game.
- Inherited From:
- Source - gameobjects/RenderTexture.js, line 31
-
height :Number
-
The height of the render texture
- Inherited From:
- Source - pixi/textures/RenderTexture.js, line 45
-
key :string
-
The key of the RenderTexture in the Cache, if stored there.
- Inherited From:
- Source - gameobjects/RenderTexture.js, line 36
-
matrix :PIXI.Matrix
-
The matrix that is applied when display objects are rendered to this RenderTexture.
- Inherited From:
- Source - 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 - gameobjects/RetroFont.js, line 83
-
noFrame :Boolean
-
Does this Texture have any frame data assigned to it?
- Inherited From:
- Source - 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 - 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 - 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 - 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 - pixi/textures/Texture.js, line 75
-
resolution :Number
-
The Resolution of the texture.
- Inherited From:
- Source - 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 - gameobjects/RetroFont.js, line 172
-
trim :PIXI.Rectangle
-
The texture trim data.
- Inherited From:
- Source - pixi/textures/Texture.js, line 59
-
type :number
-
Base Phaser object type.
- Source - gameobjects/RetroFont.js, line 179
-
valid :Boolean
-
- Inherited From:
- Source - pixi/textures/RenderTexture.js, line 125
-
width :Number
-
The with of the render texture
- Inherited From:
- Source - pixi/textures/RenderTexture.js, line 37
Methods
-
buildRetroFontText()
-
Updates the texture with the new text.
- Source - gameobjects/RetroFont.js, line 337
-
clear()
-
Clears the RenderTexture.
- Inherited From:
- Source - 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 - 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 - 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 - pixi/textures/RenderTexture.js, line 302
-
getImage() → {Image}
-
Will return a HTML Image of the texture
Returns:
Image -- Inherited From:
- Source - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - gameobjects/RetroFont.js, line 525