JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.1/pixi.js"></script>
JavaScript
// Load them google fonts before starting...!
WebFontConfig = {
google: {
families: [ 'Snippet', 'Arvo:700italic', 'Podkova:700' ]
},
active: function() {
// do something
init();
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
function init()
{
var bitmapFontText = null;
var sprite = null;
var container = null;
var spinningText = null;
var loader = new PIXI.loaders.Loader(); // you can also create your own if you want
// create a renderer instance
var renderer = PIXI.autoDetectRenderer(620, 400, {antialias: true});
loader.add('desyrel',"fntbonuswheelmultiplierblue-export.xml");
loader.once('complete',onAssetsLoaded);
loader.load();
function onAssetsLoaded()
{
spinningText = new PIXI.Text("I'm fun!", {font: "bold 60px Podkova", fill: "#cc00ff", align: "center", stroke: "#FFFFFF", strokeThickness: 6});
// setting the anchor point to 0.5 will center align the text... great for spinning!
spinningText.anchor.x = spinningText.anchor.y = 0.5;
spinningText.position.x = 520 / 2;
spinningText.position.y = 300 / 2;
stage.addChild(spinningText);
bitmapFontText= new PIXI.Text("I'm fun!", {font: "bold 60px Podkova", fill: "#ff0000", align: "center", stroke: "#FFFFFF", strokeThickness: 6});
//stage.addChild(bitmapFontText);
// container = new PIXI.Container();
sprite = new PIXI.Sprite(bitmapFontText.generateTexture(renderer));
sprite.anchor.x = sprite.anchor.y = 0.5;
sprite.position.x = 620/2;
sprite.position.y =...