Page 1 of 1

Multi resolution layout help, DP, DPI, Scale...

Posted: Mon Jul 25, 2016 3:57 pm
by The_JinJ
Hi

In the process of attempting to support Android and looking into the best way to deal with the different screen resolutions and density. I have came up with the following where the layout translates fine from desktop and onto my Android device (Galaxy S6).
Interested in seeing other approaches and the best way to deal with images as scaling up isn't ideal. I initially thought of creating a large image and scaling down, however this would mean a scaled down image would then be scaled up to fit each device.

New at all this so any pointers appreciated, thanks :)

Code: Select all

love.window.setMode(800, 480)
demo = love.graphics.newImage("demo.png")
screenWidth, screenHeight = love.window.fromPixels(love.graphics.getDimensions())
 
 function love.draw() 
  love.graphics.push()
  love.graphics.scale(love.window.getPixelScale())
  love.graphics.setBackgroundColor(255, 255, 255)
  love.graphics.setColor(255, 255, 0)
  love.graphics.rectangle("fill", 10, 10, screenWidth - 20, screenHeight - 20)
  love.graphics.setColor(255, 0, 0)  
  love.graphics.rectangle("fill", 50, 50, 50, 50)
  love.graphics.setColor(255, 0, 255)  
  love.graphics.circle("fill", 100, 100, 50, 5)
  love.graphics.setColor(255, 0, 255)  
  love.graphics.draw(demo, (screenWidth / 2 - demo:getWidth() / 2), (screenHeight / 2 - demo:getHeight() / 2))
  love.graphics.setColor(0, 0, 255)
  love.graphics.print("Layout...", screenWidth / 2, 0)

Re: Multi resolution layout help, DP, DPI, Scale...

Posted: Mon Jul 25, 2016 6:39 pm
by The_JinJ
Came across useful code in this thread:
viewtopic.php?f=4&t=78317&p=170558&hili ... DE#p170558

Still would like to see how others are handling things :)

Re: Multi resolution layout help, DP, DPI, Scale...

Posted: Mon Jul 25, 2016 8:08 pm
by Tjakka5
If you want a easy solution, push might do the trick:
viewtopic.php?t=80738

Re: Multi resolution layout help, DP, DPI, Scale...

Posted: Fri Aug 05, 2016 9:39 am
by 4aiman
1. Make your project look perfect in some custom resolution. Say, 640x480.
2. Then scale it all up.
3. ????????????
4. Profit!!!!!

it's much easier than scaling every other drawable object :)

Re: Multi resolution layout help, DP, DPI, Scale...

Posted: Thu Aug 11, 2016 4:12 pm
by AnRu
4aiman wrote:1. Make your project look perfect in some custom resolution. Say, 640x480.
2. Then scale it all up.
3. ????????????
4. Profit!!!!!

it's much easier than scaling every other drawable object :)
This is good for mobile cases, but what about a Full HD and 4K resolutions? There will be extra large buttons, other things. And, of course, blur pixels from scaling filters (or pixelated)

Re: Multi resolution layout help, DP, DPI, Scale...

Posted: Thu Aug 11, 2016 4:59 pm
by zorg
Then make your internal resolution 1920x1080 or 4k, and you scale -down-.

Though that can have its toll on the gpu (or its phone equivalent), mainly memory-wise, so if you want to support anything from a potato to a rig, you could have your assets in more than one "base" resolution, and pick the one nearest to what the user picks, then scale only if necessary.

Re: Multi resolution layout help, DP, DPI, Scale...

Posted: Thu Aug 11, 2016 5:51 pm
by Jasoco
That's what I do if it's a game that I want to be high resolution. And what a lot of other games do. Like Spelunky. It renders at 1080p (Or maybe 720p I dunno.) then stretches it to your resolution of choice.

It's the easiest way if you're designing a game that needs a set resolution.

All that's left is figuring out the math for positioning and scaling so it's always centered on the screen.

Re: Multi resolution layout help, DP, DPI, Scale...

Posted: Thu Aug 11, 2016 6:24 pm
by 4aiman
What zorg and Jasoco have said.

Even with 4K textures one still can have initial resolution as low as 0.3MP.
Just don't use the actual size of a texture when you drawing it on any screen.
I'd say it all depends on the screen sizes of the devices used by you to code your app.