Creating a Letterbox Style Fullscreen Window

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
Rustocrat
Prole
Posts: 4
Joined: Sat Sep 23, 2017 4:25 pm

Creating a Letterbox Style Fullscreen Window

Post by Rustocrat »

I am a complete newbie looking to create a game reminiscent of classic Commodore 64 games (such as Ultima). The resolution on a C64 is 320x200, so I figure my game should keep these resolution settings. However, I need a way to spread that 320x200 resolution evenly over a much higher definition display, preferably without stretching it. What would be the best and most efficient way of accomplishing this?

I know I can set the definition when the game starts like so:

love.window.setMode(320, 200, {resizable=true, vsync=false})

But I need a way of scaling that 320x200 resolution as the window is resized.
User avatar
Nixola
Inner party member
Posts: 1949
Joined: Tue Dec 06, 2011 7:11 pm
Location: Italy

Re: Creating a Letterbox Style Fullscreen Window

Post by Nixola »

I wouldn't make the window resizable, instead I'd only allow the user to change the window size in the game settings (maybe with a "scale" setting). To do what you want you need to create a 320x200 Canvas, set its filter to "nearest", draw everything to it and then, finally, draw the canvas itself. As long as you only allow resizing via that setting and draw the canvas scaling by the chosen scale factor in both directions, you'll have pixel-perfect scaling without any stretch. Hope this is helpful!
lf = love.filesystem
ls = love.sound
la = love.audio
lp = love.physics
lt = love.thread
li = love.image
lg = love.graphics
User avatar
Ulydev
Party member
Posts: 445
Joined: Mon Nov 10, 2014 10:46 pm
Location: Paris
Contact:

Re: Creating a Letterbox Style Fullscreen Window

Post by Ulydev »

^

also, all of this is packed in https://github.com/ulydev/push

you'd go

Code: Select all

push:setupScreen(320, 200, windowWidth, windowHeight, { resizable = true, pixelperfect = true })
User avatar
Rustocrat
Prole
Posts: 4
Joined: Sat Sep 23, 2017 4:25 pm

Re: Creating a Letterbox Style Fullscreen Window

Post by Rustocrat »

Interesting, and thanks for the reply! I'll see what I can do. I only noticed after I uploaded my question that this topic was (kind-of) covered in the "topics not deserving of their own thread" discussion, but thank you for clarifying the issue.
User avatar
Rustocrat
Prole
Posts: 4
Joined: Sat Sep 23, 2017 4:25 pm

Re: Creating a Letterbox Style Fullscreen Window

Post by Rustocrat »

Ok, I think I've got it working! The screen is displaying an image that I've made (320x200) stretched letterbox style over everything. The only thing wrong is that now that the image is stretched, it looks blurry. Which honestly, isn't unlike a C64, but I don't think people playing it would appreciate it too much. Is there any way I can stretch things without the blur? Much like Photoshop's "nearest neighbor" transformation algorithm?

local push = require "push"
local windowWidth, windowHeight = love.window.getDesktopDimensions()
push:setupScreen(320, 200, windowWidth, windowHeight, { fullscreen = true, pixelperfect = true})
function love.load()
love.graphics.setCanvas(groundcanvas, wallcanvas, topcanvas)
devsplash1 = love.graphics.newImage("NewDevSplash1.png")
Font = love.graphics.newFont("C64_Pro.ttf", 8 )
love.graphics.setFont(Font)
love.graphics.setColor(255,255,255,255)
love.graphics.setBackgroundColor(0,0,0)
end
function love.draw()
push:start()
love.graphics.draw(devsplash1, 0, 0)
push:finish()
end
User avatar
Rustocrat
Prole
Posts: 4
Joined: Sat Sep 23, 2017 4:25 pm

Re: Creating a Letterbox Style Fullscreen Window

Post by Rustocrat »

It probably requires better understanding of how canvases work. I'll see if I can wrap my brain around the subject.
User avatar
Nixola
Inner party member
Posts: 1949
Joined: Tue Dec 06, 2011 7:11 pm
Location: Italy

Re: Creating a Letterbox Style Fullscreen Window

Post by Nixola »

Please do not multipost. If you need to add something to a post, you can edit your last one.
As to answer your question, look at Canvas:setFilter.
lf = love.filesystem
ls = love.sound
la = love.audio
lp = love.physics
lt = love.thread
li = love.image
lg = love.graphics
User avatar
Foppy
Prole
Posts: 11
Joined: Mon Aug 28, 2017 8:50 pm
Location: Netherlands
Contact:

Re: Creating a Letterbox Style Fullscreen Window

Post by Foppy »

I am also working on a game in C64 resolution and added this in Love.load() to get nice image scaling without blur:

Code: Select all

love.graphics.setDefaultFilter("nearest","nearest",1)
Domarius
Prole
Posts: 11
Joined: Tue Jun 26, 2018 1:07 am

Re: Creating a Letterbox Style Fullscreen Window

Post by Domarius »

I just want to add, you need to set the filter BEFORE push:setupScreen, in love.load(), or it doesn't work, ie.:

Code: Select all

function love.load()
	love.graphics.setDefaultFilter("nearest","nearest",1)
	push:setupScreen(gameWidth, gameHeight, windowWidth, windowHeight, {fullscreen = true, pixelperfect = true})
end
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot] and 5 guests