3ddy

Webfonts not working

Recommended Posts

Hello,

I did some searching, tried many solutions but none seems to work for me... I'm using Phaser 2.2.2.

Here is my index.html:
 

<!DOCTYPE html>
<html>
	<head>
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
	<style type="text/css">
		body{
			font-family: 'Tangerine';
			font-size: 32px;
			background: #ffffff;
			padding:0px;
			margin:0px;
		}
	</style>
	<script src="phaser.min.js"></script>
	 <script src = "js/preload.js"></script>
	 <script src = "js/intro.js"></script>
	 <script src = "js/office.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			var game = new Phaser.Game(960, 540, 'PHASER.WEBGL');
			game.state.add('Preload', MyGame.preload)
			game.state.add('Intro', MyGame.intro);
			game.state.add('Office', MyGame.office);
			game.state.start('Preload');
		</script>
	</body>
</html>

Then I'm trying to use it in my Office state in init function like that:
 

this.sheetText = game.add.text(380, 160, 'some text to display', {font: "14px Tangerine", fill: "#000000", align: "left"});

And it's not working, it is displaying some normal, default font... can somebody tell me what I'm doing wrong?

Thanks for help

Share this post


Link to post
Share on other sites
56 minutes ago, drhayes said:

You're probably better off getting Phaser to handle the loading of the font for you. Check out this example: http://phaser.io/examples/v2/text/text-padding

Thanks for answer, but still something seems wrong. So with that approach from example you posted I should have my index.html like that (no fonts loading etc.? ) :

 

<!DOCTYPE html>
<html>
	<head>
	<style type="text/css">
		body{
			background: #ffffff;
			padding:0px;
			margin:0px;
		}
	</style>
	<script src="phaser.min.js"></script>
	 <script src = "js/preload.js"></script>
	 <script src = "js/intro.js"></script>
	 <script src = "js/office.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			var game = new Phaser.Game(960, 540, 'PHASER.WEBGL');
			game.state.add('Preload', MyGame.preload)
			game.state.add('Intro', MyGame.intro);
			game.state.add('Office', MyGame.office);
			game.state.start('Preload');
		</script>
	</body>
</html>

Then I move through my preload and intro state to office. In Office state I want to use somewhere some fancy font. Here is the code:

 

MyGame.office = function (game) {
    WebFontConfig = {

    //  'active' means all requested fonts have finished loading
    //  We set a 1 second delay before calling 'createText'.
    //  For some reason if we don't the browser cannot render the text the first time it's created.
    active: function() { game.time.events.add(Phaser.Timer.SECOND, this.createText, this); },

    //  The Google Fonts we want to load (specify as many as you like in the array)
    google: {
      families: ['Tangerine']
    }

};
};

MyGame.office.prototype = {
    init: function () {
        this.background = this.add.sprite(0, 0, 'some', 'somepng.png');
        
        this.createText();
        
    },
    
    createText: function() {
        var style = { font: "25px Arial", fill: "#000", align: "center" };
        var style2 = {font: "14px Tangerine", fill: "#000", align: "left"};
        this.sheetText = game.add.text(380, 160, 'What is AML?', style2);
        this.sheetText2 = game.add.text(380, 260, 'What is AML?', style);
    },
    
    create: function() {
        
    },
}



And it is still not working... any ideas why? Tried putting WebFontConfig in init function but nothing changed

Share this post


Link to post
Share on other sites
18 hours ago, drhayes said:

Did you put the script load in your preload? (You're not showing the state so I'm not sure)

You were right - I forgot to add it. Should it be in the same state where I use webfonts? Because when I put it in my preloader state and there were no errors, but font still not working. Next I moved this loading script to preload function in my Office state (the one where I want to use webfont) and I'm getting error 

phaser.js:52102 Uncaught TypeError: Cannot read property 'apply' of undefined

 

The function I created in Office state: 

preload: function() {
        //  Load the Google WebFont Loader script
        game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js');  
    },

 

 

When I googled a bit that error I can see that most people have some problems with event timers. Is everything alright in this part? The error pops up about a second after everything is displayed.

 

init: function (avatar) {
        this.background = this.add.sprite(0, 0, 'aml_1', 'szukaj_warstwa_1.png');
        WebFontConfig = {

    //  'active' means all requested fonts have finished loading
    //  We set a 1 second delay before calling 'createText'.
    //  For some reason if we don't the browser cannot render the text the first time it's created.
    active: function() { game.time.events.add(Phaser.Timer.SECOND, this.createText, this); },

    //  The Google Fonts we want to load (specify as many as you like in the array)
    google: {
      families: ['Tangerine']
    }

};

        this.createText();
      

 

Share this post


Link to post
Share on other sites

Can you change the code to look like this?

MyGame.office = function (game) {
  var self = this;
  WebFontConfig = {

    //  'active' means all requested fonts have finished loading
    //  We set a 1 second delay before calling 'createText'.
    //  For some reason if we don't the browser cannot render the text the first time it's created.
    active: function() {
      game.time.events.add(Phaser.Timer.SECOND, self.createText, self);
    },

    //  The Google Fonts we want to load (specify as many as you like in the array)
    google: {
      families: ['Tangerine']
    }
  };
};

Based on the error I think "this.createText" doesn't refer to anything inside your "active" function. "this" inside there is the "WebFontConfig" object, but you want it to be your "MyGame.office" state. Try the above, see if it works.

Share this post


Link to post
Share on other sites

Thanks for answer

I've tried placing code above in two places, in MyGame.office = function (game) { } and inside init function of MyGame.office.prototype = { } - in both cases I don't have error, but the font is not displayed properly...

Share this post


Link to post
Share on other sites

I've heard that sometimes you have to use the font somewhere before it renders properly in phaser. Maybe try something like this?

 

<!DOCTYPE html>
<html>
	<head>
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
	<style type="text/css">
		body{
			font-family: 'Tangerine';
			font-size: 32px;
			background: #ffffff;
			padding:px;
			margin:px;
		}
		.fontPreload {
		  	font-family: 'Tangerine';
		  	position:absolute;
		  	left:-100px;
		}
	</style>
	<script src="phaser.min.js"></script>
	 <script src = "js/preload.js"></script>
	 <script src = "js/intro.js"></script>
	 <script src = "js/office.js"></script>
	</head>
	<body>
		<div class="fontPreload">.</div>
		<script type="text/javascript">
			var game = new Phaser.Game(960, 540, 'PHASER.WEBGL');
			game.state.add('Preload', MyGame.preload)
			game.state.add('Intro', MyGame.intro);
			game.state.add('Office', MyGame.office);
			game.state.start('Preload');
		</script>
	</body>
</html>

 

Share this post


Link to post
Share on other sites
3 minutes ago, MysticJ said:

I've heard that sometimes you have to use the font somewhere before it renders properly in phaser. Maybe try something like this?

 


<!DOCTYPE html>
<html>
	<head>
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
	<style type="text/css">
		body{
			font-family: 'Tangerine';
			font-size: 32px;
			background: #ffffff;
			padding:px;
			margin:px;
		}
		.fontPreload {
		  	font-family: 'Tangerine';
		  	position:absolute;
		  	left:-100px;
		}
	</style>
	<script src="phaser.min.js"></script>
	 <script src = "js/preload.js"></script>
	 <script src = "js/intro.js"></script>
	 <script src = "js/office.js"></script>
	</head>
	<body>
		<div class="fontPreload">.</div>
		<script type="text/javascript">
			var game = new Phaser.Game(960, 540, 'PHASER.WEBGL');
			game.state.add('Preload', MyGame.preload)
			game.state.add('Intro', MyGame.intro);
			game.state.add('Office', MyGame.office);
			game.state.start('Preload');
		</script>
	</body>
</html>

 

Thanks, it solved my problem!

Also thanks to drhayes for your impact in my problem.

Share this post


Link to post
Share on other sites

A more elegant solution that I use is the WebFont loader. This all you need to add to the end of your HTML head element.

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script>
    WebFont.load({
        google: {
            // Put your fonts to load here.
            families: ['Passion+One::latin']
        }
    });
</script>

 

Share this post


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.