README

pixi-multistyle-text-esnext

This project ports pixi-multistyle-text to ESNext, making it possible to use it via webpack or SystemJS. The motivation for this project was that the old ES5 version heavily relied on globals and a sloppy this context, which made it impossible to use it in ES5 strict or ES2015+ environments.

Differences

Importing

Since the main use case was the ability to use this from ES2015+ strict without globals, the setup looks like this:

import injector from "pixi-multistyle-text-esnext";
injector(PIXI);
/* Now, `PIXI.MultiStyleText` is available! */

Default styles

In contrast to the ES5 version, this version keeps the "default" style under the name default instead of def, since unlike def, default is actually a word and everyone should immediately understands what it means.

Example

In the example below, we are defining 4 text styles. default is the default style for the text, and the others match the tags inside the text.

const text = new PIXI.MultiStyleText("<pixi>PIXI.js</pixi> can have <multiline>multiline</multiline>\nand <multistyle>multi-style</multistyle> text!", {
    default: {
        font: "35px Snippet",
        fill: "white"
    },
    multiline: {
        font: "35px Snippet",
        fill: "blue"
    },
    pixi: {
        font: "35px Snippet",
        fill: "#D90057"
    },
    multistyle: {
        font: "35px Snippet",
        fill: "red"
    }
});

Usage

`text = new PIXI.MultiStyleText(text, textStyles [,lineStyle])`

Creates a new Multi-Styles Text with the given options

`textStyles`

Type: [string:object] Each key of this object should match with a tag in the text. Use the key default for the default style. The style object can have these properties:

font {string} The style and size of the font. Default bold 20pt Arial.
fill {object} A canvas fillstyle that will be used on the text. Can be a color, a gradient, or a pattern. Default black.
stroke {object} A canvas fillstyle that will be used on the text stroke. Can be a color, a gradient, or a pattern. Default black.
strokeThickness {number} A number that represents the thickness of the stroke. Default 0.
dropShadow {boolean} Set a drop shadow for the text. Default false.
dropShadowColor {object} A fill style to be used on the dropshadow. Can be a color, a gradient, or a pattern. Default black.
dropShadowAngle {number} Set a angle of the drop shadow. Default Math.PI/4.
dropShadowDistance {number} Set a distance of the drop shadow. Default 5.
valign {string} Vertical alignment for multi font-size text ('top', 'middle', 'bottom'). Default 'top'.

`lineStyle`

Type: [object]

align {string} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text. Default left.
wordWrap {boolean} Indicates if word wrap should be used. Default false.
wordWrapWidth {Number} The width at which text will wrap. Default 100.

Usage no npm install needed!