pixi-textstyle-manager
Simple library for manage styles of PIXI.Text.
You can use one config file with styles for texts, and change style directly for one text or for all texts in one time.
You can create json file with styles and download it, on set styles config object directly to TextStyleManager.
Don't forget write issues or proposal :)
Important! Look example in this doc to understand how its works.
Installation
Use simple npm install command to install this library.
In your project you must import TextStyleManager.
npm install pixi-textstyle-manager
How to use
Import TextStyleManager.
import TextStyleManager from 'pixi-textstyle-manager';
Loading config file
Config file must be json and follow this structure:
{
"styles": {
"default": {
"fontFamily": "Arial"
}
},
"textFields": {
"default": {
"default": ["default"]
}
},
"metadata": {
"type": "FlashLibStyledText"
}
}
- styles - object included all styles for all text fields.
- all members must have like PIXI.TextStyle structure.
- must include 'default' object with default style (style can be empty {}).
- one style in this list can be used for different texts, so you don't need to create same styles for different texts, you can create only one.
- textFields - object with description which styles must use text for different states.
- must include 'default' object for using to text by default.
- every state can contain many styles.
- when style applying, each next style replaces the same parameter from the previous style.
- metadata - special data for loader plugin. Must be like this.
For loading config file and adding to TextStyleManager use PIXI.Loaded.
PIXI.loader.add('TextsStyles', './TextsStyles.json');
After loading styles from this config will be added automatically.
Using config directly without config file
If you don't want loading json file, you can set config directly to TextStyleManager.
Object format similar to json config, but don't needed metadata.
TextStyleManager.addConfig({
"styles": {
"default": {
"fontFamily": "Arial",
}
},
"textFields": {
"default": {
"default": ["default"]
}
}
});
Example
Config file
For example, we have very simple config file:
{
"styles": {
"default": {
"fontFamily": "Arial",
"fill": "#000000"
},
"en": {
"fontFamily": "Comic Sans",
"stroke": "#FFFFFF",
"strokeThickness": 3
},
"ru": {
"fontFamily": "Times New Roman",
"fontSize": 30,
"dropShadow": true
},
"redText": {
"fill": "#FF0000"
},
"yellowText": {
"fill": "#FFFF00"
},
"blueText": {
"fill": "#0000FF"
},
"boldText": {
"fontWeight": "bold"
},
"italicText": {
"fontStyle": "italic"
},
"highlight": {
"fill": "#000000",
"stroke": "#FFFFFF",
"strokeThickness": 5
}
},
"textFields": {
"default": {
"default": ["default"]
},
"text1": {
"default": ["blueText"],
"en_gb": ["en", "redText", "boldText"],
"ru_ru": ["ru", "yellowText", "italicText"]
},
"text2": {
"default": ["blueText"],
"en_gb": ["en", "redText", "boldText"],
"ru_ru": ["ru", "yellowText"]
},
"text3": {
"default": ["blueText"],
"en_gb": ["en", "redText"],
"ru_ru": ["ru", "yellowText", "italicText"],
"highlight": ["highlight"]
}
},
"metadata": {
"type": "FlashLibStyledText"
}
}
In config, we have 7 different styles (except default). This styles have this names:
- en
- ru
- redText
- greenText
- blueText
- boldText
- italicText
- highlight
Styles not must be simple like this. They can contains many parameters. I use simple styles just for this example.
Next, we have description for 3 Texts (except default):
- text1
- text2
- text3
Each of these Texts have 3 states:
- default - will be used if setted state not defined.
- this state contains style called "blueText".
So if this state will be applied, to Text style will be added style "blueText" from styles config.
- this state contains style called "blueText".
- en_gb - will be used some styles
- in text1, en_gb has 3 style ("en", "redText", "boldText").
All these styles from the style config will be applied for the text style,
but each next style replaces the same parameter from the previous style.
- in text1, en_gb has 3 style ("en", "redText", "boldText").
- ru_ru - another one state, but works same for another.
Code
We have simple 3 PIXI.Texts
import * as PIXI from "pixi.js";
import FlashLibStyledText from "pixi-textstyle-manager";
///
let text1 = new PIXI.Text('Text1');
text1.x = 50;
text1.y = 50
this.addChild(text1);
let text2 = new PIXI.Text('Text2');
text2.x = 50;
text2.y = 100
this.addChild(text2);
let text3 = new PIXI.Text('Text3');
text3.x = 50;
text3.y = 150
this.addChild(text3);
FlashLibStyledText.addTextField(text1, 'text1');
FlashLibStyledText.addTextField(text2, 'text2');
FlashLibStyledText.addTextField(text3, 'text3');
In this conde created 3 simple PIXI.Text.
Then this Texts added to FlashLibStyledText using addTextField.
First parameter - Text which will be added.
Second parameter - identificator for this Text.
If you don't specify this parameter, FlashLibStyledText will be use "name" parameter from Text as identificator.
Now text looks like this:
All Texts setted to default state and used "blueText" style.
We can change style to "en_gb" for all Texts.
TextStyleManager.currentStyle = 'en_gb';
For all Texts will be applied stales from "en_gb" state.
Now text1 and text2 have "en", "redText" and "boldText" styles, and text3 have "en", "redText".
Change state to "ru_ru":
TextStyleManager.currentStyle = 'ru_ru';
For Texts applied styles from "ru_ru":
text3 have "highlight" state with one parameter, but text1 and text2 doesen't.
If TextStyleManager.currentStyle will be setted to "highlight", for text1 and text2 will be applied "default" state.
TextStyleManager.currentStyle = 'highlight';
TextStyleManager can set state directly for Text:
TextStyleManager.setTextStyle(text1, "en_gb");
TextStyleManager.setTextStyle(text2, "ru_ru");
TextStyleManager.setTextStyle(text1, "highlight");
P.S.
For now that's all :)
Enjoy this and other of my libraries.
Don't forget write issues or proposal :)
Contacts
Telegram @rocket_ua