LÖVE

Posted: **Fri Jun 09, 2017 4:13 am**

Hello, im quite new to lua and love2D.

my project is simple so far...
-background image
-music (in loop)
-mouse pointer (grabbed in screen)

So far everything works, and the rest to come doesnt seem to be a problem..
(im just doing a demo of a visual novel for a future project)

BUT!

Even after looking at the wiki, trying every method of fullscreen type i could find, my backgound image refuses to scale with the fullscreen size. I looked at TLFres, "Push" and other solutions of the like.. but cannot get them to work (probably outdated?).

So in short,

- I want to scale the 800x600 to the resolution of fullscreen (like a simple zoom-in on a picture)
- I do not care about the images being scaled up and losing resolution

my initial idea was to find an exemple of something simple like love.exe in the love folder as it seems to resize in fullscreen the way i want it to do.. but sadly couldnt find any exemples of something alike more recent than 2013.. and nothing works.

So, if anyone has the time to help a newbie like me, that would be greatly appreciated !
i might just be skipping something really simple.. or not.

Thanks !

Posted: **Fri Jun 09, 2017 7:34 pm**

There's actually a couple of ways to do this, how exactly it will work depends on what you want as the output.

(Apologies if anything below doesn't work as-is, I'm writing this as I go, it's not copied from an actual working project, I've just implemented this a few times.

)

At the most basic level, if you just want to draw your image at the same size as the screen, you have to figure out the scale factor using the screen size and your image size. You have to do X and Y individually, and the image:draw() function in Love2D actually has independent X/Y scaling.

Code: Select all

function getScaling(drawable,canvas)
	local canvas = canvas or nil

	local drawW = drawable:getWidth()
	local drawH = drawable:getHeight()

	local canvasW = 0
	local canvasH = 0
		
	if canvas then
		canvasW = canvas:getWidth()
		canvasH = canvas:getHeight()
	else
		canvasW = love.graphics.getWidth()
		canvasH = love.graphics.getHeight()
	end

	local scaleX = canvasW / drawW
	local scaleY = canvasH / drawH

	return scaleX, scaleY
end

Usage:

Code: Select all

--during love.load() or love.update(), as needed
imageScaleX, imageScaleY = getScaling(myImage)

--during love.draw()
love.graphics.draw(myImage,0,0,0,imageScaleX,imageScaleY) -- x,y will always be 0,0 for a wallpaper

If you want to use a different reference for your scaling you can put that into this function as the "canvas" after your drawable image, otherwise the function rolls back over to checking the screen/window size and width.

If you want to lock your game's entire rendering to 800x600 and then scale that up (which is nice and consistent for game feel but results in a chunkier look) you'd draw all of your stuff on to an offscreen canvas defined by love.graphics.newCanvas : https://love2d.org/wiki/love.graphics.newCanvas

Then scale that up using the same way as for your wallpaper. You can even stack the functions and scale the wallpaper to the canvas, then the canvas to the screen.

Code: Select all

-- during love.load() or love.update()
myCanvas = love.graphics.newCanvas(800,600)
imageScaleX, imageScaleY = getScaling(myImage,myCanvas)
canvasScaleX,canvasScaleY = getScaling(myCanvas)

-- during love.draw()
love.graphics.setCanvas(myCanvas)
love.graphics.draw(myImage,x,y,0,imageScaleX,imageScaleY)
love.graphics.setCanvas()
love.graphics.draw(myCanvas,0,0,0,canvasScaleX,canvasScaleY)

Now after this it does get a little more complex, because the next possibility is to scale up your off-screen canvas, but only until you hit one edge of the screen. This is really easy to implement though, which makes things easier, you just have to calculate offset values for the final draw call. It's really easy to put this into a function to reduce clutter, too. This function also includes an intScaling option that forces your scaling values to be integer based for a "close as possible" clean upscale effect.

Code: Select all

function getSquareScaling(drawable,canvas)
	local canvas = canvas or nil

	local canvasW = 0
	local canvasH = 0

	if canvas then
		canvasW = canvas:getWidth()
		canvasH = canvas:getHeight()
	else
		canvasW = love.graphics.getWidth()
		canvasH = love.graphics.getHeight()
	end

	local drawW = drawable:getWidth()
	local drawH = drawable:getHeight()

	local scalingX, scalingY = getScaling(drawable,canvas)
	
	-- scalingX,scalingY = math.floor(scalingX),math.floor(scalingY)
	-- ^^^ Include the above line for even integer upscaling, optional

	local scaling = math.min(scalingX,scalingY)
	local offsetX = (canvasW-drawW*scaling)/2
	local offsetY = (canvasH-drawH*scaling)/2

	return scaling, offsetX, offsetY
end

Usage:

Code: Select all

--during love.load or love.update
myCanvas = love.graphics.newCanvas(800,600)
imageScaleX, imageScaleY = getScaling(myImage,myCanvas)
canvasScale,canvasX,canvasY = getSquareScaling(myCanvas)

-- during love.draw()
love.graphics.setCanvas(myCanvas)
love.graphics.draw(myImage,x,y,0,imageScaleX,imageScaleY)
love.graphics.setCanvas()
love.graphics.draw(myCanvas,canvasX,canvasY,0,canvasScale,canvasScale)

Maybe a bit of overkill for an explanation, but that should help.

Also of note, if you decide to go with any method that uses an off-screen canvas, you'll have to properly scale your mouse or touch input along with it. You can do that pretty easily with the same variables that are produced by the above functions though, just screen scaling and X/Y offset.

Posted: **Mon Aug 14, 2017 6:41 am**

Thanks very much dewgstrom. That was a very helpful post. I'm trying to get mine to scale to fullscreen at the moment.

LÖVE

fullscreen scaling help

fullscreen scaling help

Re: fullscreen scaling help

Re: fullscreen scaling help