Forums » Help » Font problem in Windows 8 IE10 - Surface RT

Hello,

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 : http://imageshack.us/f/440/screenshotdgw.jpg/

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?

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

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

Ex : Ztype or http://www.the-wizard-who-stumbled.de/play.html

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

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:
http://phoboslab.org/log/2012/09/drawing-pixels-is-hard

There's also a simple test-case; could you please try this on WindowsRT?:
http://phoboslab.org/crap/backingstore/

Results from windows Rt

(0,0,0),(255,0,255),(0,0,0),(255,0,255),(0,0,0),(255,0,255),(0,0,0),(255,0,255),
(255,0,255),(0,0,0),(255,0,255),(0,0,0),(255,0,255),(0,0,0),(255,0,255),(0,0,0),
(0,0,0),(255,0,255),(0,0,0),(255,0,255),(0,0,0),(255,0,255),(0,0,0),(255,0,255),
(255,0,255),(0,0,0),(255,0,255),(0,0,0),(255,0,255),(0,0,0),(255,0,255),(0,0,0),
(0,0,0),(255,0,255),(0,0,0),(255,0,255),(0,0,0),(255,0,255),(0,0,0),(255,0,255),
(255,0,255),(0,0,0),(255,0,255),(0,0,0),(255,0,255),(0,0,0),(255,0,255),(0,0,0),
(0,0,0),(255,0,255),(0,0,0),(255,0,255),(0,0,0),(255,0,255),(0,0,0),(255,0,255),
(255,0,255),(0,0,0),(255,0,255),(0,0,0),(255,0,255),(0,0,0),(255,0,255),(0,0,0),

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

http://impactjs.com/forums/code/canvas-native-fonts-plugin

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:
http://phoboslab.org/crap/testfont.png

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:

4,1,3,5,4,5,5,1,2,2,3,3,2,3,1,5,4,2,4,4,4,4,4,4,4,4,1,1,3,3,3,4,5,4,4,3,4,3,3,4,4,3,4,4,3,5,4,4,4,4,4,4,3,4,4,5,4,4,3,2,5,2,3,4,2,4,4,3,4,4,3,4,4,1,2,4,1,5,4,4,4,4,3,4,3,4,4,5,3,4,4,3,1,3,4

My guess is, it's different on WindowsRT.

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 :
72,4,29,4,11,3,24,4,17,3,4,24,4,4,4,13,4,5,4,4,6,5,11,2,13,4,4,3,11,7,22,4,3,13,4,5,3,4,19


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

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:
http://phoboslab.org/crap/testfont-p2.png

Hey Dominic, this font works perfectly on IE10 RT!
http://phoboslab.org/crap/testfont-p2.png

The other fonts I use in my game are :
875x20
4652X140
2234X66
337X33
875X20

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?

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;

with

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.

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.

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.

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.

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?