Understanding Scaling for different resolutions

[dartvalince]

Hey all,

I've been working for the past month or so on a small game that has not transitioned me to use the Love-Android port. One of the biggest challenges to me right now is the scaling of the game to fit the different resolutions of the different devices. I'm not sure if this is something I'm not understanding correctly, or if I'm just using the tools given to me incorrectly, or what it is. I'll try to be as detailed as possible below.

With Love-Android we get the function

Code: Select all

love.window.getPixelScale()

Within Love2d, we also have the function

Code: Select all

love.graphics.setScale(sx, sy)

So i was hoping to do something increadibly simple, like this

Code: Select all

function love.load()
     -- get scale factor
     if love.system.getOS() == "Android" then
          scale = love.window.getPixelScale()
     else
          scale = 1 -- set to one for pc version
     end
     
     --[[
          code here to create 4 circles and set the x, y of each
          to put them in the four corners of the screen
          and store them in the circles table
     --]]
end

function love.update(dt)
     --[[
          code here that will update the positions of the
          circles to move them diagonally toward their
          opposite corners
     --]]
end

function love.draw()
     -- draw the circles
     love.graphics.push()
          love.graphics.scale(scale, scale) -- set the scaling based on what we got in love.load
          love.graphics.setColor(255, 255, 255)
          for i, circle in ipairs(circles) do
               love.graphics.circle("fill", circle.x, circle.y, circle.r)
          end
     love.graphics.pop()
end

So, looking at this, you can probably see what my problem is. When i run the game on my PC, it looks fine. All the circles are in the corners of the window, and they all move diagonally toward their opposite corners.

However, when i publish out the apk and run it on my phone (Samsung Galaxy Note 4) or one of my kids tablets (Nabi Dreamtab), the scaling does not work like I intend it to. Instead, for example, on my phone, the scale equals 4. In my head, this makes since since it's a smaller screen, the scale will need to increase. However, when it opens, all i can see is the circle that spawns in the top left corner, and nothing else. So it's like in theory it worked, the circle definitely got bigger, but everything else is now offscreen.

So it's like the "size" of everything scales, but so does the resolution? x, y coordinate? This is where i'm getting hung up and not understanding what is going on. Any help in this is greatly appreciated.

here are screenshots for references:
Screenshot from phone - https://love2d.org/imgmirrur/0TeOTYC.png

Screenshot from PC (what it should look like on phone) - https://love2d.org/imgmirrur/h1XX5uP.png

Attached is also the game.love file created with the code (sorry if it's a mess)


Thank you again for anyone that can assist in me understanding this

[Nixola]

This should be fixed. Sorry, don't have time to explain much; your approach was kinda right, but the position got scaled as well. I prefer to avoid the use of lg.scale and increment the size of things myself as this allows me more control on what is happening.

[dartvalince]

This should be fixed.

So this is a bug then? If so that is good to know that I'm not just being dumb on understanding it.

I went through originally and scaled things manually all throughout the code, but as I was adding more, i found myself forgetting to do it, and kept having to go back in a add it in in sections. Ended up being a lot of work if I could just do something as simple as i described above.


Edit: Wait, reread your statement. Read it as it should be fixed as in it was/is a bug, but I see now your saying that it should be fixed, like it needs to be.

[master both]

As far as I'm aware love.graphics.getPixelScale() just returns 1 in normal displays and 2 on high density screens like the iphones retina display.

This is the way I scale my games on any device.

Code: Select all

function love.load()

    windowWidth = 480
    windowHeight = 320

    if love.system.getOS() == "Android" then
        local x,y = love.window.getDimensions()
        scalex = (x/windowWidth)
        scaley = (y/windowHeight)
    else
        scalex = 1
        scaley = scalex
    end

    love.window.setMode(windowWidth*scalex,windowHeight*scaley)	

end

function love.draw()
    love.graphics.scale(scalex,scaley)

    -- draw everything here

end

Is there an easier way?

[Nixola]

Oops. When I said "this should be fixed" I meant to upload a .love file where the issue was solved... And then I forgot to attach it.
Thing is, by using lg.scale you also scale the drawing position; so if you have a screen width of 1920 and a pixel density of 4, you're going to draw at (1920-radius)*4 using lg.scale. I edited the .love file so that it multiplies the radius and the text by the pixel density, to obtain a pretty much consistent dimension of those items and handle scaling correctly, without affecting the position in the screen. Here is the .love file.

[dartvalince]

As far as I'm aware love.graphics.getPixelScale() just returns 1 in normal displays and 2 on high density screens like the iphones retina display.

Using my Samsung Galaxy Note 4, the getPixelScale() returns 4 and on my kids Nabi DreamTab it returns 1.5, so there is some more variance than just 1 or 2.

I see what you are doing in your code, i'm going to try it out, thank you for the suggestion.

Edit: Tried out what your code suggested, didn't seem to work and gave the same results. It seems that your solution hinged on the love.window.setMode() which seems to be an ignored function in the Android port

Here is the .love file.

Guess it didn't attach again? Haha, np though, I see what you are saying. I think i understand it a bit better now, thank you for all the help.

[Nixola]

I DID attach it this time dammit. Well, I don't have it on this pc so I obviously can't now; are you able to make it work using my suggestion?

[dartvalince]

Lol np, I can make it work with your suggestion. I've started to put it into the game and it's looking good so far. I just wish there was a way to do it with just the lg.setScale().

Thank you both for the help

[Nixola]

You could do it with lg.scale, but you'd have to divide every X and Y coordinate by 4 anyway; also the result would probably be blurry.

[portify]

Just pass all coordinate input through love.window.fromPixels and all coordinate output through love.window.toPixels.

Code: Select all

local width, height = love.window.fromPixels(love.graphics.getDimensions())
love.graphics.print("Hello world", love.window.toPixels(width / 2 + 100, height / 2))

In this case you'll be measuring in dps rather than pixels (so your drawing is density independent, though you might need to do a bit more for things like images).