-1
\$\begingroup\$

I am trying to load WebFont in Phaser. I have seen the Phaser example, but I can't understand what asset do I need, what function I have to call, & what exactly should my javascript file look like?

\$\endgroup\$
0
\$\begingroup\$
var game = new Phaser.Game(480,350,Phaser.CANVAS,"GameContainer");

var GameState = function(){ 
//var font;
};

GameState.prototype.preload = function(){
    this.load.bitmapFont('pixelArt',"assets/fonts/pixel-Art.png","assets/fonts/pixel-Art.xml");
    // note : The xml file should be saved with UTF-8 encoding or some browsers won't load it.
};


GameState.prototype.create = function(){
   this.font = this.add.bitmapText(20,80,"pixelArt","This is a test line",15);
                // add.bitmapText(x,y,"fontKey",'Text',fontSize);
};


    game.state.add("gameState",GameState);
    game.state.start("gameState");

    // Here I am giving some tips about rendering font and tools that may help.

    //1. Bitmap font generator (Online) - http://kvazars.com/littera/
    //2. Bitmap font editor             - http://www.angelcode.com/products/bmfont/

    // Note : when you generate bitmap font using the first link, 
    // Make sure you select XML (.fnt) as the output under the format dropdown.
    // It should by enabled by default. After download the exported zipfile you found a .png file and
    // .fnt file simply change the extension of .fnt to .xml then your are done.

and save it into a javascript file and link to a html file and you are done.

\$\endgroup\$

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.