How to render text at a higher resolution than the rest of the game?

[Neraskidiv]

I'm using a library called Push to upscale my game from a virtual resolution of 640x360 to my monitor's resolution of 1920x1080. The sprites look great but the text is too big because of the upscaling.
If I reduce the font size then the text gets messed up because it doesn't have enough pixels to properly render the letters.
Is there any way to render only the text at a higher resolution so that I can get the text to render crisp and sharp even when I make the font size smaller?
EDIT: I initially tried to attach two images here but it was showing only one so I'm adding an imgur link instead with both the images. https://love2d.org/imgmirrur/WKOWcYw.html

[sphyrth]

#1:
First, experiment if you're satisfied with filtering your font like this:

Code: Select all

font:setFilter('nearest', 'nearest')

#2:
If you're not satisfied, you can give your font some hinting when you're initializing it:

Code: Select all

-- Recommended Hinting A: Mono
font = love.graphics.newFont('whatever.ttf', 13, 'mono')

-- Recommended Hinting B: Light
font = love.graphics.newFont('whatever.ttf', 13, 'light')

You have to experiment #2 both with and without #1.

[hoistbypetard]

Another alternative is to render your text after you call push:finish().

Here's a little test program ripped out of a gadget I made a few weeks ago when I was trying to figure out how push worked. Maybe it'll help you too. I tweaked the sizes to match what you described. It runs full screen. Press esc to exit.

I wrote the code and you can use it however you want. I did not make the font or images. Images are from here.. Font is from here..

push_fonts.png (253.6 KiB) Viewed 7129 times

[Neraskidiv]

Hi sphyrth, thanks for the reply. I just added a link in my post above where you can see what exactly the problem is.
#1:
I tried adding the "nearest" filter but it made no difference because I was already using "nearest" as the default filter for everything.
#2:
When I add mono hinting the text is no longer blurred but it's still messed up.
https://love2d.org/imgmirrur/cSYM2T9.png

The problem is that if I set the font size to anything smaller than 8 then the letters get chopped off but because of the upscaling even a font size of 8 looks massive.

[Neraskidiv]

Hi hoistbypetard, I did consider rendering all the text at the end of the draw cycle after everything else is rendered and Push is turned off.

Let's say I have some character objects and each object renders a sprite and the character's name below it. Now when the objects are being rendered I'll have to render just the sprites without the names and maintain an array of all the names to be rendered and the co-ordinates at which they need to be rendered. Then after turning off Push I'll have to loop through the array and render all the text.

This will work for a simple example like this one but I'm afraid it'll become too complex and difficult to do for a whole game with plenty of UI and text everywhere.

[hoistbypetard]

For large amounts of text, I'd probably rather solve it differently.

That said, both of your scaled texts look much rougher than what I see... can you post the font you're using and the code where you load and draw the font? Maybe as a .love archive so we can see what's going on?

[sphyrth]

The last resort is to use a font that naturally has a small pixel height. Early Gameboy is an example. From what I can tell it's only 6 pixels high.

[Neraskidiv]

The font I'm using is called 04b03. I think I basically have two options:

1. Don't upscale the game but have multiple versions of the art assets already scaled up for different resolutions. This way I can render the game at the monitor's native resolution and will have no problem with the font.

2. Render the font separately like hoistbypetard said.

Neither of these options is ideal but I guess it's not that big of a deal. I'll go with one of these unless I can think of a better way. Thanks for your time guys.