Scaling without blurring

[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:


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).



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

[ivan]

Sorry, this may be a very simple answer.

I'm afraid not.

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.

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!

[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)

[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.

[bakpakin]

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.

[Nixola]

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

[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

[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

[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.

[Pierpo]

Alright. Thanks a lot