122 lines
3.4 KiB
HTML
122 lines
3.4 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<!--<link href='http://fonts.googleapis.com/css?family=Snippet|Arvo:700italic|Podkova' rel='stylesheet' type='text/css'>-->
|
|
<title>pixi.js example 10 Text</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #000000;
|
|
}
|
|
</style>
|
|
|
|
|
|
<script src="pixi.js"></script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
|
|
// 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 assetsToLoader = ["desyrel.fnt"];
|
|
|
|
// create a new loader
|
|
var loader = new PIXI.AssetLoader(assetsToLoader);
|
|
|
|
// use callback
|
|
loader.onComplete = onAssetsLoaded;
|
|
|
|
//begin load
|
|
loader.load();
|
|
function onAssetsLoaded()
|
|
{
|
|
var bitmapFontText = new PIXI.BitmapText("bitmap fonts are\n now supported!", {font: "35px Desyrel", align: "right"});
|
|
bitmapFontText.position.x = 620 - bitmapFontText.width - 20;
|
|
bitmapFontText.position.y = 20;
|
|
|
|
stage.addChild(bitmapFontText);
|
|
}
|
|
|
|
// create an new instance of a pixi stage
|
|
var stage = new PIXI.Stage(0x66FF99);
|
|
|
|
// add a shiney background..
|
|
var background = PIXI.Sprite.fromImage("textDemoBG.jpg");
|
|
stage.addChild(background);
|
|
|
|
// create a renderer instance
|
|
var renderer = PIXI.autoDetectRenderer(620, 400);
|
|
// add the renderer view element to the DOM
|
|
document.body.appendChild(renderer.view);
|
|
|
|
requestAnimFrame(animate);
|
|
|
|
// create some white text using the Snippet webfont
|
|
var textSample = new PIXI.Text("Pixi.js can has\nmultiline text!", {font: "35px Snippet", fill: "white", align: "left"});
|
|
textSample.position.x = 20;
|
|
textSample.position.y = 20;
|
|
|
|
// create a text object with a nice stroke
|
|
var 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 = 620 / 2;
|
|
spinningText.position.y = 400 / 2;
|
|
|
|
// create a text object that will be updated..
|
|
var countingText = new PIXI.Text("COUNT 4EVAR: 0", {font: "bold italic 60px Arvo", fill: "#3e1707", align: "center", stroke: "#a4410e", strokeThickness: 7});
|
|
countingText.position.x = 620 / 2;
|
|
countingText.position.y = 320;
|
|
countingText.anchor.x = 0.5;
|
|
stage.addChild(textSample);
|
|
stage.addChild(spinningText);
|
|
stage.addChild(countingText);
|
|
var count = 0;
|
|
var score = 0;
|
|
|
|
function animate() {
|
|
|
|
requestAnimFrame( animate );
|
|
count++;
|
|
if(count == 50)
|
|
{
|
|
count = 0;
|
|
score++;
|
|
// update the text...
|
|
countingText.setText("COUNT 4EVAR: " + score);
|
|
}
|
|
// just for fun, lets rotate the text
|
|
spinningText.rotation += 0.03;
|
|
|
|
// render the stage
|
|
renderer.render(stage);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|