yebudar Posted December 6, 2014 Share Posted December 6, 2014 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 More sharing options...
jpdev Posted December 7, 2014 Share Posted December 7, 2014 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%20fontsvar 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));} Exedra Operating System 1 Link to comment Share on other sites More sharing options...
yebudar Posted December 9, 2014 Author Share Posted December 9, 2014 Hey, it worked. Thanks very much Link to comment Share on other sites More sharing options...
Recommended Posts