jeena/pixi.js
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

bitmap fonts

Browse source
This commit is contained in:
Krzysztof Opalka 2013-05-06 19:12:25 +02:00
parent 89ca071ab2
commit ae98487b16
10 changed files with 2311 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

1922
examples/example 10 - Text/desyrel.fnt Normal file
View file

File diff suppressed because it is too large Load diff

BIN
examples/example 10 - Text/desyrel.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 303 KiB

68
examples/example 10 - Text/index.html
View file

@ -26,8 +26,8 @@
active: function() {
// do something
init();
},
}
};
(function() {
var wf = document.createElement('script');
@ -38,59 +38,75 @@
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 );
// creat some white text using the Snippet webfont
var textSample = new PIXI.Text("Pixi.js can has\nmultiline text!", {font: "50px Snippet", fill: "white", align: "center"});
textSample.anchor.x = 0.5;
textSample.position.x = 620/2;
textSample.position.y = 10;
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;
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.x = 620 / 2;
countingText.position.y = 320;
countingText.anchor.x = 0.5;
stage.addChild(textSample);
stage.addChild(spinningText);
stage.addChild(countingText);
count = 0;
score = 0;
var count = 0;
var score = 0;
function animate() {
requestAnimFrame( animate );
count++;
if(count == 50)
{
count = 0;
score ++
score++;
// update the text...
countingText.setText("COUNT 4EVAR: " + score )
countingText.setText("COUNT 4EVAR: " + score);
}
// just for fun, lets rotate the text
spinningText.rotation += 0.03;