Page 1 of 1

[Solved] Canvas upscaling without losing quality

Posted: Sun Apr 22, 2018 6:10 pm
by 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:

Image

This how it's supposed to look:

Image

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

Re: Canvas upscaling without losing quality

Posted: Sun Apr 22, 2018 6:45 pm
by 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")

Re: Canvas upscaling without losing quality

Posted: Sun Apr 22, 2018 7:00 pm
by Ale32bit
ivan wrote: Sun Apr 22, 2018 6:45 pm 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

Re: Canvas upscaling without losing quality

Posted: Sun Apr 22, 2018 7:43 pm
by 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

Re: Canvas upscaling without losing quality

Posted: Sun Apr 22, 2018 7:45 pm
by Ale32bit
pgimeno wrote: Sun Apr 22, 2018 7:43 pm 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

Re: Canvas upscaling without losing quality

Posted: Sun Apr 22, 2018 7:48 pm
by 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.

Re: Canvas upscaling without losing quality

Posted: Mon Apr 23, 2018 7:37 am
by 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