Jump to content

Disable Text Smoothing?


Recommended Posts



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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.





It's 12 ko.





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.

Link to comment
Share on other sites



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?

Link to comment
Share on other sites

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).

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...