sirknightdragoon / pixi-multistyle-text

Multi-Style Text for pixi.js

pixi-multistyle-text

Add a MultiStyleText object inside pixi.js to easily create text using different styles.

Example

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

var textSample = new PIXI.MultiStyleText("<pixi>Pixi.js</pixi> can has <multiline>multiline</multiline>\nand <multistyle>multi-styles</multistyle> text!",
    {
        def: { 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 dictionary should match with a tag in the text. Use the key def 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.

demo

• Open demo/index.html in a browser and you should see something like this:

License

MIT, see LICENSE.md for details.