Jump to content

Issue with Text rendering


Abhishek Singhal
 Share

Recommended Posts

Hi,

I am new to Phaser and trying to develop a game that includes some light weighted animations so that the game always covers the whole screen available. To achieve this I am using a background image larger then the canvas size and scaling down the game components to fit into the screen,

Initially i included some text inside these game components which was getting pixelated when scaling down the component by 50%, so I have decided to keep text elements out of the components and replacing them by lowering the font size. The issue seems resolved but when the game goes fullscreen and restored back to default size the text again is getting blurred.

Anybody ever encountered any such issue?

What could be the possible reason for this behavior. I am attaching the screenshot of the text in both the situation. Whenever the screen is resized, I destroy the current text element and redraw it using the new font-size.

blurryText.JPG  After restoring screen from fullscreen mode.

CrispText.JPG Default screen on initial load.

Link to comment
Share on other sites

On 3/21/2017 at 4:37 PM, XekeDeath said:

The only time I have come across blurry fonts is when they have a off-pixel position...
When you are redrawing the element, are you ensuring the text field it pixel aligned..?

Sorry, didn't understand.

What do we mean by pixel aligned text ?

Link to comment
Share on other sites

  • 2 weeks later...
  • 2 weeks later...
On 4/5/2017 at 4:55 AM, XekeDeath said:

Make sure the x and y values of the text are integer values... This aligns them to the pixel grid...
If either value is not an integer value, it won't be properly aligned, and the rendering will be blurry as it tries to be half way across a pixel...

Thank you Very much.
Suggestion was really helpful :)

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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