How to design pixel-perfect graphics and UI layouts on Android devices?

[paul_nicholls]

Hi guys, as you might already know, WILL and I have been recoding and developing his "Subject 33" project (see below):
http://www.pascalgamedevelopment.com/showthread.php?2970-Subject-33-Restarted

One issue we have come across is how on earth do we deal with Android devices and their differing resolution sizes+screen DPIs when trying to design graphics and layouts - Google doesn't want people to think in pixels, but device independend pixels (DPs), and we can't seem to think in this mode yet

We have been banging our heads around the concepts, and we are struggling to work out how we can design some control layouts for a game on different resolutions so that they don't obscure the game maps, etc. in the game.

We have designed some layouts for 800x480, 1024x800 (I think), and one other...but we don't know how they will work on devics that don't match those resolutions

Are there any Android developers here who might be able to help explain to us how we can do this?

EDIT: we are using Oxygene for Java + libgdx at the moment, hence me posting here

cheers,
Paul

[Daikrys]

hey,

until you dont want remake every grafic you should stick for a resolution of 320x480 and then scale up for higher resolutions. its also useful to design GUI elements with some space to every border so if a device miss some space it still fits the screen

in my Math Warrior the backgrounds grafics are slightly bigger then the screen so it fit the most resolutions

since i got some problems too with the different devices and was asked alot how to fix, i contacted a friend of mine who use HTML5 to develope for android devices, he was telling me that he always gather the resolutions of the newest android devices and some mid-range products that have similiar resolutions and he only design to fit this devices, the rest is just bonus he said

the ouya might be a special case where i personally would make a version just for the ouya to deliver a good quality product and be a part of the minor goldrush it might bring

if i totally missed the point i still hope it is somehow useful

[Traveler]

I believe the general idea is nolonger to create layouts for fixed resolutions but to scale according to the actual resolution of the device, given a target resolution. (I'm not sure if Oxygene does these things for you or that you have to do that manually). It may also be necessary to include several versions of images to prevent blurry textures when they're viewed on resolutions far larger than what you initially designed them for.

[SilverWarior]

First of all DPI is not used for refering to Device independat pixels but Dots per inch.
http://en.wikipedia.org/wiki/Dots_per_inch
DPI tels you how many dots or in case of screens pixels it is needed to render 1 inch sized line.
So insted of thinking in pixels you should start thinking in inches centimeters or such. So you say I wan't this control to have 1 cm of height and 5 cm of widht. And then you calculate how much pixels would you need for achieving such widths and heights based on devices DPI information.
Now the problem arizes becouse you won't be able to have your textures designed for all spcific DPI's at the same time so you will have to scale them on some devics and thus unfortunately lose some quality.

Now I belive that best aproach would be using Vector based graphics so you can resize your controlls as you need. For representing controll you should use some repetive background texture used for drawing controls surface and another controll texture which defines how this background texture is rendered (shape, shading effects, etc.).
Background texture should never be scaled. For this you would need several versions of it to fit major DPI differences.
Control texture always get scaled to fit the actual size of the controll.
Now if you are woried that using such aproach all the time would lead to performance loss, you can go and use it only once (upon application loading) instead to proceduraly generate the textures which would then be used (as ordinary textures) for rendering your game objects. This can be especially suitable for mobile phones and tablets since their screen resolution never changes. You could ever go and save theese proceduraly generated textures to the mobile device so they can be used the next time your game is used (faster game startup).

[User137]

As far as i can see, Android still lets you think in pixels
http://stackoverflow.com/questions/1...een-dimensions

Thinking about it, it is a fundamental requirement if you are to do any OpenGL graphics. You just have to know width/height in pixels. Ask that from the OpenGL context or something if it comes to that... I know you may not be using exactly that API, but there should always be a way.

[paul_nicholls]

Thanks for the replies so far guys, much appreciated
@SilverWarrior: For your information, DP does stand for Density-independent pixel (dp) with Android, but you are right in that DPI stands for Dots Per Inch.
In Subject 33 we can't use vector graphics as all the in-game graphics are currently retro pixel style images, so we have to stick with textures at this time unless we want to do a total redesign.

It looks like some rethinking might be in order on our parts LOL

Feel free to toss any more tips/pointers our way