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) → {}
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 |
|
boolean |
|
number |
The resolution / device pixel ratio of the canvas. |
HTMLCanvasElement |
The canvas element that everything is drawn to. |
ModernContext2D |
The canvas 2d context that everything is drawn with. |
number |
The height of the Text, setting this will actually modify the scale to achieve the value set. |
number |
The resolution / device pixel ratio of the canvas. |
PIXI.TextStyle | ITextStyle<Partial> |
Set the style of the text. |
string |
Set the copy for the text object. To split a line you can use '\n'. |
number |
The width of the Text, setting this will actually modify the scale to achieve the value set. |
Methods from Text
void |
Destroys this text object. |
PIXI.Rectangle |
|
void |
Renders text to its canvas, and updates its texture. |
void |
Updates the transform on all children of this container for rendering. |
void |
Calculates the bounds of the Text as a rectangle. The bounds calculation takes the worldTransform into account. |
void |
|
Properties inherited from Sprite
PIXI.ObservablePoint |
|
PIXI.BLEND_MODES |
|
boolean |
|
string |
|
boolean |
If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. |
PIXI.Texture |
The texture that the sprite is using. |
number |
The tint applied to the sprite. This is a hex value. |
PIXI.ObservablePoint |
|
number |
|
number |
|
HTMLCanvasElement |
|
number |
|
Float32Array |
|
Float32Array |
|
Properties inherited from Container
T[] |
|
boolean |
|
boolean |
|
boolean |
Should children be sorted by zIndex at the next updateTransform call. |
Properties inherited from DisplayObject
Methods inherited from Sprite
void |
Calculates worldTransform * vertices for a non texture with a trim. store it in vertexTrimmedData. |
void |
Calculates worldTransform * vertices, store it in vertexData. |
boolean |
|
void |
When the texture is updated, this event will fire to update the scale and frame. |
Methods inherited from Container
Methods inherited from DisplayObject
Inherited Events from Container
Inherited Events from DisplayObject
|
|
|
|
|
|
Capture phase equivalent of |
|
|
|
|
|
Capture phase equivalent of |
|
Fired when the mouse pointer is moved over a DisplayObject and its descendant's hit testing boundaries. |
|
Capture phase equivalent of |
|
Fired when the mouse pointer exits a DisplayObject and its descendants. |
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
Fired when the pointer is moved over a DisplayObject and its descendant's hit testing boundaries. |
|
Capture phase equivalent of |
|
Fired when the pointer leaves the hit testing boundaries of a DisplayObject and its descendants. |
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
PIXI.FederatedWheelEvent |
Fired when a the user scrolls with the mouse cursor over a DisplayObject. |
PIXI.FederatedWheelEvent |
Capture phase equivalent of |
Public Properties
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.
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: 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.
height: number
The height of the Text, setting this will actually modify the scale to achieve the value set.
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: 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.
width: number
The width of the Text, setting this will actually modify the scale to achieve the value set.
Public Methods
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.
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 |
Type | Description |
---|---|
void |
getLocalBounds(rect: PIXI.Rectangle) → {PIXI.Rectangle}
Gets the local bounds of the text object.
Name | Type | Attributes | Description |
---|---|---|---|
rect | PIXI.Rectangle |
<optional> |
The output rectangle. |
Type | Description |
---|---|
PIXI.Rectangle |
The bounds. |
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.
Name | Type | Description |
---|---|---|
respectDirty | boolean |
Whether to abort updating the text if the Text isn't dirty and the function is called. |
Type | Description |
---|---|
void |
updateTransform() → {void}
Updates the transform on all children of this container for rendering.
Type | Description |
---|---|
void |
Protected Methods
protected _calculateBounds() → {void}
Calculates the bounds of the Text as a rectangle. The bounds calculation takes the worldTransform into account.
Type | Description |
---|---|
void |
protected _render(renderer: PIXI.Renderer) → {void}
Renders the object using the WebGL renderer
Name | Type | Description |
---|---|---|
renderer | PIXI.Renderer |
The renderer |
Type | Description |
---|---|
void |