Page 1 of 2

Scaling without blurring

Posted: Sun Aug 09, 2015 3:47 pm
by Pierpo
Hi,

I am a beginner with LÖVE (and game programming in general), and I face an issue that I still cannot solve.

The problem is really simple.
I have a little pixel-art image of size 32x32 that I'd like to draw on my game. The problem is that this size is way too small: I need to make it bigger.

To do so, I simply used the 'sx' parameter of the 'love.graphics.draw function'.
The problem is that my image becomes blurred... And I don't know to solve this. I had a look at other people's code and I didn't notice anything particular.

Sorry, this may be a very simple answer.

Here is the code (almost useless to mention):

Code: Select all

function love.load(arg)
	cloud = love.graphics.newImage('cloud.png')
end

function love.update(dt)
end

function love.draw(dt)
	love.graphics.draw(cloud, 200, 200, 0, 4)
end
Here is the cloud.png image:
Image

And here is my result. You can notice a contour as well, which I do not want either (it may be a consequence of the blurring).
Image


Thanks a lot :)
By the way, I'd like to add that LÖVE looks really amazing and is really motivating. Everything looks so simple :)

Re: Scaling without blurring

Posted: Sun Aug 09, 2015 4:31 pm
by ivan
Sorry, this may be a very simple answer.
I'm afraid not.
Pierpo wrote:The problem is that my image becomes blurred... And I don't know to solve this. I had a look at other people's code and I didn't notice anything particular.
This is related to multi-sampling I believe.
You have to look at the lua documentation to make sure though (specifically conf.lua).
Note that when you scale pixel art it has to be done in powers of 2, otherwise it will not look good.
Pierpo wrote:And here is my result. You can notice a contour as well, which I do not want either (it may be a consequence of the blurring).
The white outline is caused by mip-mapping I believe.
It can be removed when saving your image.
Personally I use PNG with indexed colors.
When you save the image, look for an option that specifies the "mat color" of the image.
In Photoshop this is under:
file->save for web->matte color
or
image->mode->indexed color->matte
The default "matte color" is white but in your case you want to set the matte color to black since your picture already has a black outline.

PS. Oh yea, and welcome to the forums!

Re: Scaling without blurring

Posted: Sun Aug 09, 2015 4:37 pm
by Nixola
While the second answer is correct, the first issue is actually related to the default scaling filter, which you can change with [wiki]love.graphics.setDefaultFilter[/wiki]. If you don't want that for every texture in the game, you can set the filter with [wiki](Image):setFilter[/wiki] or [wiki]Canvas:setFilter[/wiki].
EDIT: Setting both scalings to nearest should actually solve the second issue too, even though the correct way to solve it is still ivan's method. Nearest scaling only prevents it from showing up (which, in graphics, is kinda like solving it anyway)

Re: Scaling without blurring

Posted: Sun Aug 09, 2015 4:38 pm
by Ulydev
I'm not sure, but maybe

Code: Select all

love.graphics.setDefaultFilter( "nearest" )
could do it.


https://love2d.org/wiki/FilterMode

EDIT : Got ninja'd. :ehem:

Re: Scaling without blurring

Posted: Sun Aug 09, 2015 5:12 pm
by bakpakin
ivan wrote: Note that when you scale pixel art it has to be done in powers of 2, otherwise it will not look good.
I thought pixel art would scale well with any integer scale factor.

Re: Scaling without blurring

Posted: Sun Aug 09, 2015 5:22 pm
by Nixola
bakpakin wrote:
ivan wrote: Note that when you scale pixel art it has to be done in powers of 2, otherwise it will not look good.
I thought pixel art would scale well with any integer scale factor.
This is true as well, I forgot to say it in my post

Re: Scaling without blurring

Posted: Sun Aug 09, 2015 6:48 pm
by ivan
Yes, you're both correct.
I meant scaling as in increasing OR decreasing the scale
For example:
increasing the scale by *3 is fine
but
reducing the scale by *1/3 may not look good
That's why I prefer to stick to ^2 when it comes to pixel art

Re: Scaling without blurring

Posted: Mon Aug 10, 2015 1:11 am
by Pierpo
Thank you all for your quick answers :)
Indeed, changing the filter solved both problems (the blurring and the contour)!

Do you think I should still check the multi-sampling and the mip-mapping things?
Is this really the better way to solve this?

Thanks again :)

Re: Scaling without blurring

Posted: Mon Aug 10, 2015 1:16 am
by Nixola
Multisampling and mipmapping should both be unnecessary when dealing with nearest-scaled pixel art.
Nearest scaling is the correct, and only that I know of, approach.

Re: Scaling without blurring

Posted: Mon Aug 10, 2015 12:27 pm
by Pierpo
Alright. Thanks a lot :)