best practices when working with different layouts

Monkey Targets Forums/Android/best practices when working with different layouts

Bladko(Posted 2011) [#1]
http://developer.android.com/guide/practices/screens_support.html
http://www.enterra-inc.com/techzone/android_statistics/
http://developer.android.com/resources/dashboard/screens.html

if we gather informations from this page we have conclusion that most common resolution these days is 480x800

what is your best practice when working with layouts for different resolutions?

my own workaround is a low resolution graphics (real retro style) and they are scalled up without filtering so they match every screen and resolution so I use only scalling mechanizm in monkey with one common graphics which are streched to fit the screen. On most screens it looks quite good.


therevills(Posted 2011) [#2]
Hmmmm strange that 480x800 is the most common resolution, I would have thought cheaper phones with lower resolutions would be more popular.

My phone has a 320x480 resolution and when I looked around at the time of buying it I thought it was near the middle of the road.

Anyway I'm coding my games at the 320x480 resolution and just using a simple virtual resolution (ie scaling :P) to display on other devices...


Bladko(Posted 2011) [#3]
ok thanks i just want to check if some one else is working in different way this virtual resolution


arcsrc(Posted 2011) [#4]
I would also just scale the whole screen to support the different resolutions but there's a slight problem:

iphone went from 320x480 to 640x960 that's exacly 2x the size but the 480x800 resolution is off. Scaling to this resolution would stretch the image vertically by 80px and thats pretty noticable.


Bladko(Posted 2011) [#5]
does everyone add one pixel offset to each image to solve problem with open gl scalling ?


DGuy(Posted 2011) [#6]
I go the "virtual screen" route via a slightly modified version of the "hitoro/autofit" code that comes with Monkey.

My base virtual screen size is 640x960 and I create all my artwork for this resolution. The scaling to 320x480, 600x1024 (NookColor) or 768x1024 (iPad) is quite unnoticeable & the quality is very acceptable (I think), and the speed hit is negligible.

Note, the scaling does not just simply stretch the virtual screen to fill the physical screen (this would distort the graphics), but takes into account the aspect-ratio of the physical screen verses the virtual screen. While this leads to empty/unused space along the edges of the screen, it prevents the artwork from being stretched out of shape.

To avoid empty/unused space along the edges of the devices physical screen (as would be the case for the NookColor and iPad), I compute a virtual screen screen size that takes up the whole display (Ex. ~640x1092 for the NookColor; ~720x960 for the iPad) and then layout all screen elements relative to the corners/edges/center of the virutal screen.

My main reason for using this method was to avoid creating different versions of artwork for different resolutions and having those different versions bloating the app while going unused.


Bladko(Posted 2011) [#7]
i am not sure what is better empty black space on edges or slighly distorted images, which in most cases are unseen

what do you think ?


DGuy(Posted 2011) [#8]
If i had to, I'd choose empty, unused space rather than distorted graphics.

The unused space doesn't have to be black: you draw background images that take up the whole screen or just the empty areas, then scale/position/draw your game art work.