Phaser Class: Text

new Text(game, x, y, text, style)

Create a new Text object. This uses a local hidden Canvas object and renders the type into it. It then makes a texture from this for renderning to the view. Because of this you can only display fonts that are currently loaded and available to the browser. It won't load the fonts for you. Here is a compatibility table showing the available default fonts across different mobile browsers: http://www.jordanm.co.uk/tinytype

Parameters:

Name	Type	Description
`game`	Phaser.Game	Current game instance.
`x`	number	X position of the new text object.
`y`	number	Y position of the new text object.
`text`	string	The actual text that will be written.
`style`	object	The style object containing style attributes like font, font size ,

Source:

gameobjects/Text.js, line 21

Extends

PIXI.Text

Members

align

Properties:

Name	Type	Description
`align`	string	Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text.

Source:

gameobjects/Text.js, line 709

angle

Indicates the rotation of the Text, in degrees, from its original orientation. Values from 0 to 180 represent clockwise rotation; values from 0 to -180 represent counterclockwise rotation. Values outside this range are added to or subtracted from 360 to obtain a value within the range. For example, the statement player.angle = 450 is the same as player.angle = 90. If you wish to work in radians instead of degrees use the property Sprite.rotation instead.

Properties:

Name	Type	Description
`angle`	number	Gets or sets the angle of rotation in degrees.

Source:

gameobjects/Text.js, line 554

cameraOffset

Properties:

Name	Type	Description
`cameraOffset`	Phaser.Point	If this object is fixedToCamera then this stores the x/y offset that its drawn at, from the top-left of the camera view.

Source:

gameobjects/Text.js, line 119

colors

Properties:

Name	Type	Description
`colors`	array	An array of the color values as specified by `Text.addColor`.

Source:

gameobjects/Text.js, line 124

destroyPhase

Properties:

Name	Type	Description
`destroyPhase`	boolean	True if this object is currently being destroyed.

Source:

gameobjects/Text.js, line 1006

events

Properties:

Name	Type	Description
`events`	Phaser.Events	The Events you can subscribe to that are dispatched when certain things happen on this Sprite or its components.

Source:

gameobjects/Text.js, line 109

exists

Properties:

Name	Type	Description
`exists`	boolean	If exists = false then the Text isn't updated by the core game loop.

Default Value:

true

Source:

gameobjects/Text.js, line 46

fill

Properties:

Name	Type	Description
`fill`	object	A canvas fillstyle that will be used on the text eg 'red', '#00FF00'.

Source:

gameobjects/Text.js, line 687

fixedToCamera

An Text that is fixed to the camera uses its x/y coordinates as offsets from the top left of the camera. These are stored in Text.cameraOffset. Note that the cameraOffset values are in addition to any parent in the display list. So if this Text was in a Group that has x: 200, then this will be added to the cameraOffset.x

Properties:

Name	Type	Description
`fixedToCamera`	boolean	Set to true to fix this Text to the Camera at its current world coordinates.

Source:

gameobjects/Text.js, line 975

font

Properties:

Name	Type	Description
`font`	string	The font the text will be rendered in, i.e. 'Arial'. Must be loaded in the browser before use.

Source:

gameobjects/Text.js, line 601

fontSize

Properties:

Name	Type	Description
`fontSize`	number	The size of the font in pixels.

Source:

gameobjects/Text.js, line 629

fontWeight

Properties:

Name	Type	Description
`fontWeight`	number	The weight of the font: 'normal', 'bold', 'italic'. You can combine settings too, such as 'bold italic'.

Source:

gameobjects/Text.js, line 659

game

Properties:

Name	Type	Description
`game`	Phaser.Game	A reference to the currently running Game.

Source:

gameobjects/Text.js, line 40

input

Properties:

Name	Type	Description
`input`	Phaser.InputHandler \| null	The Input Handler for this object. Needs to be enabled with image.inputEnabled = true before you can use it.

Source:

gameobjects/Text.js, line 114

inputEnabled

By default a Text object won't process any input events at all. By setting inputEnabled to true the Phaser.InputHandler is activated for this object and it will then start to process click/touch events and more.

Properties:

Name	Type	Description
`inputEnabled`	boolean	Set to true to allow this object to receive input events.

Source:

gameobjects/Text.js, line 934

lineSpacing

Properties:

Name	Type	Description
`lineSpacing`	number	Additional spacing (in pixels) between each line of text if multi-line.

Source:

gameobjects/Text.js, line 819

name

Properties:

Name	Type	Description
`name`	string	The user defined name given to this object.

Source:

gameobjects/Text.js, line 52

shadowBlur

Properties:

Name	Type	Description
`shadowBlur`	number	The shadowBlur value. Make the shadow softer by applying a Gaussian blur to it. A number from 0 (no blur) up to approx. 10 (depending on scene).

Source:

gameobjects/Text.js, line 912

shadowColor

Properties:

Name	Type	Description
`shadowColor`	string	The color of the shadow, as given in CSS rgba format. Set the alpha component to 0 to disable the shadow.

Source:

gameobjects/Text.js, line 890

shadowOffsetX

Properties:

Name	Type	Description
`shadowOffsetX`	number	The shadowOffsetX value in pixels. This is how far offset horizontally the shadow effect will be.

Source:

gameobjects/Text.js, line 846

shadowOffsetY

Properties:

Name	Type	Description
`shadowOffsetY`	number	The shadowOffsetY value in pixels. This is how far offset vertically the shadow effect will be.

Source:

gameobjects/Text.js, line 868

stroke

Properties:

Name	Type	Description
`stroke`	string	A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00'.

Source:

gameobjects/Text.js, line 731

strokeThickness

Properties:

Name	Type	Description
`strokeThickness`	number	A number that represents the thickness of the stroke. Default is 0 (no stroke)

Source:

gameobjects/Text.js, line 753

text

The text string to be displayed by this Text object, taking into account the style settings.

Properties:

Name	Type	Description
`text`	string	The text string to be displayed by this Text object, taking into account the style settings.

Source:

gameobjects/Text.js, line 573

type

Properties:

Name	Type	Description
`type`	number	The const type of this object.

Source:

gameobjects/Text.js, line 58

wordWrap

Properties:

Name	Type	Description
`wordWrap`	boolean	Indicates if word wrap should be used.

Source:

gameobjects/Text.js, line 775

wordWrapWidth

Properties:

Name	Type	Description
`wordWrapWidth`	number	The width at which text will wrap.

Source:

gameobjects/Text.js, line 797

world

Properties:

Name	Type	Description
`world`	Phaser.Point	The world coordinates of this Sprite. This differs from the x/y coordinates which are relative to the Sprites container.

Source:

gameobjects/Text.js, line 68

z

Properties:

Name	Type	Description
`z`	number	The z-depth value of this object within its Group (remember the World is a Group as well). No two objects in a Group can have the same z value.

Source:

gameobjects/Text.js, line 63

Methods

addColor(color, position)

This method allows you to set specific colors within the Text. It works by taking a color value, which is a typical HTML string such as #ff0000 or rgb(255,0,0) and a position. The position value is the index of the character in the Text string to start applying this color to. Once set the color remains in use until either another color or the end of the string is encountered. For example if the Text was Photon Storm and you did Text.addColor('#ffff00', 6) it would color in the word Storm in yellow.

Parameters:

Name	Type	Description
`color`	string	A canvas fillstyle that will be used on the text eg `red`, `#00FF00`, `rgba()`.
`position`	number	The index of the character in the string to start applying this color value from.

Source:

gameobjects/Text.js, line 487

clearColors()

Clears any previously set color stops.

Source:

gameobjects/Text.js, line 475

destroy(destroyChildren)

Parameters:

Name	Type	Argument	Default	Description
`destroyChildren`	boolean	<optional>	true	Should every child of this object have its destroy method called?

Source:

gameobjects/Text.js, line 227

postUpdate()

Automatically called by World.postUpdate.

Source:

gameobjects/Text.js, line 207

preUpdate()

Automatically called by World.preUpdate.

Source:

gameobjects/Text.js, line 158

setShadow(x, y, color, blur)

Parameters:

Name	Type	Argument	Default	Description
`x`	number	<optional>	0	The shadowOffsetX value in pixels. This is how far offset horizontally the shadow effect will be.
`y`	number	<optional>	0	The shadowOffsetY value in pixels. This is how far offset vertically the shadow effect will be.
`color`	string	<optional>	'rgba(0,0,0,0)'	The color of the shadow, as given in CSS rgba format. Set the alpha component to 0 to disable the shadow.
`blur`	number	<optional>	0	The shadowBlur value. Make the shadow softer by applying a Gaussian blur to it. A number from 0 (no blur) up to approx. 10 (depending on scene).

Source:

gameobjects/Text.js, line 296

setStyle(style)

Set the style of the text by passing a single style object to it.

Parameters:

Name Type Argument Description

style

Object

The style properties to be set on the Text.

Properties

Name	Type	Argument	Default	Description
`font`	string	<optional>	'bold 20pt Arial'	The style and size of the font.
`fill`	string	<optional>	'black'	A canvas fillstyle that will be used on the text eg 'red', '#00FF00'.
`align`	string	<optional>	'left'	Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text.
`stroke`	string	<optional>	'black'	A canvas stroke style that will be used on the text stroke eg 'blue', '#FCFF00'.
`strokeThickness`	number	<optional>	0	A number that represents the thickness of the stroke. Default is 0 (no stroke).
`wordWrap`	boolean	<optional>	false	Indicates if word wrap should be used.
`wordWrapWidth`	number	<optional>	100	The width in pixels at which text will wrap.

Source:

gameobjects/Text.js, line 313

update()

Override and use this function in your own custom objects to handle any update requirements you may have.

Source:

gameobjects/Text.js, line 197