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

[SilverWarior]

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.

I thought so. That's why I mentioned option for programaticaly generating necessary textures during first run so they could fit best for target device. Now you don't need to redo all of the ingame textures this way. Only redoing textures which are then used for UI would probably be enough as I have a feling those are causing you most of the problems.

[WILL]

Hey all! Thanks for your advice so far.

To give everyone an idea of our design dilemma here are the 3 layouts (larger layouts are a bit older and not as up-to-date as the small one!) I came up with for phones and tablets on Android. The per-pixel specs on them is 800x480 for small and 1280x800 for the larger.

UI-Template-Android-800x480.jpg
800x480 1x scale Game Map (Small Android)

UI-Template-Android-1280x800.jpg
1280x800 2x scale Game Map (Android Tablet)

UI-Template-Android-1280x800-2.jpg
1280x800 2.25x scale Game Map (Android Tablet)

Now I know that these do not match up with what Google specifies as it's preferred dp sizes. However this is my problem. How can I make my layouts match up with what Google proposes, which to my opinion is a rather tiny scale of (dp) pixels, dots, tiny blobs of colour, whatever you want to call it. I need to display all 19x19 tiles and they are only 16x16 in pixel size so it's not like I can pretend to smoosh them into individual 8x8 or 4x4 dp space and imagine everything will be ok. The dp unit scale size they specify is just TOO SMALL to design a nice interface going with their numbers.

From the Android developer site:

As you design your UI for different screen sizes, you'll discover that each design requires a minimum amount of space. So, each generalized screen size above has an associated minimum resolution that's defined by the system. These minimum sizes are in "dp" units—the same units you should use when defining your layouts—which allows the system to avoid worrying about changes in screen density.

• xlarge screens are at least 960dp x 720dp
• large screens are at least 640dp x 480dp
• normal screens are at least 470dp x 320dp
• small screens are at least 426dp x 320dp

Note: These minimum screen sizes were not as well defined prior to Android 3.0, so you may encounter some devices that are mis-classified between normal and large. These are also based on the physical resolution of the screen, so may vary across devices—for example a 1024x720 tablet with a system bar actually has a bit less space available to the application due to it being used by the system bar.

I need to either limit stupidly small screens or fortify some kind of screen-space guarantee in the game code that I can fit 19 of my map tiles from top to bottom and still have a fair enough space on screen on either side to fit my virtual game controls. If I we can't hit *every* device under the sun, thats ok (people are smart enough to know what they are buying) as long as the ones our game does supports will at least look nice.

I'm quickly becoming "not a fan" of the Android platform because of this poor choice in target screen sizes. Can some Android dev rockstar post from this and change my mind?

[WILL]

Oh and no overlapping of the d-pads on the map!

The 2.25x scale mapping layout where I have the weapon select buttons is an exception because it's unlikely that I'll have important tiles in those spots, but that may change with my recent addition of game map features.

[SilverWarior]

Now I know that these do not match up with what Google specifies as it's preferred dp sizes. However this is my problem. How can I make my layouts match up with what Google proposes, which to my opinion is a rather tiny scale of (dp) pixels, dots, tiny blobs of colour, whatever you want to call it. I need to display all 19x19 tiles and they are only 16x16 in pixel size so it's not like I can pretend to smoosh them into individual 8x8 or 4x4 dp space and imagine everything will be ok. The dp unit scale size they specify is just TOO SMALL to design a nice interface going with their numbers.

Why is dp unit scale size too small? Small sized screens (2 to 3 inch in size) have athleast 426dp x 320dp units. This means that each tile could be 16dp x 16dp in size. (320dp / 19 = 16,84).
Now the number of actual pixels that each dp have depends on DPI and is calculated like this: px = (DPI / 160).

I need to either limit stupidly small screens or fortify some kind of screen-space guarantee in the game code that I can fit 19 of my map tiles from top to bottom and still have a fair enough space on screen on either side to fit my virtual game controls. If I we can't hit *every* device under the sun, thats ok (people are smart enough to know what they are buying) as long as the ones our game does supports will at least look nice.

So if you have each tile 16dp x 16dp in size tihs means that for rendering the map you would need 16dp * 19 = 304dp. This means that you still have 426dp - 304dp = 122dp combined or 61 dp of space on each side of the map for rendering your virtual controls.

NOTE: For my calculations I used dp resolution for small sized screens as presented on Android developr site. If I understood what is written there you need to request actuall dp resolution from the OS itself since some versions of Android OS can have their own permamently visible controls which would mean that you actually have less space available.


You see dp is actualy a new measuring unit (similar as inches, cm, etc.) which will tel you how big will your UI controll be on your device independently of devices DPI and screen size. So if you you place several devices with different DPI's and screen sizes and all of them have size for one control defined as 20dp x 30dp this controll would look the sime size on all of theese devices. Well there is suposed to be some smal deviation in actual size.
If you look at table defining dp sizes for different sized screens you see htat larger the screen is more dp it has (bugger surface).

The main advantage of using controls whose size is defined with dp-s is that OS actualy takes care about caclulating width and height of your controll in actual screen pixels.
Disadvantae of this is that one dp may actually be 1,5 x 1,5 screen pixels in size which would lead to quality loss when scaling images.

[Rodrigo Robles]

Many developers nowadays, including the market leaders, are using vector graphics, usually SVG files to get the best scaling effect. But in your case it will be not possible, because pixel art style does not match with vector graphics.
So it lets to you just two possibilities: create several versions of your graphics, increasing your development costs, or focus in just one resolution and accept the low quality of scaling.
Maybe focus in the low standard (480x320) can be a good idea, because pixel art style does not looks so bad scaling up.
But I'm sorry to say that this layout will be too small for small devices. You should seriously think about make the game fit almost the entire screen and overlap the touch controls.

[WILL]

Overlapping for our game causes more problems than it would solve.

Ex. should the player run under the left d-pad that is covering part of the left portion of the map, you would have to look under your thumb to see where you put your player. A situation that would not be wise should you encounter an enemy robot or rival player.

So overlapping is highly undesired from a designer's point of view. More UX chaos that should be avoided.

However, in an effort to not hand hold and allow for great flexibility, I suppose there is the option of creating default layouts based on scaled values and allowing users to pick from and customize UI element positions within the game somewhat like how OpenGL treats textures. 0,0 is the left,top corner while 1,1 is the right,bottom corner.

Providing enough layouts per each screen width:height ratio should allow the players to get a better UI layout depending on their various device screen dimensions. The only thing we can't control is if they have something weird like a 1:1 sized device that is really small and impractical to play a game like Subject 33 on it.

(Not our fault if you by a crappy/rediculus device! That's why we are releasing a free-to-try demo! amiright? )

[laggyluk]

idea: put hi-res graphics (or low res in this case) into the package and then scale them with image library (imagemagick?) at first launch, save for later. or if it's fast do it every time game starts