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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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