Low resolution text


#1

I am making a game in the low resolution of 256x192 (ZX Spectrum res) and I am having trouble with text displaying my money on screen. (Seen here with the C:4)

It seems that, although I can turn off smoothing for sprites, there is no way to do so for text and with a font that needs to be 8x8 pixels max, this causes an issue with scaling and the anti-aliasing of the text displayed on screen.

Screenshot%20(239)

It is readable, but because it isn’t pixel perfect it does not fit in with the look and feel of the game, as I am going for a ZX Spectrum look, with only the Spectrum’s 15 system colors and the anti-aliased font looks out of place, as it clearly uses more colors and isn’t as crisp.

Is there any way to turn off font smoothing?

Or failing that is there a ways that I can convert the score variable into single digits, starting from 00001 to 99999?

This way I may be able to convert each of these digits into a corresponding sprite animation for each number to be displayed…

It’s just a thought, but I am tearing my hair out thinking of a solution which will not compromise the look of the game and so far I am unable to come up with anything, any ideas out there?


#2

The first screen was at native resolution so it’s hard to see what I mean, but you can see more clearly here in full screen…


#3

I think the upcoming Bitmap Text Object will do just that.


#4

Have you tried a different font? That looks the same?


#5

That sounds just the ticket… Thanks for the heads up! :nerd_face::+1:


#6

I’ve tried several fonts without any luck, all fonts do the same thing.

Don’t get me wrong, it wouldn’t be too noticeable in a 16bit or newer resolutions (320x240 or higher), but in 8bit, especially with strict color restrictions it is very hard to miss!

However, it seems that a fix may be in the pipeline with the ‘Bitmap Text’ object… I shall have to wait and see it that holds the answer!


#7

While we wait for the Bitmap Text feature, here’s what I did as a workaround. I just made my 384x216 game 5 times larger (making it 1920x1080). All the pixel artwork scaled nicely without aliasing. This helps on many screens by making the text not so blurry since it’s not being scaled up as much (though a trained eye can still see it).

People have also had success in having the text at a very large size, and then scaling it down. For example, if you want the text to be 12pt, you could have it be 24pt and then scale the text object down to .5 size.

Additionally, I found a font that was “pixel perfect” (its called "PixelEmulator), and only use it in multiples of the size it was designed originally at (which, IIRC, for this font is 10px).

Or…you could just wait for the Bitmap Text feature. :slight_smile: But in the meantime if you care enough to play around with this, these workarounds might help.


#8

Beanmatt’s solution will work well, although it does mean you’ll spend a lot of time scaling.

Your other option is to do the advanced math I did in my GUI Layer proposal. This makes your UI be at the “higher” resolution, but lets your assets stay at their native resolution: Implement "GUI Layer" based Scaling Options to better scale text and other objects