PixiJS

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, on the style object, change its wordWrap property to true and and give the wordWrapWidth property a value.

Render Mode

Text objects also have a renderMode property, which can be set to text, bitmap or html:

.1 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.

.2 bitmap: The text is created using a bitmap font.

The primary advantage of this render mode over text is that all of your textures are pre-generated and loading, meaning that rendering is fast, and changing text has no performance implications.

The primary disadvantage is that supporting character sets other than latin, such as CJK languages, may be impractical due to the number of characters.

.3 html uses an svg foreignObject to render HTML text.

The primary advantages of this render mode are:

-- Supports HTML tags for styling such as <strong>, or <em>, as well as <span style="">

-- Better support for emojis and other HTML layout features, better compatibility with CSS line-height and letter-spacing.

The primary disadvantages are: -- Unlike text, html rendering will vary slightly between platforms and browsers. html uses SVG/DOM to render text and not Context2D's fillText like text.

-- Performance and memory usage is on-par with text (that is to say, slow and heavy)

-- Only works with browsers that support .

new Text (…args) Deprecated`` : since 8.0.0

Text.ts:84
Name Type Description
args [unknown] | [TextString, AnyTextStyle<Partial>]

Example

 import { Text } from 'pixi.js';

 const text = new Text({
     text: 'Hello Pixi!',
     renderMode: 'text',
     style: {
         fontFamily: 'Arial',
         fontSize: 24,
         fill: 0xff1010,
         align: 'center',
     }
 });

Members

anchor PointLike

The anchor sets the origin point of the text. The default is (0,0), this means the text's origin is the top left.

Setting the anchor to (0.5,0.5) means the text's origin is centered.

Setting the anchor to (1,1) would mean the text's origin point will be the bottom right corner.

If you pass only single parameter, it will set both x and y to the same value as shown in the example below.

Example
 import { Text } from 'pixi.js';

 const text = new Text('hello world');
 text.anchor.set(0.5); // This will set the origin to center. (0.5) is same as (0.5, 0.5).

roundPixels

Whether or not to round the x/y position of the sprite.

style AnyTextStyle

The style of the text. If setting the style can also be partial TextStyle.

text string

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