isfuturebright

How to use a tff/otf font with Phaser?

Recommended Posts

Thanks for this helpful thread, all. Was wondering if anyone had success getting the Google Font webloader to work with a font that has spaces in the name. For some reason, I can't get a font with spaces in the name to load -

Share this post


Link to post
Share on other sites

You use the web font loader locally, there is a github project for it. Or just use @font-face in your CSS.

How do you keep the font even when you go live with the game? Cause now my font doesn't work when the game is live.

Share this post


Link to post
Share on other sites

@Batzi: i load fonts using CSS (ttf file is bundled with my other assets) and it works fine when game is running. 

do you link your css file? What do you mean with your tff file is bundled with your other assets? Can you elaborate more please? :)

Share this post


Link to post
Share on other sites

do you link your css file? What do you mean with your tff file is bundled with your other assets? Can you elaborate more please? :)

Yup, i can explain a bit more  ;)

 

So my project is structured like that:

- a sub-directory contains JavaScript files, another contains CSS & font files and a last one contains images (something very common imo)

 

- an main page called "index.html" which link a CSS file. 

<link rel="stylesheet" type="text/css" href="css/myCSS.css"> 

- the CSS file (called myCSS.css) contains a font-face tag 

@font-face {	font-family: 'Tarentula';	src: url('tarentula.ttf') format('truetype');}

- In the game, i describe font using an array

{ font: "50px Tarentula", fill: "#FF0000", stroke: "#222222", strokeThickness: 2, align: "center" };

And it works fine. 

 

You can see it in action on these pages: Pick Them all (Halloween)  & Pick Them All (Christmas)

Share this post


Link to post
Share on other sites

It's possible to use icon fonts? 
I'm trying to use custom icomoon font, but when I do:

let arrow = this.game.add.text(this.game.world.centerX, 100, "\e900", {
            font: "40px icomoon",
            fill: "#FFFFFF"
        });

I see `e900` in canvas. not Icon.

Share this post


Link to post
Share on other sites

I also had the same problem with iconmoon. The Problem is that the Phase.Text does not understand asci or uni codes. there is only support for "abc..." and so on. My solution is:

1. Bevore you export the font from iconmoon you have to change the char code value of the icons. for example change "e900" to "a" "b" "c" important only use single character from a-z or 0-9. Than export it. 

2. After that, copy the fonts in correct folder an add the css code.:

@font-face {
    font-family: 'icomoon';
    src:    url('../fonts/icomoon.eot?1qba09');
    src:    url('../fonts/icomoon.eot?1qba09#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?1qba09') format('truetype'),
        url('../fonts/icomoon.woff?1qba09') format('woff'),
        url('../fonts/icomoon.svg?1qba09#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}


.workarround
{
    font-family: 'icomoon';
    position: absolute;
   
}

3. Finally add a div or span and give them the class "workarround" with one character minimum.

 <div class="workarround">-</div>

Important DO NOT USE "display:none", to hide the div

4. add a text to your phaser game, give it the correct style and use the defined character signs "a" "b" which you have defined in step (1.)

    var style = { font: "normal 65px icomoon", fill: "#ff0044", align: "center" };

    var text = game.add.text(game.world.centerX, game.world.centerY, "abcde", style);

after that the icons should apear

Share this post


Link to post
Share on other sites

It is also possbile with the fontloader (https://github.com/typekit/webfontloader)  just do step 1. and 2. without the .workarround class

3. Add the webfontlibrary to your header

 <script type="text/javascript" src="js/webfontloader.js"></script>

4.add some code the handle the initialisation for the game, only if the font is ready for use!

var fontReady = false;
var windowReady = false;

function fontReady ()
{
    fontReady = true;
    checkIfBothReady();
}
;


function windowLoaded ()
{
    windowReady = true;
    checkIfBothReady();
};
function checkIfBothReady ()
{
    if(windowReady == true && fontReady == true)
    {
        game = new Phaser.Game(window.innerWidth , window.innerHeight , Phaser.AUTO, 'game',{  create: create, render: render });

    }
        
};

5. Add code to use the fontloader for loading your css file with the fontfamilies definitions.

 WebFont.load({
            custom: {
              families: [ 'icomoon' ],
                urls:['assets/styles/index.css']
                ,
                
            }
            ,
              active: function() 
                 {
                  fontReady();
                  alert('loaded')
                },
            inactive: function() {alert('failed')}
          });

6. And the last part add to the body tag an eventhandler for onload: 

 <body onload="windowLoaded()" >

 

Share this post


Link to post
Share on other sites
On 2/11/2016 at 9:25 AM, zajca said:

It's possible to use icon fonts? 
I'm trying to use custom icomoon font, but when I do:


let arrow = this.game.add.text(this.game.world.centerX, 100, "\e900", {
            font: "40px icomoon",
            fill: "#FFFFFF"
        });

I see `e900` in canvas. not Icon.

I got it to work with glyphicon halflings by simply prepending a `u` to the char code in my phaser add.text call. Like this: "\ue900". Not sure why it worked.

Share this post


Link to post
Share on other sites

Guys, after having a lot of troubles to load ttf/otf font in Phaser when using mozzila and edge (they were displaying properly in Chrome, btw), I found a workarround.

just use this in the CSS:

@font-face {
			font-family: 'fontname';
			src: url("../assets/fonts/font.ttf") format("truetype") local('fontname');

		}

Then you just use this in the preload function:

this.loadFontTF = new Phaser.Text(this.game, 0, 0, 'zzzzzzz', { font: "5px fontName" , fill:"#ea88e7"});
        this.game.world.add(this.loadFontTF);
        this.loadFontTF.alpha = 0.01;
        this.loadFontTF = null;


 

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.