How to do a functional and simple fullscreen system?

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
User avatar
galoctopus
Prole
Posts: 6
Joined: Sat Oct 17, 2015 1:58 pm

How to do a functional and simple fullscreen system?

Post by galoctopus »

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. :D
User avatar
Ulydev
Party member
Posts: 445
Joined: Mon Nov 10, 2014 10:46 pm
Location: Paris
Contact:

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

Post by Ulydev »

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(). ;)
User avatar
Evine
Citizen
Posts: 72
Joined: Wed May 28, 2014 11:46 pm

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

Post by Evine »

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

Code: Select all

-- Dumb math was here, look at my next post
Last edited by Evine on Mon Nov 02, 2015 9:33 pm, edited 1 time in total.
Artal, A .PSD loader: https://github.com/EvineDev/Artal
User avatar
galoctopus
Prole
Posts: 6
Joined: Sat Oct 17, 2015 1:58 pm

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

Post by galoctopus »

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?
User avatar
Evine
Citizen
Posts: 72
Joined: Wed May 28, 2014 11:46 pm

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

Post by Evine »

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
Attachments
display.love
(752 Bytes) Downloaded 181 times
Artal, A .PSD loader: https://github.com/EvineDev/Artal
User avatar
galoctopus
Prole
Posts: 6
Joined: Sat Oct 17, 2015 1:58 pm

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

Post by galoctopus »

Thanks! It worked! :D

Image
User avatar
galoctopus
Prole
Posts: 6
Joined: Sat Oct 17, 2015 1:58 pm

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

Post by galoctopus »

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. :\
Attachments
pong.love
(16.37 KiB) Downloaded 168 times
User avatar
Evine
Citizen
Posts: 72
Joined: Wed May 28, 2014 11:46 pm

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

Post by Evine »

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.
Artal, A .PSD loader: https://github.com/EvineDev/Artal
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Bing [Bot] and 3 guests