LÖVE

Posted: **Mon Nov 02, 2015 3:23 pm**

How to properly do a functional and simple fullscreen system with 100% scaled graphics, scaling while maintaining aspect ratio (black borders) and full scale?

On Game Maker this was a simple task to do. On HTML5 / JavaScript I know how to force my canvas through CSS to be both horizontally and vertically aligned with the browser window. What's the logic on LOVE?

When I enable the fullscreen, my game window, which is 1200x600, always stays on the top-left corner of the screen.

I tried love.graphics.translate(1366/2 - canvas.w/2, 768/2 - canvas.h) which worked, however, my rectangle graphics were acting a bit weird, like if they were losing frames despite the game being at 64 fps.

Also, is there any way to get the display resolution, something like this:
(display.getWidth()/2 - canvas.w/2, display.getHeight()/2 - canvas.h/2), because that would be really, really useful.

Posted: **Mon Nov 02, 2015 5:41 pm**

My resolution-handling library, push, might help you do that.

It supports scaling to any screen, handling offsets by drawing black bars on the sides.

In order to turn fullscreen on and off, simply call push:switchFullscreen().

Posted: **Mon Nov 02, 2015 6:01 pm**

Something like this should do it (You were close). Untested though.

Code: Select all

-- Dumb math was here, look at my next post

Posted: **Mon Nov 02, 2015 6:56 pm**

Does "local canvasW,canvasH = yourCanvasName:getDimensions()" set the canvas width and height? I can't find anything on the wiki about setting up width or height of canvases. Are screenW and screenH already defined variables of my display resolution like 1366x768? Does the 2nd line define the canvas width or height?

Posted: **Mon Nov 02, 2015 9:33 pm**

galoctopus wrote:Does "local canvasW,canvasH = yourCanvasName:getDimensions()" set the canvas width and height? I can't find anything on the wiki about setting up width or height of canvases. Are screenW and screenH already defined variables of my display resolution like 1366x768? Does the 2nd line define the canvas width or height?

local yourCanvasName = love.graphics.newCanvas(256,144) Creates a canvas and returns the canvas object. 256x144 is the specified resolution.

love.graphics.getDimensions() returns the window dimensions.
yourCanvasName:getDimensions() returns the dimensions of the specified canvas.
So "get" functions never changes anything in the program. It's a read thing.

Seems like my Math was a little dumb. I've fixed it and made a small love test file. Hopefully that explains it a little bit better.

Code: Select all

love.window.setMode(800,600,{resizable = true, highdpi = true}) -- Just to make the screen resizable, and this method works with HighDpi

local yourCanvasName = love.graphics.newCanvas(256,144) -- Game resolution

function love.draw()
	love.graphics.setCanvas(yourCanvasName) -- Set rendering to the canvas


	-- Render stuff in the game here
	love.graphics.rectangle("line",0,0,256,144) -- Draw on the outline of canvas


	love.graphics.setCanvas() -- Set rendering to the screen
	local screenW,screenH = love.graphics.getDimensions() -- Get Dimensions of the window
	local canvasW,canvasH = yourCanvasName:getDimensions() -- Get Dimensions of the game canvas
	local scale = math.min(screenW/canvasW , screenH/canvasH) -- Scale canvas to the screen, You can also change this with 1 if you don't want to scale. Or wrap it in a math.floor to only scale integers.
	--local scale = math.floor(math.min(screenW/canvasW , screenH/canvasH)) -- Scale to the nearest integer 
	--local scale = 1 -- Don't scale

	love.graphics.push() -- Push transformation state, The translate and scale will affect everything bellow until love.graphics.pop()
	love.graphics.translate( math.floor((screenW - canvasW * scale)/2) , math.floor((screenH - canvasH * scale)/2)) -- Move to the appropiate top left corner
	love.graphics.scale(scale,scale) -- Scale
	love.graphics.draw(yourCanvasName) -- Draw the canvas
	love.graphics.pop() -- pop transformation state
end

Posted: **Mon Nov 02, 2015 10:41 pm**

Thanks! It worked!

Posted: **Tue Nov 03, 2015 12:09 pm**

I noticed today that despite the high framerate, the animations doesn't look as smooth as if they were in windowed mode. They kinda look a bit jumpy which I find a bit weird. :\

Posted: **Tue Nov 03, 2015 1:26 pm**

That might be Windows that is messing with you. It looks fine on this mac I tried it on both fullscreen and windowed.
You can try to turn off vsync and see how that goes. Just add vsync = false to love.window.setMode() and you FPS should be somewhere between 200-1000FPS.

If it stays in the 60-100FPS range then... I don't know how to fix it. And I've tried a lot of things to fix that on my windows machine. It seems to be a problem with some driver/other programs/windows specific things.

LÖVE

How to do a functional and simple fullscreen system?

How to do a functional and simple fullscreen system?

Re: How to do a functional and simple fullscreen system?

Re: How to do a functional and simple fullscreen system?

Re: How to do a functional and simple fullscreen system?

Re: How to do a functional and simple fullscreen system?

Re: How to do a functional and simple fullscreen system?

Re: How to do a functional and simple fullscreen system?

Re: How to do a functional and simple fullscreen system?