Jump to content

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.

Link to post
Share on other sites
  • 5 months later...
  • 2 years later...

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

 

Link to post
Share on other sites
  • 2 months later...

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.

Link to post
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...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...