I wrote some code to change my game's scale when the window is resized, and used "nearest" filter mode.
Though, depending on how the window is resized, pixels appear to have irregular dimensions :
The same image at 3 different scales. Notice how the 2 eyes don't get the same width
More than scaling, I also change drawing offset and width/height to match it, but I don't think that's very pertinent...
Without "nearest" mode, it looks just fine on any scale, so I guess it's all about that filter...
So what would be the reason why "nearest" filter mode displays irregular pixel sizes?
Thank you!
[Solved] Pixels dimensions not constant with setFilter("nearest","nearest")
Forum rules
Before you make a thread asking for help, read this.
Before you make a thread asking for help, read this.
[Solved] Pixels dimensions not constant with setFilter("nearest","nearest")
Last edited by Eglaios on Tue Sep 07, 2021 2:31 am, edited 1 time in total.
Currently working on game music...
Re: Pixels dimensions not constant with setFilter("nearest","nearest")
If you scale e.g. a 3x3 image to 4x3 with nearest neighbour, how do you expect it to look like?
Not sure what you'd expect, but personally I'd expect that one of the pixel columns gets duplicated, and that pixel column will look twice as wide as the others.
If I scale it to 8x3 instead, since 8/3 is 2.6666..., I'd expect to have two pixel columns with size 3 pixels wide and one pixel column with size 2 pixels, for a total size of 3+2+3 = 8 which is the target horizontal size.
And so on. If the final size is not a multiple of the original one, you'll get columns of different widths. If you don't want that to happen, you must use integer scale factors.
Not sure what you'd expect, but personally I'd expect that one of the pixel columns gets duplicated, and that pixel column will look twice as wide as the others.
If I scale it to 8x3 instead, since 8/3 is 2.6666..., I'd expect to have two pixel columns with size 3 pixels wide and one pixel column with size 2 pixels, for a total size of 3+2+3 = 8 which is the target horizontal size.
And so on. If the final size is not a multiple of the original one, you'll get columns of different widths. If you don't want that to happen, you must use integer scale factors.
Re: Pixels dimensions not constant with setFilter("nearest","nearest")
Just round the scale factor to the nearest or use antialiasing, not perfect pixels.
Re: Pixels dimensions not constant with setFilter("nearest","nearest")
The scale is always set as "width = lenght"
Of course, I keep the same ratio no matter how the window is resized : The whole thing is displayed through Canvas with variable width/height, and centered, and the remaining areas stays black so there's no problem for fullscreen (I guess)
Like that :
I'll try to floor a bit everything to see if that fixes it...
Currently working on game music...
Re: Pixels dimensions not constant with setFilter("nearest","nearest")
There's one way that might work. Draw to a canvas with nearest neighbour using this scale:
floor(target resolution / original resolution)
That should get you uniform pixels. Then draw the canvas to the screen with a linear filter, using this scale:
target resolution / original resolution / integer scale calculated above
That will blur only a one pixel thin line around each pixel, which will hopefully look sharpish enough. Picture and PoC attached.
floor(target resolution / original resolution)
That should get you uniform pixels. Then draw the canvas to the screen with a linear filter, using this scale:
target resolution / original resolution / integer scale calculated above
That will blur only a one pixel thin line around each pixel, which will hopefully look sharpish enough. Picture and PoC attached.
- Attachments
-
- scaleDemo.love
- (1.23 KiB) Downloaded 143 times
Re: Pixels dimensions not constant with setFilter("nearest","nearest")
This is much appreciated and I [kinda] understand better (distinguish which element has to be scaled using which scale hurts a bit, and I discovered canvas on this same project)...
As I said in another post, I am rendering my stuff through Simple Tiled Implementation (tilemap renderer).
I modified the code to match what you shown, but I still have an issue :
(At least, tiles are fixed, that's good! Thank you!)
So as you can see, everything but the hero are getting drawn just fine...
The tiles are part of the tileset, already in the .lua map file, and are spread on different layers.
For the hero sprite, I create a custom layer in load(), in main.lua.
Then, every layer is put on a canvas, then drawn on screen from Map:draw(), in assets/lib/sti/init.
Would there be anything I missed in the hero layer, or is it something else that screws it up?
(Sorry to ask you to look in this... hope it is'nt that messy...)
Thank you again!
- Attachments
-
- Tilemap.love
- (38 KiB) Downloaded 147 times
Currently working on game music...
Re: Pixels dimensions not constant with setFilter("nearest","nearest")
Well... Big brain me happened to forgot to set the hero's sprite setFilter to "nearest"...
...And it works! Thank you all for your support, I'm kind of impressed of the help I could get over there!
(And I hope I won't abuse of it)
...And it works! Thank you all for your support, I'm kind of impressed of the help I could get over there!
(And I hope I won't abuse of it)
Currently working on game music...
Who is online
Users browsing this forum: Bing [Bot], glass2d, MrFariator, Semrush [Bot] and 87 guests