PixiJS Multi Text

Multi-style text for Pixi.js with inline objects. Check out the Demo website!

Installation

To install the latest version of this package for Pixi.js v8 and above, use:

npm install pixijs-multi-text

For Pixi.js v6 and v7, use:

npm install pixijs-multi-text@^1.0.0

Compatibility

Depending on your version of PixiJS, you'll need to figure out which major version to use.

PixiJS	pixijs-multi-text
v6.x	v1.x
v7.x	v1.x
v8.x	v2.x

Features and Usage

Explore the demos to see examples on how to use it:

• Pixi.js v8 Demo
• Pixi.js v6/7 Demo

Multiple Style example

Define tokens that will be parsed by the MultiText component and specify options that control the text behavior.

const tokens: MultiTextTokens = {
    default: {
        fontSize: 25,
        fontFamily: "Arial",
        fill: "#000000",
        resolution: 2,
    },
    red: {
        fill: "#ff0000",
    },
};

const options: MultiTextOptions = {
    defaultStyle: `default`,
    align: `center`,
    anchor: 0.5,
    bounds: { width: 640, height: 120 },
};

const text = "This is <red>example</red> text!";
const multi = new MultiText(text, tokens, options);
app.stage.addChild(multi);

Inline sprite example

Define a token with a create function which returns a pixi display object, eg. a sprite, and control its position and size using the width and height properties of the token.

const options: MultiTextOptions = {
    defaultStyle: `default`,
    align: `center`,
    anchor: 0.5,
    bounds: { width: 640, height: 120 },
    wrap: true,
    wrapWidth: 640,
};
const texture = await Texture.fromURL("assets/img.png");

const tokens: MultiTextTokens = {
    default: {
        fontSize: 25,
        fill: "#000000",
        padding: 2,
        resolution: 2,
    },
    sprite: {
        create: () => {
            const sprite = new Sprite(texture);
            sprite.scale.set(1);
            return sprite;
        }
    }
}
const text = "There is an {sprite} image inline with text!"

const multi = new MultiText(text, tokens, options);
app.stage.addChild(multi);

Variable example

Variables can be used to dynamically update the text. This approach is more efficient than updating the whole text string, as it avoids re-parsing and re-creating all the objects. Remember to call updateLayout after updating the variable.

const options: MultiTextOptions = {
    align: `center`,
    anchor: 0.5,
}

const tokens: MultiTextTokens = {
    default: {
        fontSize: 25,
        fill: "#000000",
    },
    counter: {
        text: `1`,
    },
}
const multi = new MultiText(`Counter is {counter}`, tokens, options);

let count = 1;
setInterval(() => {
    multi.getVariableObjects(`counter`).forEach((text) => text.setText(`${count++}`));
    multi.updateLayout();
}, 200);