Adapting to any screen size

[Techron]

Hello! I am currently developing an Android app using the LOVE engine and when I test the app on different phones, it doesn't seem to fit all sizes. The Android version of LOVE does indeed have all of the functions of PC LOVE and they work perfectly, so basically if it works on the computer it works on the phone. Any solutions?

[Positive07]

[wiki]love.graphics.getDimensions[/wiki], [wiki]love.graphics.getWidth[/wiki], [wiki]love.graphics.getHeight[/wiki]

And then scale your stuff properly to fit those dimensions, you could do this in love.load or use love.graphics.scale in love.draw to scale the whole stuff, but that is not really nice, I recommend you start your project thinking in percentages of screen size

[Techron]

How do I scale the images to the right dimensions?

[Jasoco]

Math.

Say you want to take an image of 100 x 100 and scale it so it fits in say 1024 x 768.

Horizontal scaling would be 1024 / 100. Vertical scaling would be 768 / 100.

A real-world usage would be if you have your game draw to a specific size of 648x480 (A standard 4:3 resolution) or 848x480 (16:9 which is more optimal for current generations) and you want to be able to have your game window scale to any display without changing the actual display resolution. (Which in this day of flat screen displays is not good for the display like it used to be for CRTs.) You'd just scale the output of the game's drawing calls to make it fit. Then you can just Löve's built-in resizable window option and let the player do what they want with the window instead of being forced to use what you think is best for their computer.

I've already supplied this same exact code before. You might get some useful information from my previous post:
viewtopic.php?f=4&t=78317&p=170556&hilit=scale#p170556

[Techron]

Okay now what do I do about the tappable buttons? I do buttons differently by most people do, i check to see if the mouse (or finger, in this case) are in between the given dimensions. For example, i do something like this.

Code: Select all

function love.mousepressed(x, y, button)
     if x >=50 and x <= 100 and y >=50 and y <= 100 then
          *what happens when you click in between these dimensions*
     end
end

[Positive07]

you just need to divide mouse x and y with the scale x and y values

[Jasoco]

And also remember to account for the X and Y offset if you use them.

newMouseX = (mouseX - xOffset) / screenScaleX

Basically.

It's best to print the current newMouseX/Y to the screen somewhere while playing around with the math until you are sure it returns the correct adjusted position.