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

General discussion about LÖVE, Lua, game development, puns, and unicorns.
gcmartijn
Party member
Posts: 110
Joined: Sat Dec 28, 2019 6:35 pm

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

Post by 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
Last edited by gcmartijn on Wed Mar 30, 2022 8:45 am, edited 1 time in total.
User avatar
GVovkiv
Party member
Posts: 399
Joined: Fri Jan 15, 2021 7:29 am
Contact:

Re: example request , canvas scale - camera - pixel perfect - simplified

Post by 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
User avatar
ReFreezed
Party member
Posts: 575
Joined: Sun Oct 25, 2015 11:32 pm
Location: Sweden
Contact:

Re: example request , canvas scale - camera - pixel perfect - simplified

Post by 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.)
Attachments
PixelArtRendering.love
(11.18 KiB) Downloaded 133 times
Tools: Hot Particles, LuaPreprocess, InputField, (more) Games: Momento Temporis
"If each mistake being made is a new one, then progress is being made."
gcmartijn
Party member
Posts: 110
Joined: Sat Dec 28, 2019 6:35 pm

Re: example request , canvas scale - camera - pixel perfect - simplified

Post by 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.
User avatar
GVovkiv
Party member
Posts: 399
Joined: Fri Jan 15, 2021 7:29 am
Contact:

Re: example request , canvas scale - camera - pixel perfect - simplified

Post by 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)
User avatar
darkfrei
Party member
Posts: 732
Joined: Sat Feb 08, 2020 11:09 pm

Re: example request , canvas scale - camera - pixel perfect - simplified

Post by 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
Party member
Posts: 110
Joined: Sat Dec 28, 2019 6:35 pm

Re: example request , canvas scale - camera - pixel perfect - simplified

Post by 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
Party member
Posts: 110
Joined: Sat Dec 28, 2019 6:35 pm

Re: example request , canvas scale - camera - pixel perfect - simplified

Post by 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)
User avatar
darkfrei
Party member
Posts: 732
Joined: Sat Feb 08, 2020 11:09 pm

Re: example request , canvas scale - camera - pixel perfect - simplified

Post by darkfrei »

gcmartijn wrote: Wed Mar 02, 2022 10:01 am 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
Party member
Posts: 110
Joined: Sat Dec 28, 2019 6:35 pm

Re: example request , canvas scale - camera - pixel perfect - simplified

Post by gcmartijn »

ReFreezed wrote: Tue Mar 01, 2022 10:06 pm "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
Screenshot 2022-03-03 at 08.29.13.png (58.38 KiB) Viewed 3432 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
Screenshot 2022-03-03 at 08.37.53.png (51.62 KiB) Viewed 3432 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
Screenshot 2022-03-03 at 08.35.01.png (61.76 KiB) Viewed 3432 times
Post Reply

Who is online

Users browsing this forum: No registered users and 9 guests