Making a game for multiple resolutions

[Kibita]

Hello there!
I would like to know how people that use Löve makes your game to run in different screen resolutions. Any good library for this? I used Java Libgdx and it has the Viewports to make my drawables fit in any screen resolution (using virtual dimensions), but I don't know if Löve has this feature.

Thanks for support!

[T-Bone]

When working with 2D art, there's really no general solution to this problem. It depends on the type of game, and your art. For my old game, Hat Cat, it naturally supports zooming and panning, so just letting the windows become bigger worked just fine. For other games, hardcoding it for a handful of resolutions might be easier (and just scale or black bar the closest one when the display doesn't match). For mobile games, I'd target 480p and 720p. For computers/video games, I'd target 720p and 1080p.

[bobbyjones]

For mobile I would imagine 720 and 1080 would be good too. I would assume most Android phones being sold now are at least 720 and high dpi.

[Nixola]

A ridiculously high amount of phones isn't even 720p, so targeting 480p for mobile could still be needed.

[Kibita]

About resolution I got it, but how can I make them fit in all screen sizes by programming?

[Tchey]

I don't have knowledge about it, but my guess would be to use everything %.screenSize instead of #.fixedValue. But maybe not.

[zorg]

About resolution I got it, but how can I make them fit in all screen sizes by programming?

Depends on whether your game allows the visible area of the world being differently sized on different resolutions or not.
If it's allowed, then you just show a bigger chunk of the world, no extra scaling and stuff. For an example, refer to OpenTTD.
If it isn't for whatever reason, like it would give someone an unfair advantage or disadvantage, then select one resolution to use as the "internal" resolution, then if the screen is more or less, adjust it with love.graphics.scale. With code:

Code: Select all

love.graphics.scale(screenWidth/internalWidth, screenHeight/InternalHeight)

Do note that the above code will horribly distort the view if the aspect ratios don't match, so here's a fixed version that crops:

Code: Select all

local ratio = math.min(screenWidth/internalWidth, screenHeight/InternalHeight)
love.graphics.scale(ratio, ratio)

The alternate of that would be to use math.max, which would get you no black bars anywhere, but parts of the view will be "outside" the screen.

[Kibita]

Depends on whether your game allows the visible area of the world being differently sized on different resolutions or not.
If it's allowed, then you just show a bigger chunk of the world, no extra scaling and stuff. For an example, refer to OpenTTD.
If it isn't for whatever reason, like it would give someone an unfair advantage or disadvantage, then select one resolution to use as the "internal" resolution, then if the screen is more or less, adjust it with love.graphics.scale. With code:

Code: Select all

love.graphics.scale(screenWidth/internalWidth, screenHeight/InternalHeight)

Do note that the above code will horribly distort the view if the aspect ratios don't match, so here's a fixed version that crops:

Code: Select all

local ratio = math.min(screenWidth/internalWidth, screenHeight/InternalHeight)
love.graphics.scale(ratio, ratio)

The alternate of that would be to use math.max, which would get you no black bars anywhere, but parts of the view will be "outside" the screen.

Hmm that's nice! Would be great if next love2d version would have this feature.

[zorg]

What feature? You can code this on your own in about 2-3 lines, don't be lazy!

[Kibita]

What feature? You can code this on your own in about 2-3 lines, don't be lazy!

Hahaha, sorry! I didn't want to mean that. I just tought that Love2d next time could have this: https://github.com/libgdx/libgdx/wiki/Viewports