[Solved] Canvas upscaling without losing quality

[Ale32bit]

Hello guys,
this is my first time posting here and I hope I'll receive the help I now need:

I'm writing a simple RPG engine which has tiny textures for everything and to fill the window I used love.graphics.scale(4), but by doing this the font messes up badly so I decided to draw the map in a canvas which it upscales so the fonts and other graphic objects won't look awful and overflow from the window.

Now the problem is the canvas, by upscaling it loses quality:



This how it's supposed to look:



Another problem with the canvas is that it's laggy, I don't have this problem with love.graphics.scale

I hope some of you will help me.

Thanks

[ivan]

That's one of the benefits of using a canvas, it allows you to limit the resolution and get that "pixelated" look.
One option is not to use canvases at all (doesn't matter if things overflow).
Another thing you could try is canvas:setFilter("nearest", "nearest")

[Ale32bit]

That's one of the benefits of using a canvas, it allows you to limit the resolution and get that "pixelated" look.
One option is not to use canvases at all (doesn't matter if things overflow).
Another thing you could try is canvas:setFilter("nearest", "nearest")

I alredy tried canvas:setFilter("nearest", "nearest"), it doesn't help sadly

[pgimeno]

If you want thin lines and thick pixels, you can't draw the lines to the canvas, you have to draw them directly to the screen.

See also here: viewtopic.php?p=199019#p199019

[Ale32bit]

If you want thin lines and thick pixels, you can't draw the lines to the canvas, you have to draw them directly to the screen.

See also here: viewtopic.php?p=199019#p199019

The lines are only for Hitbox debug, they normally shouldn't be there in production, so just ignore them

[pgimeno]

Well, with the lines in the middle it's more difficult to see the issue, but it looks like you're drawing the pictures to fractional coordinates. The link I posted also applies to textures/sprites.

Perhaps you need to set your sprites to nearest/nearest as well, not just the canvas.

[Ale32bit]

I found a solution that completely fixed my problem:

First I removed all canvases in my code, scaled up the part where it draws the game map and scaled down back after drawing the map, right before the text.

For example:

Code: Select all

love.graphics.scale(4) -- Scale up 4x
-- draw map, entities and more stuff here

love.graphics.scale(1/4) -- Scale down 4x back to normal
-- draw anything else

Result:
https://i.ale32bit.me/307tN.png

I want to thank anyone who tried helping me