LesserPanda

Class: Text

Text

A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string,
or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object.

A Text can be created directly from a string and a style object

var text = new Text('This is a pixi text',{font : '24px Arial', fill : 0xff1010, align : 'center'});

new Text(text [, style])

Parameters:
Name Type Argument Description
text string

The copy that you would like the text to display
style object <optional>

The style parameters

Properties
Name Type Argument Default Description
font string <optional>

default 'bold 20px Arial' The style and size of the font
fill String | Number <optional>
 'black'

A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'
align string <optional>
 'left'

Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text
stroke String | Number <optional>

A canvas fillstyle that will be used on the text stroke e.g '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 at which text will wrap, it needs wordWrap to be set to true
letterSpacing number <optional>
 0

The amount of spacing between letters, default is 0
breakWords boolean <optional>
 false

Indicates if lines can be wrapped within words, it needs wordWrap to be set to true
lineHeight number <optional>

The line height, a number that represents the vertical space that a letter uses
dropShadow boolean <optional>
 false

Set a drop shadow for the text
dropShadowColor string <optional>
 '#000000'

A fill style to be used on the dropshadow e.g 'red', '#00FF00'
dropShadowAngle number <optional>
 Math.PI/4

Set a angle of the drop shadow
dropShadowDistance number <optional>
 5

Set a distance of the drop shadow
dropShadowBlur number <optional>
 0

Set a shadow blur radius
padding number <optional>
 0

Occasionally some fonts are cropped on top or bottom. Adding some padding will
prevent this from happening by adding padding to the top and bottom of text height.
textBaseline string <optional>
 'alphabetic'

The baseline of the text that is rendered.
lineJoin string <optional>
 'miter'

The lineJoin property sets the type of corner created, it can resolve
spiked text issues. Default is 'miter' (creates a sharp corner).
miterLimit number <optional>
 10

The miter limit to use when using the 'miter' lineJoin mode. This can reduce
or increase the spikiness of rendered text.
Source:

Extends

Members

alpha :Number

The opacity of the node.

Type:
Inherited From:
Source:

anchor :Point

The anchor sets the origin point of the texture.
The default is 0,0 this means the texture's origin is the top left
Setting the anchor to 0.5,0.5 means the texture's origin is centered
Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner

Type:
  • Point
Inherited From:
Source:

blendMode :number

The blend mode to be applied to the sprite. Apply a value of BLEND_MODES.NORMAL to reset the blend mode.

Type:
  • number
Inherited From:
Default Value:
  • BLEND_MODES.NORMAL
Source:
See:
  • BLEND_MODES

cacheAsBitmap :boolean

Set this to true if you want this display object to be cached as a bitmap.
This basically takes a snap shot of the display object as it is at that moment. It can provide a performance benefit for complex static displayObjects.
To remove simply set this property to 'false'

Type:
  • boolean
Inherited From:
Source:

cachedTint :number

An internal cached value of the tint.

Type:
  • number
Inherited From:
Default Value:
  • 0xFFFFFF
Source:

canvas :HTMLCanvasElement

The canvas element that everything is drawn to

Type:
  • HTMLCanvasElement
Source:

<readonly> children :Array.<Node>

The list of children added to this node.

Type:
Inherited From:
Source:

context :HTMLCanvasElement

The canvas 2d context that everything is drawn with

Type:
  • HTMLCanvasElement
Source:

filterArea :Rectangle

The area the filter is applied to. This is used as more of an optimisation
rather than figuring out the dimensions of the node each frame you can set this rectangle

Type:
Inherited From:
Source:

filters :Array.<AbstractFilter>

Sets the filters for this Node.

  • IMPORTANT: This is a WebGL only feature and will be ignored by the canvas renderer.
    To remove filters simply set this property to 'null'
Type:
Inherited From:
Source:

height :number

The height of the Text, setting this will actually modify the scale to achieve the value set

Type:
  • number
Overrides:
Source:

mask :Graphics|Sprite

Sets a mask for this Node. A mask is an object that limits the visibility of an object to the shape of the mask applied to it.
A regular mask must be a Graphics or a Sprite object. This allows for much faster masking in canvas as it utilises shape clipping.
To remove a mask, set this property to null.

Type:
Inherited From:
Source:
To Do:
  • For the moment, CanvasRenderer doesn't support Sprite as mask.

<readonly> parent :Node

The node that contains this one.

Type:
Inherited From:
Source:

pivot :Vector

The pivot point of the node that it rotates around

Type:
Inherited From:
Source:

position :Vector

The coordinate of the node relative to the local coordinates of the parent.

Type:
Inherited From:
Source:

renderable :Boolean

Can this node be rendered, if false the node will not be drawn but the updateTransform
methods will still be called.

Type:
  • Boolean
Inherited From:
Source:

resolution :number

The resolution of the canvas.

Type:
  • number
Source:

rotation :Number

The rotation of the node in radians.

Type:
Inherited From:
Source:

scale :Vector

The scale factor of the node.

Type:
Inherited From:
Source:

shader :AbstractFilter|Shader

The shader that will be used to render the sprite. Set to null to remove a current shader.

Type:
Inherited From:
Source:

skew :Vector

The skew factor for the node in radians.

Type:
Inherited From:
Source:

style

Set the style of the text

Source:

system :SystemGfx

Sets the gfx system this node will be rendered with

Type:
Inherited From:
Source:

text

Set the copy for the text object. To split a line you can use '\n'.

Source:

texture :Texture

The texture that the sprite is using

Type:
Inherited From:
Overrides:
Source:

tint :number

The tint applied to the sprite. This is a hex value. A value of 0xFFFFFF will remove any tint effect.

Type:
  • number
Inherited From:
Default Value:
  • 0xFFFFFF
Source:

visible :Boolean

The visibility of the node. If false the node will not be drawn, and
the updateTransform function will not be called.

Type:
  • Boolean
Inherited From:
Source:

width :number

The width of the Text, setting this will actually modify the scale to achieve the value set

Type:
  • number
Overrides:
Source:

<readonly> worldAlpha :Number

The multiplied alpha of the node

Type:
Inherited From:
Source:

<readonly> worldTransform :Matrix

Current transform of the node based on world (parent) factors

Type:
Inherited From:
Source:

<readonly> worldVisible :Boolean

Indicates if this node is globally visible.

Type:
  • Boolean
Inherited From:
Source:

x :Number

The position of this Node on the x axis relative to the local coordinates of the parent.

Type:
Inherited From:
Source:

y :Number

The position of this Node on the y axis relative to the local coordinates of the parent.

Type:
Inherited From:
Source:

Methods

addListener()

Inherited From:
Source:

containsPoint(point)

Tests if a point is inside this sprite

Parameters:
Name Type Description
point Point

the point to test
Inherited From:
Source:
Returns:

the result of the test

Type
boolean

destroy( [destroyBaseTexture])

Destroys this text object.

Parameters:
Name Type Argument Default Description
destroyBaseTexture boolean <optional>
 true

whether to destroy the base texture as well
Overrides:
Source:

emit(event, a1, a2, a3, a4, a5)

Emit an event to all registered event listeners.

Parameters:
Name Type Description
event string

The name of the event.
a1 *

First param
a2 *

Second param
a3 *

Third param
a4 *

Forth param
a5 *

Fifth param
Inherited From:
Source:
Returns:

Indication if we've emitted an event.

Type
boolean

getBounds(matrix)

Returns the bounds of the Text as a rectangle. The bounds calculation takes the worldTransform into account.

Parameters:
Name Type Description
matrix Matrix

the transformation matrix of the Text
Overrides:
Source:
Returns:

the framing rectangle

Type
Rectangle

getLocalBounds()

Gets the local bounds of the sprite object.

Inherited From:
Source:

listeners(event, exists)

Return a list of assigned event listeners.

Parameters:
Name Type Description
event string

The events that should be listed.
exists boolean

We only need to know if there are listeners.
Inherited From:
Source:
Returns:

Listener list

Type
array | boolean

off()

Inherited From:
Source:

on(event, fn, context)

Register a new EventListener for the given event.

Parameters:
Name Type Description
event string

Name of the event.
fn functon

Callback function.
context Mixed

The context of the function.
Inherited From:
Source:
Returns:

Self for chaining

Type
EventEmitter

once(event, fn, context)

Add an EventListener that's only called once.

Parameters:
Name Type Description
event string

Name of the event.
fn function

Callback function.
context Mixed

The context of the function.
Inherited From:
Source:
Returns:

Self for chaining

Type
EventEmitter

removeAllListeners(event)

Remove all listeners or only the listeners for the specified event.

Parameters:
Name Type Description
event string

The event want to remove all listeners for.
Inherited From:
Source:
Returns:

Self for chaining

Type
EventEmitter

removeListener(event, fn, context, once)

Remove event listeners.

Parameters:
Name Type Description
event string

The event we want to remove.
fn function

The listener that we need to find.
context Mixed

Only remove listeners matching this context.
once boolean

Only remove once listeners.
Inherited From:
Source:
Returns:

Self for chaining

Type
EventEmitter

renderWebGL(renderer)

Renders the object using the WebGL renderer

Parameters:
Name Type Description
renderer WebGLRenderer
Source:

setTransform( [x] [, y] [, scaleX] [, scaleY] [, rotation] [, skewX] [, skewY] [, pivotX] [, pivotY])

Convenience function to set the postion, scale, skew and pivot at once.

Parameters:
Name Type Argument Default Description
x Number <optional>
 0

The X position
y Number <optional>
 0

The Y position
scaleX Number <optional>
 1

The X scale value
scaleY Number <optional>
 1

The Y scale value
rotation Number <optional>
 0

The rotation
skewX Number <optional>
 0

The X skew value
skewY Number <optional>
 0

The Y skew value
pivotX Number <optional>
 0

The X pivot value
pivotY Number <optional>
 0

The Y pivot value
Inherited From:
Source:
Returns:

This for chaining.

Type
Node

toGlobal(position)

Calculates the global position of this node

Parameters:
Name Type Description
position Vector

The world origin to calculate from
Inherited From:
Source:
Returns:

A point representing the position of this node

Type
Vector

toLocal(position [, from] [, point])

Calculates the local position of this node relative to another point

Parameters:
Name Type Argument Description
position Vector

The world origin to calculate from
from Node <optional>

The Node to calculate the global position from
point Vector <optional>

A Point in which to store the value, optional (otherwise will create a new Point)
Inherited From:
Source:
Returns:

A point representing the position of this node

Type
Vector