Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

[SOLVED] Loading Custom Fonts and displaying Cyrillic/French/Turkish characters

scheffgames

By scheffgames,
in Phaser 2

 Share

Recommended Posts

scheffgames Newbie

scheffgames

Posted
Posted

I had a problem, wanted to ask for help here, solved it and thought to post it here for future reference and help others.

I found this solution through trial and error while browsing older topics on the subject on html5gamedevs (thanks to all the guys who posted  them) and some other sources.

PROBLEM:

How to load a custom font in Phaser without using bitmap fonts and how to make it display Cyrillic, Turkish, French and other "non-english languages".

SOLUTION:

 

1)Create the required folders. I'm using an Assets folder next to index.html and that's where everything should be. Create a Css folder and a Fonts folder inside Assets folder (Assets/Css and Assets/Fonts).

2)Create a css file inside the Css folder called "fontLoader.css" and use the following settings (obviously use your preferred font and name it accordingly but be careful at the url path - it's one of the reasons I struggled to get it working in the first place) 

@font-face {
	font-family: "peace_sans";
	font-style: normal;
	font-weight: 400;
	src: url("../Fonts/peace_sans.otf");
}

3)Place your .ttf or .otf font inside the Fonts folder. Make sure the name from the code above coresponds to the name of the font. In my case I've put the file peace_sans.otf inside the Fonts folder.

4)Open the index.html file inside your favourite text editor and add a link rel line pointing to your css file 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type = "text/css" href = "Assets/Css/fontLoader.css">
    <title>My Game</title>

    <script type="text/javascript" src = "Assets/Scripts/phaser.js"></script>

     <script type="text/javascript" src = "Assets/Scripts/boot.js"></script>
    <script type="text/javascript" src = "Assets/Scripts/play.js"></script>
    
</head>
<body>

</body>
</html>

5)Now you're all set but if you try using the font in your game it won't work because it will have to be preloaded in some way. There are 2 well known hacks - first it's to create an html element using the custom font and put it somewhere out of sight. I do prefer the second approach because it involves less html/css tinkering. 

Here it is (thanks html5gamedevs user who's name I cant remember):

Add text in in a game state that happens before your play game state - in my case I've used the boot game state. Notice the line containing this.game.add.text - it creates a 1px text using the custom font I need and it doesn't matter because it won't be visible and the boot phase it's very quick anyway: 

var bootGame = function(game){};

bootGame.prototype.create = function(){
	console.log("Booting game");

	game.physics.startSystem(Phaser.Physics.ARCADE);
	game.state.start("loadGame");
	game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
	// game.world.setBounds(0, -651, 900, 1131);

	game.stage.backgroundColor = "#007f5f";
 

	//fps
	game.time.advancedTiming = true;

	//HACK TO PRELOAD A CUSTOM FONT
	this.game.add.text(0, 0, "hack", {font:"1px peace_sans", fill:"#FFFFFF"});
}

bootGame.prototype.preload = function(){
}

 

Now I can simply call in my play game state the following and it will work using my custom font: 

    var style = {font: "55px peace_sans", fill: "#eeeeee"};
    this.game.add.text(0,0,"My Custom Font Works", style);

 

6)Now the final issue - displaying characters that are not english - like cyrillic, turkish etc. First you'll have to check if the font supports them - you can see this from the website where you download it (Font Squirrel has a nice feature to search fonts by supported languages) - in my case Peace Sans (the custom font I'm using) supports russian. Let's try and change the text to "игра" - which means game in russian. 

    var style = {font: "55px peace_sans", fill: "#eeeeee"};
    this.game.add.text(0,0,"игра", style);

But the text will show some mumbo jumbo characters like this:

badRussian.PNG.222576f10efa3ad0237d984819a10d20.PNG

Why oh why? You won't believe it but it's because of the encoding of the .js file where you're calling your code from. On my system changing the encoding of the .js file to Unicode will display the russian text correctly

goodRussian.PNG.3bc199ab8f0645fbf606f7bd76e50423.PNG

There are a couple of ways to do this. First you can simply open the .js file in Notepad (yup, the good old windows notepad) and Save As  - then choose an encoding from the encoding drop down menu - Unicode in my case.

In case you're wondering why is it grey it's because I'm using a custom Windows Theme. 

notepadEncoding.png.c1a35b1a9db0b02fbd96d90e585000c0.png

The second way it's addressed specifically to Sublime Text 3 users. So sublime text will save text files by default in UTF8 which will display bad characters. To correct this you'll have to choose File > Save with Encoding > UTF 16 LE with BOM - it's the one that works and displays characters correctly.

sublimeEncoding.png.41689714ca5a26e8d2347933912ff1ab.png

Link to comment
Share on other sites
  • 2 weeks later...
  • 1 year later...
 Share
Go to topic listing

  • Recently Browsing   0 members

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