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

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);