Add a MultiStyleText
object inside pixi.js to easily create text using different styles.
In the example below, we are defining 4 text styles.
default
is the default style for the text, and the others matches the tags inside the text.
let text = new MultiStyleText("Let's make some <ml>multiline</ml>\nand <ms>multistyle</ms> text for\n<pixi>Pixi.js!</pixi>",
{
"default": {
fontFamily: "Arial",
fontSize: "24px",
fill: "#cccccc",
align: "center"
},
"ml": {
fontStyle: "italic",
fill: "#ff8888"
},
"ms": {
fontStyle: "italic",
fill: "#4488ff"
},
"pixi": {
fontSize: "64px",
fill: "#efefef"
}
});
$ npm install
$ npm run build
Creates a new MultiStyleText
with the given text and styles.
Type: { [key: string]: ExtendedTextStyle }
Each key of this dictionary should match with a tag in the text. Use the key default
for the default style.
Each ExtendedTextStyle
object can have any of the properties of a standard PIXI text style, in addition to a valign
property that allows you to specify where text is rendered relative to larger text on the same line ("top"
, "middle"
, or "bottom"
).
The align
, wordWrap
, wordWrapWidth
, and breakWord
properties are ignored on all styles except for the default
style, which controls those properties for the entire text object.
If text is rendered without any value assigned to a given parameter, Pixi's defaults are used.
$ npm run demo
MIT, see LICENSE.md for details.