Legomite Posted August 2, 2017 Share Posted August 2, 2017 I have text that needs to be very crisp. It's pixelated text so I disabled autoRound and smoothed. It's clearer, but why is the width stretched? Instead of the square pixels being square, it's rectangle. Also, it's not extremely crisp. I have to increase the resolution to 2 to get it as good looking as the HTML element. Can someone help? (If you look close at "S" you can see the pixels as rectangles and how they overlap each other's corners instead of adhering to the grid) Link to comment Share on other sites More sharing options...
lloydevans Posted August 2, 2017 Share Posted August 2, 2017 Might of been a typo, but you'd want to enable "autoRound" not disable it. Link to comment Share on other sites More sharing options...
lloydevans Posted August 2, 2017 Share Posted August 2, 2017 It's a complex thing to explain but you are using a vector font which pretends to be made up of low resolution pixels. Phaser interpolates pixels when rendering those vectors because the vast majority of fonts want that to look smooth. Your font with a given font size may tell phaser that one of the squares in the grid is say 15.4 pixels in size which results in interpolated values. Link to comment Share on other sites More sharing options...
Legomite Posted August 2, 2017 Author Share Posted August 2, 2017 51 minutes ago, lloydevans said: It's a complex thing to explain but you are using a vector font which pretends to be made up of low resolution pixels. Phaser interpolates pixels when rendering those vectors because the vast majority of fonts want that to look smooth. Your font with a given font size may tell phaser that one of the squares in the grid is say 15.4 pixels in size which results in interpolated values. Just a hunch, but try setting your font size in px as a multiple of the character grid height which is 7. Still likely to get some interpolation but the edges should get a bit crispier. Is there a way to stop this? I tried 203px, it still looks weird... Link to comment Share on other sites More sharing options...
lloydevans Posted August 2, 2017 Share Posted August 2, 2017 I meant to say a power of grid height, and it's not really a solution anyway. Actually increasing the resolution as you did seems like one fairly reasonable way to solve it. No reason you can't increase it even further. Edit - just be wary of potential performance implications of re-rendering that text as high resolution bitmap data from the font file. Pretty sure you can do something along the lines of cacheAsBitmap in Pixi to get around it. My explanation isn't very good but I'm trying to tell you why it's happening which can inform you to find a solution. Link to comment Share on other sites More sharing options...
lloydevans Posted August 2, 2017 Share Posted August 2, 2017 You also need to think about other places that interpolation and scaling may come from. The app resolution, the device pixel ratio, the font size, the font resolution. It's a big ol' kettle of fish and there is no shortage of past forum posts and references talking about this subject. Bitmap fonts are commonly used for these retro pixel art fonts with roundedPixels enabled. Link to comment Share on other sites More sharing options...
Recommended Posts