How to develop adaptive resolution?

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
9lov
Prole
Posts: 4
Joined: Wed Feb 03, 2021 7:07 pm

How to develop adaptive resolution?

Post by 9lov »

Hi, I can't figure out the resolution settings for mobile platforms, I'm testing on android. I can't immediately ask a question, I will try to describe my attempts to understand how the screen works in android. For testing, I use Love for Android.

1. I don't understand how to choose the resolution for the mobile platform
As far as I know, there is a usedpiscale property in conf.lua, and as long as it is true, automatic DPI scaling works. I know that DPI is the density of dots per inch, but how should this affect programming? I can't create a window using DPI. For example, in pixels: 2160 x 1080, and in DPI? Does it make sense to set the window size in setMode in the scripts? My android smartphone has a resolution of 2160 x 1080, so the game window should be the same, right?

2. When running the app on android via Love for Android, it always runs in landscape orientation, although I need portrait orientation.
I rummaged through the forum, many advise to make the height more than the width, so this does not work. I went through a bunch of different sizes in setMode, and output love.window.getDisplayOrientation(), it has always been a "Landscape". There is a trick, you can set resizable = false, then the window is displayed in portrait mode, but if you output the display orientation using love.window.getDisplayOrientation (), then still writes "Landscape".

3. Why does the window not adjust to the screen?
When creating a window with a size of 1080x2160 for a screen with a resolution of 1080x2160, I expect that the window will fill the screen, but the portrait window is displayed in landscape mode, and only a small part of it is on the screen.

Let's simulate the situation: You create a simple project: A smartphone app, with a black background, and 4 box in the corners, and in the middle "Hello world". The question is, what should I write in my code and conf. lua, in order for this application to work correctly on all modern android smartphones?
Вот код:

Code: Select all

SCREEN_WIDTH = 420
SCREEN_HEIGHT = 840

font = love.graphics.newFont("flappy.ttf", 34)

local quadSize = 32
local quadColor = {1, 0.75, 0}
local textColor = {0.44, 0, 1}

function love.load()
    love.window.setMode(SCREEN_WIDTH,SCREEN_HEIGHT,{
        fullscreen = false,
        vsync = 1,
        resizable = true
    })
end

function love.draw()
    love.graphics.setColor(quadColor)

    love.graphics.rectangle("fill",20,20,quadSize,quadSize)
    love.graphics.rectangle("fill",368,20,quadSize,quadSize)
    love.graphics.rectangle("fill",20,788,quadSize,quadSize)
    love.graphics.rectangle("fill",368,788,quadSize,quadSize)

    love.graphics.setColor(textColor)
    love.graphics.setFont(font)

    love.graphics.printf("Hello World", 0, SCREEN_HEIGHT/2, SCREEN_WIDTH, "center")

end
In the screenshot of the result of working in android and windows, I can't understand why android chooses a higher value for the width, even if I swap them
Sorry for the spelling, my language is not English, this is an auto-translator
Attachments
Windows 10 ScreenShot
Windows 10 ScreenShot
Скриншот 04-02-2021 004931.jpg (14.5 KiB) Viewed 5852 times
User avatar
Gunroar:Cannon()
Party member
Posts: 1143
Joined: Thu Dec 10, 2020 1:57 am

Re: How to develop adaptive resolution?

Post by Gunroar:Cannon() »

For your second question use love.window.setMode(w,h) amd make h bigger than w.
https://love2d.org/forums/viewtopic.ph ... fcd9c2d04 .
As for the rest I use love.graphics.getWidth/Height to draw stuff that I want scaled, so my drawings scale automatically.

Code: Select all

W = function() return love.graphics.getWidth() end
H = function() return love.graphics.getHeight() end
...
love.graphics.rectangle("fill", W()/4, H()/4, W()/15, H()/15)
Anyway that's just my rough method that works for me and as a result I don't really have all these resolution problems, but I may just be overlooking something :ultrahappy: :P .
The risk I took was calculated,
but man, am I bad at math.

-How to be saved and born again :huh:
9lov
Prole
Posts: 4
Joined: Wed Feb 03, 2021 7:07 pm

Re: How to develop adaptive resolution?

Post by 9lov »

Gunroar:Cannon() wrote: Wed Feb 03, 2021 11:40 pm For your second question use love.window.setMode(w,h) amd make h bigger than w.
https://love2d.org/forums/viewtopic.ph ... fcd9c2d04 .
As for the rest I use love.graphics.getWidth/Height to draw stuff that I want scaled, so my drawings scale automatically.

Code: Select all

W = function() return love.graphics.getWidth() end
H = function() return love.graphics.getHeight() end
...
love.graphics.rectangle("fill", W()/4, H()/4, W()/15, H()/15)
You probably haven't finished reading my post, there's an example at the end where h is twice as big as w, and it doesn't work. It's not clear why you use love.window.getWidth/getHeight, if they are deprecated and the width and height fields from the flag table in love are now used.window.getMode.
You may be disabling usedpiscale, but I'd like not to.
User avatar
zorg
Party member
Posts: 3468
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

Re: How to develop adaptive resolution?

Post by zorg »

9lov wrote: Thu Feb 04, 2021 8:25 am
Gunroar:Cannon() wrote: Wed Feb 03, 2021 11:40 pm For your second question use love.window.setMode(w,h) amd make h bigger than w.
https://love2d.org/forums/viewtopic.ph ... fcd9c2d04 .
As for the rest I use love.graphics.getWidth/Height to draw stuff that I want scaled, so my drawings scale automatically.

Code: Select all

W = function() return love.graphics.getWidth() end
H = function() return love.graphics.getHeight() end
...
love.graphics.rectangle("fill", W()/4, H()/4, W()/15, H()/15)
You probably haven't finished reading my post, there's an example at the end where h is twice as big as w, and it doesn't work. It's not clear why you use love.window.getWidth/getHeight, if they are deprecated and the width and height fields from the flag table in love are now used.window.getMode.
You may be disabling usedpiscale, but I'd like not to.
He might have not finished reading yours, but your reading comprehension's also not a hundred percent; notice that love.graphics.getWidth/Height was written, not love.window.~; the love.window ones were deprecated because they were moved to the love.graphics module, and they are still active; alive and well, perfectly useable. love.window.getMode is not really the best to use constantly when love.graphics still gives you getWidth/getHeight/getDimensions and others.

I can't comment on the dpiscale thing though, only that for most people, something like love.window.setMode(1,2) perfectly made their apps have portrait orientation; if it doesn't for you, feel free to post what kind of device you're using, maybe the resident android expert can look into it.
Me and my stuff :3True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.
9lov
Prole
Posts: 4
Joined: Wed Feb 03, 2021 7:07 pm

Re: How to develop adaptive resolution?

Post by 9lov »

Disabling usedpiscale gives no results;

love.window.setMode(1,2) does not give results;

Code: Select all

function love.conf(t)
	t.window.width = 420
	t.window.height = 840
end
'
And it does not give results.

I'm using Honor 9 Lite, 2160x1080, 5.66"
:x
User avatar
pgimeno
Party member
Posts: 3674
Joined: Sun Oct 18, 2015 2:58 pm

Re: How to develop adaptive resolution?

Post by pgimeno »

9lov wrote: Wed Feb 03, 2021 9:58 pm 1. I don't understand how to choose the resolution for the mobile platform
As far as I know, there is a usedpiscale property in conf.lua, and as long as it is true, automatic DPI scaling works. I know that DPI is the density of dots per inch, but how should this affect programming? I can't create a window using DPI. For example, in pixels: 2160 x 1080, and in DPI? Does it make sense to set the window size in setMode in the scripts? My android smartphone has a resolution of 2160 x 1080, so the game window should be the same, right?
What all that means is that the coordinates for basically all drawing functions are not given in pixels, but in, well, "units". The length of each unit in pixels is given by love.graphics.getDPIScale(). When you get the resolution with love.graphics.getWidth/getHeight/getDimensions, you're getting it in those units. You can use them pretty much transparently, without worrying about how many pixels each unit is. You can draw things relative to the reported width and height, and it will Just Work™. If you want to get the actual pixel size for some reason, you can use love.graphics.getPixelWidth/Height/Dimensions. You can more or less use values that work well in a desktop computer, e.g. if 32 pixels work well on a desktop, 32 units will typically work well on the phone.

If you really want to work in pixels, you can disable usedpiscale, and then love.graphics.getDPIScale() will return 1, love.graphics.getWidth and love.graphics.getPixelWidth will return the same, and the units used for drawing will be pixels.
9lov
Prole
Posts: 4
Joined: Wed Feb 03, 2021 7:07 pm

Re: How to develop adaptive resolution?

Post by 9lov »

pgimeno wrote: Thu Feb 04, 2021 1:14 pm
9lov wrote: Wed Feb 03, 2021 9:58 pm 1. I don't understand how to choose the resolution for the mobile platform
As far as I know, there is a usedpiscale property in conf.lua, and as long as it is true, automatic DPI scaling works. I know that DPI is the density of dots per inch, but how should this affect programming? I can't create a window using DPI. For example, in pixels: 2160 x 1080, and in DPI? Does it make sense to set the window size in setMode in the scripts? My android smartphone has a resolution of 2160 x 1080, so the game window should be the same, right?
What all that means is that the coordinates for basically all drawing functions are not given in pixels, but in, well, "units". The length of each unit in pixels is given by love.graphics.getDPIScale(). When you get the resolution with love.graphics.getWidth/getHeight/getDimensions, you're getting it in those units. You can use them pretty much transparently, without worrying about how many pixels each unit is. You can draw things relative to the reported width and height, and it will Just Work™. If you want to get the actual pixel size for some reason, you can use love.graphics.getPixelWidth/Height/Dimensions. You can more or less use values that work well in a desktop computer, e.g. if 32 pixels work well on a desktop, 32 units will typically work well on the phone.

If you really want to work in pixels, you can disable usedpiscale, and then love.graphics.getDPIScale() will return 1, love.graphics.getWidth and love.graphics.getPixelWidth will return the same, and the units used for drawing will be pixels.
Thank you very much, I understood a lot. What about Portrait Orientation? No ideas?
User avatar
pgimeno
Party member
Posts: 3674
Joined: Sun Oct 18, 2015 2:58 pm

Re: How to develop adaptive resolution?

Post by pgimeno »

9lov wrote: Thu Feb 04, 2021 1:49 pm Thank you very much, I understood a lot. What about Portrait Orientation? No ideas?
Not beyond what has already been said. I made my own library, portland, to deal with orientation, but it's not an ideal solution because the screen is still in landscape mode (as can be noticed by the status bar, for example).
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Google [Bot], Semrush [Bot] and 2 guests