PIXI.Text

class Text extends PIXI.Sprite

A Text Object will create a line or multiple lines of text.

The text is created using the Canvas API.

The primary advantage of this class over BitmapText is that you have great control over the style of the text, which you can change at runtime.

The primary disadvantages is that each piece of text has it's own texture, which can use more memory. When text changes, this texture has to be re-generated and re-uploaded to the GPU, taking up time.

To split a line you can use '\n' in your text string, or, on the style object, change its wordWrap property to true and and give the wordWrapWidth property a value.

A Text can be created directly from a string and a style object, which can be generated here.

let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'});

Constructor


new PIXI.Text(text: string | number, style: object | PIXI.TextStyle, canvas: HTMLCanvasElement) → {}
Parameters:
Name Type Attributes Description
text string | number

<optional>

The string that you would like the text to display

style object | PIXI.TextStyle

<optional>

The style parameters

canvas HTMLCanvasElement

<optional>

The canvas element for drawing text

Summary


Properties from Text

boolean
static experimentalLetterSpacing = false
boolean
static nextLineHeightBehavior = false
number
_resolution = PIXI.settings.RESOLUTION

The resolution / device pixel ratio of the canvas.

HTMLCanvasElement
canvas

The canvas element that everything is drawn to.

ModernContext2D
context

The canvas 2d context that everything is drawn with.

number
height

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

number
resolution = 1

The resolution / device pixel ratio of the canvas.

PIXI.TextStyle | ITextStyle<Partial>
style

Set the style of the text.

string
text

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

number
width

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

Methods from Text

void
destroy(options: IDestroyOptions | boolean)

Destroys this text object.

PIXI.Rectangle
getLocalBounds(rect: PIXI.Rectangle)
void
updateText(respectDirty: boolean)

Renders text to its canvas, and updates its texture.

void
updateTransform()

Updates the transform on all children of this container for rendering.

void
protected _calculateBounds()

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

void
protected _render(renderer: PIXI.Renderer)

Properties inherited from Sprite

PIXI.ObservablePoint
anchor
PIXI.BLEND_MODES
blendMode = PIXI.BLEND_MODES.NORMAL
boolean
isSprite = true
string
pluginName = 'batch'
boolean
roundPixels = false

If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation.

PIXI.Texture
texture

The texture that the sprite is using.

number
tint = 0xFFFFFF

The tint applied to the sprite. This is a hex value.

PIXI.ObservablePoint
protected _anchor = `this.texture.defaultAnchor`
number
protected _cachedTint = 0xFFFFFF
number
protected _height
HTMLCanvasElement
protected _tintedCanvas = undefined
number
protected _width
Float32Array
protected uvs
Float32Array
protected vertexData

Properties inherited from Container

T[]
children
boolean
interactiveChildren = true
boolean
sortableChildren
boolean
sortDirty

Should children be sorted by zIndex at the next updateTransform call.

Properties inherited from DisplayObject

boolean
_accessibleActive = false
boolean
_accessibleDiv = undefined
PIXI.Bounds
_bounds

The bounds object, this is used to calculate and store the bounds of the displayObject.

PIXI.Bounds
_localBounds

Local bounds object, swapped with _bounds when using getLocalBounds().

boolean
accessible = false
boolean
accessibleChildren = true
string
accessibleHint = undefined
string
accessiblePointerEvents = 'auto'
?string
accessibleTitle = undefined
string
accessibleType = 'button'
number
alpha

The opacity of the object.

number
angle
boolean
buttonMode
boolean
cacheAsBitmap
number
cacheAsBitmapMultisample = PIXI.MSAA_QUALITY.NONE
number
cacheAsBitmapResolution = null
boolean
cullable

Should this object be rendered if the bounds of this object are out of frame?

PIXI.Rectangle
cullArea
string
cursor = undefined
boolean
destroyed

Readonly flag for destroyed display objects.

PIXI.Rectangle
filterArea
PIXI.Filter[] | null
filters
PIXI.IHitArea
hitArea = undefined
boolean
interactive = false
boolean
isMask

Does any other displayObject use this object as a mask?

PIXI.Matrix
localTransform
PIXI.Container | PIXI.MaskData | null
mask
string
name = undefined
PIXI.Container
parent

The display object container that contains this display object.

PIXI.ObservablePoint
pivot
PIXI.ObservablePoint
position
boolean
renderable
number
rotation
PIXI.ObservablePoint
scale

The scale factors of this object along the local coordinate axes.

PIXI.ObservablePoint
skew
PIXI.DisplayObject
smartMask = undefined
PIXI.Transform
transform
boolean
visible
number
worldAlpha
PIXI.Matrix
worldTransform
boolean
worldVisible
number
x
number
y
number
zIndex

The zIndex of the displayObject.

number
protected _boundsID

Flags the cached bounds as dirty.

PIXI.Rectangle
protected _boundsRect

Cache of this display-object's bounds-rectangle.

boolean
protected _destroyed

If the object has been destroyed via destroy(). If true, it should not be used.

PIXI.Filter[]
protected _enabledFilters
number
protected _lastSortedIndex
PIXI.Rectangle
protected _localBoundsRect

Cache of this display-object's local-bounds rectangle.

PIXI.Container | PIXI.MaskData
protected _mask
PIXI.Container
protected _tempDisplayObjectParent
number
protected _zIndex

Methods inherited from Sprite

void
calculateTrimmedVertices()

Calculates worldTransform * vertices for a non texture with a trim. store it in vertexTrimmedData.

void
calculateVertices()

Calculates worldTransform * vertices, store it in vertexData.

boolean
containsPoint(point: IPointData)
void
protected _onTextureUpdate()

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

Inherited Events from Container

Inherited Events from DisplayObject

added
childRemoved
click
clickcapture

Capture phase equivalent of click.

destroyed
mousedown
mousedowncapture

Capture phase equivalent of mousedown.

mouseenter

Fired when the mouse pointer is moved over a DisplayObject and its descendant's hit testing boundaries.

mouseentercapture

Capture phase equivalent of mouseenter

mouseleave

Fired when the mouse pointer exits a DisplayObject and its descendants.

mouseleavecapture

Capture phase equivalent of mouseleave.

mousemove
mousemovecature

Capture phase equivalent of mousemove.

mouseout
mouseoutcapture

Capture phase equivalent of mouseout.

mouseover
mouseovercapture

Capture phase equivalent of mouseover.

mouseup
mouseupcature

Capture phase equivalent of mouseup.

mouseupoutside
mouseupoutsidecapture

Capture phase equivalent of mouseupoutside.

pointercancel
pointercancelcapture

Capture phase equivalent of pointercancel.

pointerdown
pointerdowncapture

Capture phase equivalent of pointerdown.

pointerenter

Fired when the pointer is moved over a DisplayObject and its descendant's hit testing boundaries.

pointerentercapture

Capture phase equivalent of pointerenter

pointerleave

Fired when the pointer leaves the hit testing boundaries of a DisplayObject and its descendants.

pointerleavecapture

Capture phase equivalent of pointerleave.

pointermove
pointermovecapture

Capture phase equivalent of pointermove.

pointerout
pointeroutcapture

Capture phase equivalent of pointerout.

pointerover
pointerovercapture

Capture phase equivalent of pointerover.

pointertap
pointertapcapture

Capture phase equivalent of pointertap.

pointerup
pointerupcapture

Capture phase equivalent of pointerup.

pointerupoutside
pointerupoutsidecapture

Capture phase equivalent of pointerupoutside.

removed
rightclick
rightclickcapture

Capture phase equivalent of rightclick.

rightdown
rightdowncapture

Capture phase equivalent of rightdown.

rightup
rightupcapture

Capture phase equivalent of rightup.

rightupoutside
rightupoutsidecapture

Capture phase equivalent of rightupoutside.

tap
tapcapture

Capture phase equivalent of tap.

touchcancel
touchcancelcapture

Capture phase equivalent of touchcancel.

touchend
touchendcapture

Capture phase equivalent of touchend.

touchendoutside
touchendoutsidecapture

Capture phase equivalent of touchendoutside.

touchmove
touchmovecapture

Capture phase equivalent of touchmove.

touchstart
touchstartcapture

Capture phase equivalent of touchstart.

PIXI.FederatedWheelEvent
wheel

Fired when a the user scrolls with the mouse cursor over a DisplayObject.

PIXI.FederatedWheelEvent
wheelcapture

Capture phase equivalent of wheel.

Public Properties


experimentalLetterSpacing Text.ts:61
static experimentalLetterSpacing: boolean = false

New rendering behavior for letter-spacing which uses Chrome's new native API. This will lead to more accurate letter-spacing results because it does not try to manually draw each character. However, this Chrome API is experimental and may not serve all cases yet.

nextLineHeightBehavior Text.ts:53
static nextLineHeightBehavior: boolean = false

New behavior for lineHeight that's meant to mimic HTML text. A value of true will make sure the first baseline is offset by the lineHeight value if it is greater than fontSize. A value of false will use the legacy behavior and not change the baseline of the first line. In the next major release, we'll enable this by default.

_resolution Text.ts:75
_resolution: number = PIXI.settings.RESOLUTION

The resolution / device pixel ratio of the canvas.

This is set to automatically match the renderer resolution by default, but can be overridden by setting manually.

canvas Text.ts:68
canvas: HTMLCanvasElement

The canvas element that everything is drawn to.

context Text.ts:70
context: ModernContext2D

The canvas 2d context that everything is drawn with.

height Text.ts:694
height: number

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

resolution Text.ts:760
resolution: number = 1

The resolution / device pixel ratio of the canvas.

This is set to automatically match the renderer resolution by default, but can be overridden by setting manually.

style Text.ts:712
style: PIXI.TextStyle | ITextStyle<Partial>

Set the style of the text.

Set up an event listener to listen for changes on the style object and mark the text as dirty.

text Text.ts:742
text: string

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

width Text.ts:676
width: number

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

Public Methods


destroy Text.ts:639
destroy(options: IDestroyOptions | boolean) → {void}

Destroys this text object.

Note* Unlike a Sprite, a Text object will automatically destroy its baseTexture and texture as the majority of the time the texture will not be shared with any other Sprites.

Parameters:
Name Type Attributes Default Description
options IDestroyOptions | boolean

<optional>

Options parameter. A boolean will act as if all options have been set to that value

options.children boolean

<optional>

false

if set to true, all the children will have their destroy method called as well. 'options' will be passed on to those calls.

options.texture boolean

<optional>

true

Should it destroy the current texture of the sprite as well

options.baseTexture boolean

<optional>

true

Should it destroy the base texture of the sprite as well

Returns:
Type Description
void
getLocalBounds Text.ts:468
getLocalBounds(rect: PIXI.Rectangle) → {PIXI.Rectangle}

Gets the local bounds of the text object.

Parameters:
Name Type Attributes Description
rect PIXI.Rectangle

<optional>

The output rectangle.

Returns:
Type Description
PIXI.Rectangle

The bounds.

updateText Text.ts:158
updateText(respectDirty: boolean) → {void}

Renders text to its canvas, and updates its texture.

By default this is used internally to ensure the texture is correct before rendering, but it can be used called externally, for example from this class to 'pre-generate' the texture from a piece of text, and then shared across multiple Sprites.

Parameters:
Name Type Description
respectDirty boolean

Whether to abort updating the text if the Text isn't dirty and the function is called.

Returns:
Type Description
void
updateTransform Text.ts:447
updateTransform() → {void}

Updates the transform on all children of this container for rendering.

Returns:
Type Description
void

Protected Methods


_calculateBounds Text.ts:480
protected _calculateBounds() → {void}

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

Returns:
Type Description
void
_render Text.ts:430
protected _render(renderer: PIXI.Renderer) → {void}

Renders the object using the WebGL renderer

Parameters:
Name Type Description
renderer PIXI.Renderer

The renderer

Returns:
Type Description
void

Powered by webdoc!