Type for PIXI is a powerfull tool to work with texts on HTML 5 canvas.
- Tag system
- 36 Basic Aligns
- Suports any Font
- Line Spacing
- Word Spacing
- stacked align
- Input with text selection (it's not an html bridge)
official website: http://www.pixijs.com/
<script src="js/pixi.min.js" ></script>
<script src="js/type.min.js" ></script>
import 'pixi.js';
import 'type-for-pixi';
<script>
window.onload = function(){
//creating loader to load fonts
var loader = new type.Loader();
//adding fonts using add method
//example: .add('century', 'fonts/century.ttf');
loader.add('century', '../fonts/century.ttf');
loader.add('playtime', '../fonts/playtime.ttf');
//adding listener to verify when fonts have been loaded
loader.once('loadComplete', init);
//load fonts
loader.load();
function init(){
//creating PIXI
var app = new PIXI.Application(1024,500, {transparent: true});
document.body.appendChild(app.view);
//creating TEXT with area 600x600 px
var myText = new type.text.TextField(600,600);
//seting text with tags for style
//exemple: .setText('text', styleObject)
myText.setText(
'<tag>Nada do que é <into>social e humano</into> é mais\nreal que as <anothertag>utopias.</anothertag> Na sua vertente eutópica,\nas utopias constituíram sempre o fundamento <under>simbólico e mítico</under>...</tag>',
{
align: 'justify',
tag: {
fontFamily: "century",
fontSize: 20,
fill: "red"
},
into: {
fontFamily: "playtime",
fontSize: 50,
fill: "green"
},
anothertag: {
fontWeight: "bold",
fill: "#198c67"
},
under: {
underscore: true
}
}
);
app.stage.addChild(myText);
}
}
</script>
npm i type-for-pixi -P
compile with webpack and babel with presset env and plugins:
- babel-plugin-transform-decorators-legacy
- babel-plugin-transform-class-properties
- babel-plugin-transform-private-properties
For more Examples download the project and open the examples folder or click this links:
view Simple tag example here;
view all Simple Aligns here;
view Tween example here;
view Custom Align example here;
view Input example here;
view Stacked Align example here;
view Simple with japanese font example here;
Note that for most users you don't need to build this project. If all you want is to use Type, then just download one of our prebuilt releases. Really the only time you should need to build Type is if you are developing it.
If you don't already have Node.js and NPM, go install them. Once you do, you can then install grunt:
npm i -g grunt-cli
After that you can install the project modules at the project root file:
npm i
Then, to build the source, run:
npm run build
- More customizations
- Softkeyboard
- Cursor
- Box Vertical Align
PIXI.js - goodboy
font.js - Pomax
opentype.js - nodebox
jsdiff - kpdecker
eventemmiter3 - primus
This content is released under the (http://opensource.org/licenses/MIT) MIT License.