[solved] example request , canvas scale - camera - pixel perfect - simplified

[gcmartijn]

Hi,

At the moment I use https://github.com/a327ex/STALKER-X but I do think it is overkill and it's not doing what I want.
So I removed it try to make it more simple.

What I do is making the pixel 'art' in Photoshop with a minimal height 180px the width is dynamic , for now I use 480px.

Now I do this, and scaling is working.
But what todo when there are 'weird' resolutions ?, I guess to center the canvas when the height don't fit exactly ?
I don't allow portrait mode in the final game version, I guess I don't allow mobile phones either. Or in other words I think that I work/test with minimal 720px height. Maybe that is not a correct minimal height, I don't know

But is this a good starting point ?
I push the scaleCanvas variable to the mouseXY, and probably need to do this in other places.

If this is correct, than I can try following the player to the left / right.

config.lua

Code: Select all

    t.window.width = 800 -- The window width (number)
    t.window.height = 720 -- The window height (number)
    t.window.minwidth = 800 -- Minimum window width if the window is resizable (number)
    t.window.minheight = 720 -- Minimum window height if the window is resizable (number)

Code: Select all

love.graphics.setDefaultFilter("nearest", "nearest")
love.graphics.setLineStyle("rough")
    
scaleCanvas = 720px / 180px (min height photoshop drawing) = 4

function love.draw()
	love.graphics.setCanvas(self.canvas)
	love.graphics.clear()
	
	// draw everthing
	
	love.graphics.setCanvas()
	love.graphics.draw(self.canvas, 0, 0, 0, scaleCanvas, scaleCanvas)
end

function love.mousepressed(ox, oy, button, istouch, presses)
	self.world:mousePressedEvent({
				x = math.floor(x/scaleCanvas),
				y = math.floor(y/scaleCanvas),
				button = button,
				istouch = istouch,
				presses = presses,
				ox = ox - self:getCanvasX(),
				oy = oy - self:getCanvasY()
	})
end

[GVovkiv]

You want to make scalable for any resolution?
like, 1280x720 game for 1024x600 window?

Code: Select all

    t.window.width = 800 -- The window width (number)
    t.window.height = 720 -- The window height (number)
    t.window.minwidth = 800 -- Minimum window width if the window is resizable (number)
    t.window.minheight = 720 -- Minimum window height if the window is resizable (number)

And can we please do not do that?
Maybe it's just me, but i really tired of games/programs that uses minimal window size
It's just awful and really suck, especially with tiling window managers or just on small screen
meh

And if you want "pixel pefrect'..
Maybe you need to add in-game opt for ui and camera scaling?
Because i don't really sure that you can make pixel perfect scaling with non-integer scaling factor
Only 100%, 200%, 300% scaling
Maybe something like Pixel Dungeon?
There you can scale ui with slider, and it uses proper 100%-ish scaling, so it doesn't look non pixel perfect
Same for in-game scaling

[ReFreezed]

"Pixel perfect" rendering doesn't always look good. Instead of requiring a specific resolution, just scale the game canvas to fit the whole window dynamically (and allow window resizing, including fullscreen). To make the pixel art to look good at any resolution there are different things you can do. (See the attachment for an example.)

[gcmartijn]

Why is everything so difficult haha.

@ReFreezed
I did try some things with your example, and compare it with the Photoshop scaling (Nearest Neighbor (hard edges).
And I thing i'm going to use option 1 (no subpixels, nearest filter) and integer scaling off.
option 2,3 is blurry (linear filter) . option 4 is blurry when using with integer scaling off.

I do want hard edges.
For most drawings i do math.floor(x) and math.floor(y)

@GVovkiv

Maybe it's just me, but i really tired of games/programs that uses minimal window size

But there really is a minimal size that this game going to work.

At the moment I don't know if I'm going to scale the UI with the game, I can do that but again, there will be a point that the UI is not usable when the screen is to small.

When I read both answers, it's not weird to change the mouse x and y with the scaling factor.
Going to test some things then, and try to implement a very easy camera follow player left/right (like an adventure game).

Thanks for the info.

[GVovkiv]

At the moment I don't know if I'm going to scale the UI with the game, I can do that but again, there will be a point that the UI is not usable when the screen is to small.

It's not very valid reason to restrict window resizing
If user want to, then allow them to resize window as they want
If they don't, then they will not resize it to this sizes, it's not like they forced to do so
So don't do that, that annoying
(also just saying, https://github.com/Vovkiv/resolution_solution might help add to project scaling, haha
It doesn't fix your "pixel-perfect" problem, but still will be interesting to play around with that)

[darkfrei]

For the pixel perfect you can use the internal window size 320x180 and by multiplying get resolutions
1x 320x180
2x 640x360
4x 1280x720
6x 1920x1080 (fullHD)
12x 3840x2160 (4K)

For my opinion, the user can scale the window without limitations (but limited on 320x180), and you can calculate the pixel perfect scale factor, but adding some black borders when needed.

[gcmartijn]

@darkfrei
That was the idea, the user can maybe select a resolution if they want.
And if they have a 'weird' resolution, then I add black borders.

I'm using a laptop that is using 1440 x 900 (height 180 * 5), because the game will get a dynamic width and a static height.
I guess i'm going to use the users window height to calculate the scale factor.

@GVovkiv
Going to have a look at your resolution solution project.

It is the first time I work this this pixel art scaling, a whole new world

Thanks for the info

[gcmartijn]

Is it better to use this in my case? Don't know what it does exactly.

Code: Select all

    t.window.usedpiscale = false -- Enable automatic DPI scaling (boolean)
    t.window.highdpi = false -- Enable high-dpi mode for the window on a Retina display (boolean)

[darkfrei]

Is it better to use this in my case? Don't know what it does exactly.

Code: Select all

    t.window.usedpiscale = false -- Enable automatic DPI scaling (boolean)
    t.window.highdpi = false -- Enable high-dpi mode for the window on a Retina display (boolean)

I think that it has no effect by upscaled canvases.

[gcmartijn]

"Pixel perfect" rendering doesn't always look good. Instead of requiring a specific resolution, just scale the game canvas to fit the whole window dynamically (and allow window resizing, including fullscreen). To make the pixel art to look good at any resolution there are different things you can do. (See the attachment for an example.)

Oke, I see a 'error' now when using font scaling (.fnt) and how to fix it using the 'correct' variables.
Maybe other people can use this example.

I use this pixel font
https://fonts.google.com/specimen/Press+Start+2P

Code: Select all

    local font = love.graphics.newFont("font/press-start-2p-8-white.fnt")
    font:setFilter("nearest", "nearest")
    love.graphics.setFont(font)
    
 
function love.draw()
   ...
    -- Render sprites. (Here we're just using a screenshot as a substitute.)
    love.graphics.draw(theGameWorld)

    love.graphics.print("Incorrect text size", 100, 200)

    love.graphics.scale(0.50) -- don't work, makes it blurry when using canvasSubpixels = 1
    love.graphics.print("This makes the text blurry", 100, 200)

    love.graphics.pop()
    ...
 
    love.graphics.clear(0, 0, 0)
    love.graphics.draw(canvas, canvasX, canvasY, 0, canvasScale)

    love.graphics.print("Correct sharp text, and size", 100, 200)
 end

Code: Select all

canvasSubpixels = 1
integerScaling = true

Screenshot 2022-03-03 at 08.29.13.png (58.38 KiB) Viewed 7973 times

This is the correct way to scale text down.

Code: Select all

canvasSubpixels = 4
integerScaling = true
 love.graphics.scale(0.50)  -- this works

Screenshot 2022-03-03 at 08.37.53.png (51.62 KiB) Viewed 7973 times

This give a little glitch when scaling text.

Code: Select all

canvasSubpixels = 4
integerScaling = false

Screenshot 2022-03-03 at 08.35.01.png (61.76 KiB) Viewed 7973 times