Jump to content

Bitmap fonts not loading


yebudar
 Share

Recommended Posts

Hi,

 

Just started using phaser for a little game I am making. I am most of the way through production but I can't seem to get a different font to load. I have two files - a png containing the actual images, and an xml file with their locations. I used the littera tool online to convert a .ttf file I found into these two files, but I'm not too attached to that specific font - something like this is what I am aiming for: 

https://www.google.com/fonts/specimen/Press+Start+2P

 

Anyway, here's a little demo I threw together to showcase this, so here is the code:

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create , preload: preload});function preload() {    // Load the font from 'assets' folder.    game.load.bitmapFont('Pixel','assets/pixel.png', 'assets/pixel.xml');}function create() {    // So that the font can load properly.    game.time.events.add(Phaser.Timer.SECOND, doSomething, this);}function doSomething() {    // Create the text    var text = "- phaser -\n with a sprinkle of \n pixi dust.";    var style = { font: "65px Pixel", fill: "#ff0044", align: "center" };    var t = game.add.text(game.world.centerX-300, 0, text, style);}

I'd appreciate any help you can give, I'm sure I'm not doing something properly.

 

Thanks,

Matthew

Link to comment
Share on other sites

You are using the normal "text" sprites of phaser. (with them you can only use fonts that are available in the browser.)

 

If you want to use bitmap fonts, you have to do it following this method:

 

http://examples.phaser.io/_site/view_full.html?d=text&f=bitmap+fonts.js&t=bitmap%20fonts

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });function preload() {    game.load.bitmapFont('desyrel', 'assets/fonts/bitmapFonts/desyrel.png', 'assets/fonts/bitmapFonts/desyrel.xml');}var bpmText;function create() {    bmpText = game.add.bitmapText(200, 100, 'desyrel','Phaser & Pixi \nrocking!', 64);}function update() {    bmpText.setText('Phaser & Pixi\nrocking!\n' + Math.round(game.time.now));}
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...