coudboule

Icon fonts support

Recommended Posts

Hello, I'd like to use Icon fonts (typicons, font-awesome, ...) in my next Phaser (2.2.2) game but they are always cropped by Phaser (the right or top parts of each icon is missing).

 

The problem seems to come from pixi.js when it tries to estimate font dimensions in PIXI.Text.prototype.updateText() using some sequence of characters. Is there a way to fix that in Phaser?

 

Here is how I draw the icon X using typicons:

 

var x = game.add.text(200, 200, '\ue122', { font: '50px typicons', fill: '#fff', align: 'center' });

 

The right part of the X icon will be slightly cut out.

 

Thank you for your answer.

Share this post


Link to post
Share on other sites

Just for future reference for anyone that lands on this question. I have found that adding a space after the unicode for fontAwesome gets rid of the cutoff to the right of the icon so something like 

var dec = this.add.text( x, y, '\uf0a8 ', { fill : '#fff', font : '32px fontAwesome' });

Works well. 

Share this post


Link to post
Share on other sites

Guys I did not get this to work, can you please help me?

This is my code:

<link rel="stylesheet" href="lib/fontawesome-free-5.0.13/web-fonts-with-css/css/fontawesome-all.min.css" />
    <script src="lib/phaser.js"></script>
    <script src="scripts/game.js"></script>
 this.computer = this.add.text(100, 100, '\uf108 ', { fill: '#4286f4', font: '30px FontAwesome' });
        console.log(this.computer.text);

All I get is this :

image.png.1fe466eec47286b1586ff98e17dfe9b2.png

 

Share this post


Link to post
Share on other sites

I have the same problem, I could not load font-awesome in my game.

The solution I've found is to simply

1. create a start menu state for my game.

2. In that start menu, I call the font I'm going to use. As expected it does not work.

3. When I get into the game state, it works.

Explanation: The browser only loads font-awesome on the first use. So you have to call it before using it. The solution was found in this article: https://hacks.mozilla.org/2016/06/webfont-preloading-for-html5-games/

Bonus tip: If you're a font awesome pro user the font is: "32px Font Awesome 5 Pro" instead of "32px FontAwesome", you can check in the css file search for @font-face, there is an entry called font-family, use the name displayed.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.