Jump to content

Disable Text Smoothing?


dhj
 Share

Recommended Posts

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

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

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.

Link to comment
Share on other sites

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?

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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