Abhishek Singhal Posted March 21, 2017 Share Posted March 21, 2017 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. After restoring screen from fullscreen mode. Default screen on initial load. Link to comment Share on other sites More sharing options...
XekeDeath Posted March 21, 2017 Share Posted March 21, 2017 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..? Link to comment Share on other sites More sharing options...
Abhishek Singhal Posted March 23, 2017 Author Share Posted March 23, 2017 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 More sharing options...
XekeDeath Posted April 4, 2017 Share Posted April 4, 2017 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... Abhishek Singhal 1 Link to comment Share on other sites More sharing options...
Abhishek Singhal Posted April 13, 2017 Author Share Posted April 13, 2017 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 More sharing options...
.thumb.jpg.b1c2ddaa8a73240c3ab6e835f8c5cbe0.jpg)
Recommended Posts