Creating a Letterbox Style Fullscreen Window

[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.

[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!

[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 })

[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.

[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

[Rustocrat]

It probably requires better understanding of how canvases work. I'll see if I can wrap my brain around the subject.

[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.

[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]

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