This forum is read only and just serves as an archive. If you have any questions, please post them on

10 years ago by Alexmtl


I'm having a big issue with impactjs on Windows 8 RT. Basically my game runs perfectly fine on Chrome, Firefox, IE10 desktop versions. Even works great in Safari on the ipad. But when I run it on the Surface RT, which supposedly runs on the same rendering engine as desktop IE10, the fonts either dont render or render weird characters.

Here's a screenshot I took on the tablet :

As you can see, in the red bubble there is gibberish text. On every other browser we can see just a number like "100".

Any ideas?

10 years ago by StuartTresadern

Not yet I only got my surface today, Ill port over a few games and see if I have the same problem.

10 years ago by Alexmtl

I just tested a bunch of other impacts games on my surface and they all have an issue with rendering fonts.

Ex : Ztype or

This is a huge showstopper for using impact for the windows store.

10 years ago by dominic

I don't have Surface to test this with, but I believe it's related to the backingStorePixelRatio issue. I'm currently working on a fix. I wrote about the whole thing in my blog, if you're interested:

There's also a simple test-case; could you please try this on WindowsRT?:

10 years ago by StuartTresadern

Results from windows Rt


10 years ago by StuartTresadern

I know that the native Fonts plugin by quidmonkey works if that helps:

10 years ago by dominic

Thanks for testing, Stuart. This implies it's not the same issue as on retina MacBooks.

Unfortunately I'm flying blind here - I still think it has something to do with getting the pixel data of the font image, but I have no idea what could be the cause.

Does this happen with all fonts? Can you please try this one:

And if it fails, could you also add the following at the very end of the _loadMetrics method in lib/impact/font.js:
alert( this.widthMap.join(',') );

This should pop up an alert box when the game starts. With the testfont.png, it should read the following:

My guess is, it's different on WindowsRT.

10 years ago by Alexmtl

Hi Dominic, thank for your time on this matter. I have just tested your testfont.png and I am getting the same result (shows characters but not the ones I'm drawing).

I'm getting :

Stuart : thanks I'll look into that plugin as maybe a temporary backup solution

10 years ago by dominic

So, it seems that somehow the image pixels get mushed when drawing onto a canvas or when they are read back. What I don't understand is why it happens for font images, but not for this test case.

Maybe it's the image size? That it's not a power of 2? I've modified the font image to be 512x8 pixels - maybe this works:

10 years ago by Alexmtl

Hey Dominic, this font works perfectly on IE10 RT!

The other fonts I use in my game are :

However it doesn't seem to be simply a power of 2 issue. I resized some of these files manually in photoshop so that they are a power of 2 and they were not working (even in chrome, IE10 desktop etc..). I guess by resizing them I was messing up something that impact uses to parse the texture.

If I compare in photoshop the testfont-p2.png texture versus the font I used in my game (generated from your font tool page) it seems that a big difference is that your texture has a black background, whereas my textures have a transparent background. Don't know if this is important or not?

10 years ago by dominic

Older Photoshop versions (< CS6) always had problems with certain PNG formats. I used the pngout tool, to make sure the font image has no embedded color profile (which I thought would trip IE10 up); this also compressed the PNG in a format that Photoshop fails to load properly. But the PNG compression/color profile doesn't seem to be the issue here, as the first testfont.png also failed.

When you just resize the font images, Impact can't read the metrics correctly anymore.

Try this instead: in lib/impact/font.js, line 125, replace this:
canvas.width = image.width;
canvas.height = image.height;

var nextPow2 = function( val ) {
	var pow = 1;
	while( pow < val ) { pow *= 2; };
	return pow;
canvas.width = nextPow2(image.width);
canvas.height = nextPow2(image.height);

This will draw the font images into a power of 2 canvas, before reading its pixels back.

10 years ago by jessefreeman

So I have been messing around with this issue for a few hours. This is not 100% conclusive but there appears to be a direct correlation between the size of the font image and the spacing of the marker lines at the bottom of the font.

Taking the modified testfont-p2.png and scaling it up my 2x I was able to get the font to render out all the way up to 4096 x 80 pixels (Where I stopped testing). Even if I change the height of the file it doesn't make a difference. Where I was seeing a problem was with my own generated fonts (from the website tool) and the spacing was only 1 pixel wide at 36 pixels high for example. Then I would get the font render issue.

I'm about to test out one of my own custom fonts and change the spacing to make sure this is really the case. Dominic, I am not sure if your last post was before the latest version of Impact because I tried to find the code you suggested replacing in the font class and the line numbers didn't match up?

Hopefully I can find a solution to this now that I have a Surface and better understand what is going on.

10 years ago by jessefreeman

So it looks like adding more space in between the line markers at the bottom of the font image solved the problem. It has nothing to do with multiples of 2 but for some reason the font parser is not seeing the gap correctly. I'll try to play around with the font parser to see if I can fix it there but for now, just adding a little more space between the characters should solve the problem.

Dominic, would it make sense to add a padding or spacing value to the font generator you have on your site for cases like this? Not sure if this is an issue on other platforms but I have only seen it on Windows RT so far.

10 years ago by SlouchCouch

Yup. Just ran into this today. ie10 wasn't reading the fonts correctly so i manually added an additional pixel space between each bottom line (for 2px space instead of the default 1px space the tool generates) and it works perfectly now. A wee bit tedious but whatever works.

10 years ago by enpu

I got the same problem and im using MacBook Pro Retina with Chrome 25.
Jesse's solution works, can you Dominic fix the font generator?
Page 1 of 1
« first « previous next › last »