API Docs for: 2.1.0
Show:

Text Class

Extends Sprite
Defined in: src/pixi/text/Text.js:6
Module: PIXI

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.

Constructor

Text

(
  • text
  • [style]
)

Defined in src/pixi/text/Text.js:6

Parameters:

  • text String

    The copy that you would like the text to display

  • [style] Object optional

    The style parameters

    • [font] String optional

      default 'bold 20px Arial' The style and size of the font

    • [fill='black'] String | Number optional

      A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'

    • [align='left'] String optional

      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=0] Number optional

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

    • [wordWrap=false] Boolean optional

      Indicates if word wrap should be used

    • [wordWrapWidth=100] Number optional

      The width at which text will wrap, it needs wordWrap to be set to true

    • [dropShadow=false] Boolean optional

      Set a drop shadow for the text

    • [dropShadowColor='#000000'] String optional

      A fill style to be used on the dropshadow e.g 'red', '#00FF00'

    • [dropShadowAngle=Math.PI/4] Number optional

      Set a angle of the drop shadow

    • [dropShadowDistance=5] Number optional

      Set a distance of the drop shadow

Methods

_destroyCachedSprite

() private

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:689

Destroys the cached sprite.

_generateCachedSprite

() private

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:647

Internal method.

_renderCachedSprite

(
  • renderSession
)
private

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:626

Internal method.

Parameters:

  • renderSession Object

    The render session

_renderCanvas

(
  • renderSession
)
private

Inherited from DisplayObject but overwritten in src/pixi/text/Text.js:321

Renders the object using the Canvas renderer

Parameters:

  • renderSession RenderSession

_renderWebGL

(
  • renderSession
)
private

Inherited from DisplayObject but overwritten in src/pixi/text/Text.js:301

Renders the object using the WebGL renderer

Parameters:

  • renderSession RenderSession

addChild

(
  • child
)
DisplayObject

Inherited from DisplayObjectContainer: src/pixi/display/DisplayObjectContainer.js:90

Adds a child to the container.

Parameters:

Returns:

DisplayObject:

The child that was added.

addChildAt

(
  • child
  • index
)
DisplayObject

Inherited from DisplayObjectContainer: src/pixi/display/DisplayObjectContainer.js:102

Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

Parameters:

  • child DisplayObject

    The child to add

  • index Number

    The index to place the child in

Returns:

DisplayObject:

The child that was added.

click

(
  • interactionData
)

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:233

A callback that is used when the users clicks on the displayObject with their mouse's left button

Parameters:

destroy

(
  • destroyBaseTexture
)

Defined in src/pixi/text/Text.js:510

Destroys this text object.

Parameters:

  • destroyBaseTexture Boolean

    whether to destroy the base texture as well

determineFontProperties

(
  • fontStyle
)
private

Defined in src/pixi/text/Text.js:341

Calculates the ascent, descent and fontSize of a given fontStyle

Parameters:

  • fontStyle Object

generateTexture

(
  • resolution
  • scaleMode
  • renderer
)
Texture

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:559

Useful function that returns a texture of the displayObject object that can then be used to create sprites This can be quite useful if your displayObject is static / complicated and needs to be reused multiple times.

Parameters:

  • resolution Number

    The resolution of the texture being generated

  • scaleMode Number

    Should be one of the PIXI.scaleMode consts

  • renderer CanvasRenderer | WebGLRenderer

    The renderer used to generate the texture.

Returns:

Texture:

a texture of the graphics object

getBounds

(
  • matrix
)
Rectangle

Inherited from DisplayObject but overwritten in src/pixi/text/Text.js:492

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

Parameters:

  • matrix Matrix

    the transformation matrix of the Text

Returns:

Rectangle:

the framing rectangle

getChildAt

(
  • index
)
DisplayObject

Inherited from DisplayObjectContainer: src/pixi/display/DisplayObjectContainer.js:193

Returns the child at the specified index

Parameters:

  • index Number

    The index to get the child from

Returns:

DisplayObject:

The child at the given index, if any.

getChildIndex

(
  • child
)
Number

Inherited from DisplayObjectContainer: src/pixi/display/DisplayObjectContainer.js:158

Returns the index position of a child DisplayObject instance

Parameters:

Returns:

Number:

The index position of the child display object to identify

getLocalBounds

() Rectangle

Inherited from DisplayObject but overwritten in src/pixi/display/DisplayObjectContainer.js:362

Retrieves the non-global local bounds of the displayObjectContainer as a rectangle. The calculation takes all visible children into consideration.

Returns:

Rectangle:

The rectangular bounding area

mousedown

(
  • interactionData
)

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:239

A callback that is used when the user clicks the mouse's left button down over the sprite

Parameters:

mouseout

(
  • interactionData
)

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:226

A callback that is used when the users mouse leaves the displayObject

Parameters:

mouseover

(
  • interactionData
)

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:220

A callback that is used when the users mouse rolls over the displayObject

Parameters:

mouseup

(
  • interactionData
)

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:245

A callback that is used when the user releases the mouse's left button that was over the displayObject for this callback to be fired, the mouse's left button must have been pressed down over the displayObject

Parameters:

mouseupoutside

(
  • interactionData
)

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:252

A callback that is used when the user releases the mouse's left button that was over the displayObject but is no longer over the displayObject for this callback to be fired, the mouse's left button must have been pressed down over the displayObject

Parameters:

onTextureUpdate

(
  • event
)
private

Inherited from Sprite: src/pixi/display/Sprite.js:147

When the texture is updated, this event will fire to update the scale and frame

Parameters:

  • event Object

removeChild

(
  • child
)
DisplayObject

Inherited from DisplayObjectContainer: src/pixi/display/DisplayObjectContainer.js:210

Removes a child from the container.

Parameters:

Returns:

DisplayObject:

The child that was removed.

removeChildAt

(
  • index
)
DisplayObject

Inherited from DisplayObjectContainer: src/pixi/display/DisplayObjectContainer.js:225

Removes a child from the specified index position.

Parameters:

  • index Number

    The index to get the child from

Returns:

DisplayObject:

The child that was removed.

removeChildren

(
  • beginIndex
  • endIndex
)

Inherited from DisplayObjectContainer: src/pixi/display/DisplayObjectContainer.js:243

Removes all children from this container that are within the begin and end indexes.

Parameters:

  • beginIndex Number

    The beginning position. Default value is 0.

  • endIndex Number

    The ending position. Default value is size of the container.

removeStageReference

()

Inherited from DisplayObjectContainer: src/pixi/display/DisplayObjectContainer.js:404

Removes the current stage reference from the container and all of its children.

rightclick

(
  • interactionData
)

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:260

A callback that is used when the users clicks on the displayObject with their mouse's right button

Parameters:

rightdown

(
  • interactionData
)

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:266

A callback that is used when the user clicks the mouse's right button down over the sprite

Parameters:

rightup

(
  • interactionData
)

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:272

A callback that is used when the user releases the mouse's right button that was over the displayObject for this callback to be fired the mouse's right button must have been pressed down over the displayObject

Parameters:

rightupoutside

(
  • interactionData
)

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:279

A callback that is used when the user releases the mouse's right button that was over the displayObject but is no longer over the displayObject for this callback to be fired, the mouse's right button must have been pressed down over the displayObject

Parameters:

setChildIndex

(
  • child
  • index
)

Inherited from DisplayObjectContainer: src/pixi/display/DisplayObjectContainer.js:175

Changes the position of an existing child in the display object container

Parameters:

  • child DisplayObject

    The child DisplayObject instance for which you want to change the index number

  • index Number

    The resulting index number for the child display object

setStageReference

(
  • stage
)

Inherited from DisplayObject but overwritten in src/pixi/display/DisplayObjectContainer.js:386

Sets the containers Stage reference. This is the Stage that this object, and all of its children, is connected to.

Parameters:

  • stage Stage

    the stage that the container will have as its current stage reference

setStyle

(
  • [style]
  • [style.font='bold
)

Defined in src/pixi/text/Text.js:110

Set the style of the text

Parameters:

  • [style] Object optional

    The style parameters

    • [fill='black'] Object optional

      A canvas fillstyle that will be used on the text eg 'red', '#00FF00'

    • [align='left'] String optional

      Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text

    • [stroke='black'] String optional

      A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00'

    • [strokeThickness=0] Number optional

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

    • [wordWrap=false] Boolean optional

      Indicates if word wrap should be used

    • [wordWrapWidth=100] Number optional

      The width at which text will wrap

    • [dropShadow=false] Boolean optional

      Set a drop shadow for the text

    • [dropShadowColor='#000000'] String optional

      A fill style to be used on the dropshadow e.g 'red', '#00FF00'

    • [dropShadowAngle=Math.PI/4] Number optional

      Set a angle of the drop shadow

    • [dropShadowDistance=5] Number optional

      Set a distance of the drop shadow

  • [style.font='bold String

    20pt Arial'] The style and size of the font

setText

(
  • text
)

Defined in src/pixi/text/Text.js:147

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

Parameters:

  • text String

    The copy that you would like the text to display

setTexture

(
  • texture
)

Inherited from Sprite: src/pixi/display/Sprite.js:135

Sets the texture of the sprite

Parameters:

  • texture Texture

    The PIXI texture that is displayed by the sprite

swapChildren

(
  • child
  • child2
)

Inherited from DisplayObjectContainer: src/pixi/display/DisplayObjectContainer.js:133

Swaps the position of 2 Display Objects within this container.

Parameters:

tap

(
  • interactionData
)

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:290

A callback that is used when the users taps on the sprite with their finger basically a touch version of click

Parameters:

toGlobal

(
  • position
)
Point

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:593

Calculates the global position of the display object

Parameters:

  • position Point

    The world origin to calculate from

Returns:

Point:

A point object representing the position of this object

toLocal

(
  • position
  • [from]
)
Point

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:606

Calculates the local position of the display object relative to another point

Parameters:

  • position Point

    The world origin to calculate from

  • [from] DisplayObject optional

    The DisplayObject to calculate the global position from

Returns:

Point:

A point object representing the position of this object

touchend

(
  • interactionData
)

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:303

A callback that is used when the user releases a touch over the displayObject

Parameters:

touchendoutside

(
  • interactionData
)

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:309

A callback that is used when the user releases the touch that was over the displayObject for this callback to be fired, The touch must have started over the sprite

Parameters:

touchstart

(
  • interactionData
)

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:297

A callback that is used when the user touches over the displayObject

Parameters:

updateCache

()

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:583

Generates and updates the cached sprite for this object.

updateText

() private

Defined in src/pixi/text/Text.js:159

Renders text and updates it when needed

updateTexture

() private

Defined in src/pixi/text/Text.js:281

Updates texture size based on canvas size

wordWrap

(
  • text
)
private

Defined in src/pixi/text/Text.js:444

Applies newlines to a string to have it optimally fit into the horizontal bounds set by the Text object's wordWrapWidth property.

Parameters:

  • text String

Properties

_bounds

Rectangle private

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:170

The original, cached bounds of the object

_cacheAsBitmap

Boolean private

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:197

Cached internal flag.

_cacheIsDirty

Boolean private

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:206

Cached internal flag.

_cr

Number private

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:152

cached sin rotation and cos rotation

_currentBounds

Rectangle private

Inherited from DisplayObject but overwritten in src/pixi/display/DisplayObject.js:179

The most up-to-date bounds of the object

_height

Number private

Inherited from Sprite: src/pixi/display/Sprite.js:50

The height of the sprite (this is initially set by the texture)

_interactive

Boolean private

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:114

[read-only] Whether or not the object is interactive, do not toggle directly! use the interactive property

_sr

Number private

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:143

cached sin rotation and cos rotation

_width

Number private

Inherited from Sprite: src/pixi/display/Sprite.js:41

The width of the sprite (this is initially set by the texture)

alpha

Number

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:46

The opacity of the object.

anchor

Point

Inherited from Sprite: src/pixi/display/Sprite.js:22

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 than anchor to 0.5,0.5 means the textures origin is centered Setting the anchor to 1,1 would mean the textures origin points will be the bottom right corner

blendMode

Number

Inherited from Sprite: src/pixi/display/Sprite.js:68

The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode.

Default: PIXI.blendModes.NORMAL;

buttonMode

Boolean

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:71

This is used to indicate if the displayObject should display a mouse hand cursor on rollover

cacheAsBitmap

Boolean

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:417

Set if this display object is 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 'null'

canvas

HTMLCanvasElement

Defined in src/pixi/text/Text.js:29

The canvas element that everything is drawn to

children

Array

Inherited from DisplayObjectContainer: src/pixi/display/DisplayObjectContainer.js:17

[read-only] The array of children of this container.

context

HTMLCanvasElement

Defined in src/pixi/text/Text.js:37

The canvas 2d context that everything is drawn with

defaultCursor

String

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:124

This is the cursor that will be used when the mouse is over this object. To enable this the element must have interaction = true and buttonMode = true

filterArea

Rectangle

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:161

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

filters

Array An array of filters

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:381

Sets the filters for the displayObject.

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

height

Number

Inherited from DisplayObjectContainer but overwritten in src/pixi/text/Text.js:86

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

hitArea

Rectangle | Circle | Ellipse | Polygon

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:62

This is the defined area that will pick up mouse / touch events. It is null by default. Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

interactive

Boolean

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:320

Indicates if the sprite will have touch and mouse interactivity. It is false by default

Default: false

mask

Graphics

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:361

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

parent

DisplayObjectContainer

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:87

[read-only] The display object container that contains this display object.

pivot

Point

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:30

The pivot point of the displayObject that it rotates around

position

Point

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:14

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

renderable

Boolean

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:79

Can this object be rendered

resolution

Number

Defined in src/pixi/text/Text.js:44

The resolution of the canvas.

rotation

Number

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:38

The rotation of the object in radians.

scale

Point

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:22

The scale factor of the object.

shader

PIXI.AbstractFilter

Inherited from Sprite: src/pixi/display/Sprite.js:77

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

Default: null

stage

Stage

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:96

[read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

texture

Texture

Inherited from Sprite: src/pixi/display/Sprite.js:33

The texture that the sprite is using

tint

Number

Inherited from Sprite: src/pixi/display/Sprite.js:59

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

Default: 0xFFFFFF

visible

Boolean

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:54

The visibility of the object.

width

Number

Inherited from DisplayObjectContainer but overwritten in src/pixi/text/Text.js:62

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

worldAlpha

Number

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:105

[read-only] The multiplied alpha of the displayObject

worldTransform

Matrix private

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:133

[read-only] Current transform of the object based on world (parent) factors

worldVisible

Boolean

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:340

[read-only] Indicates if the sprite is globally visible.

x

Number

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:736

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

y

Number

Inherited from DisplayObject: src/pixi/display/DisplayObject.js:751

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