Disable Text Smoothing?

[dhj]

Hello,

 

I find that small text (12px) looks very blurry when used in Phaser, I do know I can disable smoothing for the whole state but that then spoils the image tweens. I noticed that Sprite had a smoothing property, but this doesn's seem to be followed if the game state has had smoothing disabled.

 

So the idea I had of just disabling all smoothing, then re-enabling it where it's needed is out the window, so with that in mind, how do you all go about getting nice sharp text in your games? The example text here is 12px Arial.

 

Many thanks

[JUL]

You should use this instead http://examples.phaser.io/_site/view_full.html?d=text&f=retro+font+1.js&t=retro%20font%201

 

 

And about smoothing you can disable it by passing the antialias parameter to false, http://docs.phaser.io/Phaser.Game.html

But for some odd reason I get better results with adding this to my css file

 

   image-rendering: optimizeSpeed;
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;

 

 

However some browsers such as chrome can't disable smoothing, at all.

[dhj]

Thanks JUL,

 

The CSS method I have tried but as you mentioned doesn't seem to help in chrome. The idea of using an image for a large area of text (a few paragraphs) doesn't feel very elegant – are there any other options worth exploring?

[JUL]

No it's not an image, as in ordinary static image where text can't be edited.

It's real bitmap fonts.

 

It's the real deal when it comes to bitmap based games.

 

 

Beside, you can hardly obtain such graphic quality with ordinary fonts.

 

 

https://raw.githubusercontent.com/photonstorm/phaser-examples/master/examples/assets/fonts/retroFonts/KNIGHT3.png

 

It's 12 ko.

 

 

http://www.1001freefonts.com/opensticks.font

 

This, is 254 ko once out of its zip.

 

 

so in the end, if it comes to "embedding" custom fonts...

 

But you can still choose to use arial... Or any random default font.

 

...

 

Then it becomes a matter of taste I guess.

 

 

But still.

When you consider your game might get stretched for fullscreen, what will you get ?

 

The bitmaps will get blured/start to pixelate while the vector font will remain "clean" ?

 

I don't think you want that kind of heterogeneity.

[dhj]

Hi,

 

I created a bitmap font of Arial, and I use it at 14px and it is still very blurry, I also tried toggling the smoothing. That combined with the lack of wordwrap for bitmap text makes it feel like its still not suitable for larger areas of text. It's four pages of game instructions/legal information I want to render, each page is 3 paragraphs.

 

Any other ideas?

[chg]

Smoothing will only kick in if a bitmap's pixels are not aligned to the pixel grid - if you display the character's without scaling and make sure they are placed at integer coordinates I don't think you should introduce any blurring beyond what might already be in the image.

 

That said, dear god, please don't render pages of instructions and legal info on the canvas, that is a horrible thing to do to your end users. I feel that legal info esp. should be copy and paste-able and should be reasonably compatible with accessibility features even if the game is not (yes for example their are lawyers that are dependant on screen reader software).