I’m making a pixel game with 320x240 screen resolution. But I’m having a problem with displaying fonts.
It works perfectly on Flash target…
…but HTML5 one looks awful!
Is there a way to improve text readability without changing the resolution?
I found this not sure if it helps: [HTML5] Blurry font problem
Could you please try setting the
textField.antiAliasTypetoAntiAliasType.ADVANCEDandtextField.sharpnessto400?
Maybe you can use bitmap text / a tilemap to display the glyphs and disable smoothing?
The entire image is a bit blurry in the HTML5 screenshot, not just the text. My guess is that your app is resizing in HTML5. You might get better results if you set <window resizeable="false" if="html5"/> in your project XML.
1 Like
I used image-rendering: pixelated property in CSS. This blur is a screenshot’s issue, not the game’s one.
AntiAliasType didn’t work, but I found your tilemap font idea pretty good. Thank you!
1 Like
Why not render your game at 640 x 480, and just double all the other pixels in X and Y, and then your text won’t be so bad. HTML 5 is either going to render SVG or if you are using Canvas, then it will be an actual bitmap area being rendered, and no amount of fiddling with flags will make text look good. In canvas animation you have to have enough pixels to get the job done. you might consider tripling pixels, which would make your canvas 3203 x 2403 which is more desktop sized anyway, more fun.