Search the Community

Hi, probably one that crops up a lot - is there a good way to wait, or check load of webfont before displaying? The webfont, supplied by google, currently works fine on second load but on a hard refresh often defaults to a system font which makes literally the whole game look aweful. Also, I find that the font is anti-alised which looks bad against the games pixel art look, is the a setting that sorts this at all?

I have looked at the examples and have looked at the forum link: http://www.html5gamedevs.com/topic/2214-how-to-use-a-tffotf-font-with-phaser/ ... but I still do not know how, exactly, to specify an arbitrary font/webfont in phaser. Let's say, for example that I wanted to use a font found on google? What function calls do I need to make? What assets do I need to have? What does my HTML have to look like? What has to be exactly in the JAVASCRIPT file? The examples for Phaser are not helping me I must be a dummy!

Hi guys, So I've been fiddling around with phaser but I got stuck several hours ago and I can't work this one out: loading webfonts. The example on phaser.io works fine but whenever I try to implement it in my state, it fails: var startGame = { preload : function() { this.game.stage.backgroundColor = config.baseBackground; this.groundSprite = game.load.image('groundSprite', assets.game.groundSprite.asset); this.groundMovement = game.add.group(); this.game.load.script('font.baloo', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js'); }, create : function() { //this.loadTileMap(); var style = { font : '40px Baloo', fill : '#fff', align : 'center' }; var text = this.game.add.text(this.game.world.centerX, this.game.world.centerY, 'Yeah - webfont loaded!', style); text.anchor.set(.5, .5); }, update : function() { } } Result What am I doing wrong? Thanks!

Hi all, I was experimenting with techniques for Web Font preloading and ended up writing an article ("Web Font preloading for HTML5 games") with my findings, along with some demos working in Phaser. There are several ways to detect whether a font has been loaded or not (like rendering a text in a DOM element and check for size/scrolls events, etc.), as well as a proper, standard JavaScript API that as of today, only a few browsers have implemented (Firefox, Chrome and Opera). There are several third-party libraries out there (like TypeKit's Loader, FontFace Observer, etc.) which use this JavaScript Font Loading API and do a fallback to workarounds if browsers don't support it. The problem is that Phaser's loader does not integrate anything like this, so right now you need to bypass the loader entirely and keep the font loading separate from other assets loading. This might cause some problems because once your game state hits create the font might not be loaded yet. This demo shows this technique by introducing some flags that delay text rendering until both the preload phase and the font load have been completed. If you'd like to integrate the font loading inside Phaser's preload phase, you'd need to write your custom loader extending Phaser.Loader. My own version of this custom loader involves modifying one internal Phaser.Loader method, which is not ideal and might break in future Phaser's releases. In the article I describe with more detail all of this, so if you are interested check it out. Now, looking into the future… Since WebFonts is the only way we have to render text with our own TTF files, I'd love for Phaser to acknowledge this and offer a way to load these TTF (or woff2, or whatever) files like the other assets. Since the JS API is not implemented in some major browsers yet (like Edge, or Safari), if we were to include this now, we'd need to use a third-party library, which would bump Phaser's build file –which is already big. A lightweight library would be FontFace Observer, which is ~5KB (1.5KB less without the Promise polyfill). I can see @photonstorm not wanting to make Phaser bigger, so my proposals would be: Include one of these libraries in a custom Phaser build. If a users selects that build, a method to load webfonts would be added to Phaser.Loader. Make Phaser.Loader a bit more flexible, so people can implement their own custom loading, without the need to overwrite an internal method. A way to queue an asset and tell the loader when it has been finished or not (via events) would be really helpful. (NOTE: if this is already possible please someone tell me how). Ignore this feature for Phaser and pray that the Font Loading API is implemented by all major browsers when Lazer is out. Make the Phaser.Loader use this API in a method that can load webfonts. I'm happy to contribute code and make a PR if Richard thinks any of these approaches is OK. Does anybody have other suggestion to make webfont loading happening in Phaser? Also, the this Google Fonts example in Phaser is kind of broken because it introduces an arbitrary delay of one second to render the text. By using two flags (one for when the create phase has started, and one for when the font has been loaded) we don't need this delay. Would it be OK to submit a PR to fix this example? Thanks!

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

Phaser ver 2.0.3-2.0.4 ____________________________________________________________________________________________________________ NOT SOLVED YET ____________________________________________________________________________________________________________ Firstly, I'd like to ask whether bitmap fonts are faster than webfonts when rendering with strokes. ____________________________________________________________________________________________________________ QUESTION IS SOLVED ____________________________________________________________________________________________________________ Secondly, I cannot load my bitmap font. I've tried http://kvazars.com/littera/ and FontBuilder for generating the xml and atlas (also converted *.fnt to *.xml) but Phaser keeps saying that error on adding that damn font when I'm trying to place it on the scene: Uncaught TypeError: Cannot read property 'size' of undefined phaser.js:2806 PIXI.BitmapText.updateTextphaser.js:2806 PIXI.BitmapTextphaser.js:2749 Phaser.BitmapTextphaser.js:31321 Phaser.GameObjectFactory.bitmapTextphaser.js:26296 SetupGUIpopulo.js:93 StartGameplaypopulo.js:290 mainmain.js:79 Preloader.createpreloader.js:146 Phaser.StateManager.loadCompletephaser.js:14388 Phaser.SignalBinding.executephaser.js:15296 Phaser.Signal.dispatchphaser.js:15174 dispatchphaser.js:14941 Phaser.Loader.nextFilephaser.js:44211 Phaser.Loader.xmlLoadCompletephaser.js:44162 _xhr.onload That trouble almost stopped my development process. It is really annoying. I guess the font was not really loaded. But why there was no Phaser log error that says what is really wrong? I've found similar topics: http://www.html5gamedevs.com/topic/3688-how-to-make-bitmap-fonts-from-regular-fonts/, http://www.html5gamedevs.com/topic/1923-how-to-generate-xml-png-for-bitmaptext/, but none of them contain the real solution that worked for me. ____________________________________________________________________________________________________________ Sorry for my stupidness, the second question is solved. I was adding the bitmapText with the different font key.