info needed for image scaling, keep it sharp, photoshop nearest neighbor (hard edges)

[gcmartijn]

H!,

I want to know if there is a program or script that can convert my images (480x180) so it is scalable in the game.
So the image don't get blurry, but will stay the same.

What I mean by that is, that the game is now using nearest neighbor scaling (that is the name inside photoshop).
So the image need to support that kind of scaling without losing the sharpness.

Or is this not possible, and does an artist create the whole image into a pixel art perfect image, so it can scale?

For example, I did found this image, https://github.com/grumpygamer/DeloresD ... /Diner.psd
I guess when I use that one, that I don't get the smooth/blurry image when the image is scaled to a higher resolution.
But is that a special drawing technique ? And if so, is there a converter to convert the current images into that technique ?

Thanks for the info,
GCMartijn

[GVovkiv]

H!,

I want to know if there is a program or script that can convert my images (480x180) so it is scalable in the game.
So the image don't get blurry, but will stay the same.

What I mean by that is, that the game is now using nearest neighbor scaling (that is the name inside photoshop).
So the image need to support that kind of scaling without losing the sharpness.

Or is this not possible, and does an artist create the whole image into a pixel art perfect image, so it can scale?

For example, I did found this image, https://github.com/grumpygamer/DeloresD ... /Diner.psd
I guess when I use that one, that I don't get the smooth/blurry image when the image is scaled to a higher resolution.
But is that a special drawing technique ? And if so, is there a converter to convert the current images into that technique ?

Thanks for the info,
GCMartijn

Aren't there like 2 ways to do so:
1. Use vector graphics (maybe some library that can convert svg *image* to love draw calls?) (which is not really apply to pixel graphics)
2. Scale images in integer way, such as 1, 2, 3, etc

Maybe it will be good idea to draw every sprite for some specific mostly used resolutions (such as 16x9) and then add option/automatic to scale for x1, x2, x3? Maybe use something like https://github.com/Ulydev/push for this (with side effect, that if push can't achieve integer scaling, it will use nearest (floor? or ceil? i don't remember) integer number, which result in black bars on top/bottom and left/right, and if resolution of game is 1 to 1 with window size, then there will be no black bars at all)

[BrotSagtMist]

Uhhhhh wildguess here:
are you talking about vector images? These are not made with pixel but contain a describtion of what they should look like, so the end results has infinitive resolution.

[gcmartijn]

No I don't want to use vector images, there is to much detail.

I use this for the canvas
viewtopic.php?f=3&t=92669

Code: Select all

self.canvas = {}
self.canvas.width = 320
self.canvas.height = 180
self.canvas.integerScaling = true
self.canvas.subpixels = 4

Here you se a in game image:

Screenshot 2022-12-26 at 17.59.09.png (1.21 MiB) Viewed 2666 times

I draw the grey stones in photoshop, and they will render oke inside the game, and when I resize the window, you can see that the stones are correctly scale and don't get blurry.
In the foreground I draw a three, that one is scaling the correct way.

But in the background (and ground) I did add a image that I don't made, to test something.
And there you can see what goes wrong, that image is blurry when scaling.
I need something to convert pictures like that into the the 'styling' like the stones. Without losing too much detail.

But I don't know how you name that, so I can't search for help
Is it called 8bit? but with 256 colours for example?

I guess those images are correctly draw, so it will scale perfectly:

- https://asset.vg247.com/adventure4.png/ ... nture4.png
- https://cdn.nivoli.com/adventuregamers/ ... _large.jpg
- https://1.bp.blogspot.com/-_tBEBxQ9Xbs/ ... n0Nblp.png

[gcmartijn]

I did choose to do the first work by hand in photoshop, and a pixel perfect artist need to finetune it later.

Here you can see what I did in photoshop, the left side is scale perfectly to each resolution.
The right side is creating blurry edges.

I did not found the tool that can do this for me.

Screenshot 2022-12-27 at 20.13.36.png (76.37 KiB) Viewed 2602 times

[Andlac028]

So you want to reduce number of colors in image (or index it or how it is called), maybe try something like this? (Just quick search)

[dusoft]

See this library and its pixel perfect mode:
viewtopic.php?f=5&t=92494&start=20

[GVovkiv]

See this library and its pixel perfect mode:
viewtopic.php?f=5&t=92494&start=20

Huh, who is this handsome guy, who wrote this library?

But jokes aside, pixel perfect scaling in my library was achieved via integer scaling, as in mentioned post viewtopic.php?f=3&t=92669. There also was examples using subpixel sheningans to achieve more clear pixel scaling with maintening aspect ratio (instead of integer scaling) but i can still see "bleeding" pixels here and there, so i personally can't consider this as good scaling solution for truly pixel perfect scaling. Only integer, only hardcore! (And black lines on top/left/right/bottom sides...)

[zorg]

What I mean by that is, that the game is now using nearest neighbor scaling (that is the name inside photoshop).
So the image need to support that kind of scaling without losing the sharpness.

I'm sometimes amazed how no one actually suggests the most obvious things first:
https://love2d.org/wiki/love.graphics.setDefaultFilter
https://love2d.org/wiki/Texture:setFilter
Setting one of these to nearest will make your images be nearest-neighbor interpolated in-game as well, instead of using linear which blurs pixels.

[GVovkiv]

I'm sometimes amazed how no one actually suggests the most obvious things first:
https://love2d.org/wiki/love.graphics.setDefaultFilter
https://love2d.org/wiki/Texture:setFilter
Setting one of these to nearest will make your images be nearest-neighbor interpolated in-game as well, instead of using linear which blurs pixels.

Probably because author didn't showed full code of what they trying to achieve, and in mentioned by them post example project actually use nearest filter and explain why. So probably everyone assume that op is already use nearest filter. Well, at least i guess at this way, lol.

Upd: here piece of code that do nearest be default from post .love example:

Code: Select all

function love.load()
	love.graphics.setDefaultFilter("nearest", "nearest")
	theGameWorld = love.graphics.newImage("superMetroid.png")
	createCanvas("nearest", 1)
end

And:

Code: Select all

function love.keypressed(key)
	if key == "1" then
		-- Sharpest pixels, but pixels will likely be different sizes.
		createCanvas("nearest", 1)

	elseif key == "2" then
		-- Linear filter with no subpixels will usually result in ugly blur.
		createCanvas("linear", 1)