A thought on mobile image resolutions

With 2D games sometimes deploying to multiple devices can be time consuming. It actually harder to deploy 2D games to multiple devices rather than 3D.

I have been thinking about this problem and I think I have a good solution. So let me outline the problem.

Let's say you want to make a game for iPhone and iPad. Right there there are 4 different screen resolutions

iPhone regular

iPhone retina

iPad regular

iPad retina

If you want a screen background you have to make the retina first then scale it down to the regular. The way game salad achieves this is that they take your image and re size it for you. I think this is a great approach. I recommend having an feature where you can click a re size to all iOS devices button that will do this for you. This way you can upload one image for any image with the bigger resolution and it will re size. The re size will be easy because it is exactly half from the retina to the regular.

This doesn't tackle the problem of androids. iOS developers complain about the screen resolutions but android has way more devices. Im not that familiar with developing for android so Im not sure what the best course of action is. I feel that screen size/resolution could be an issue. I also think that the scaling in android images are not that equal (1/2, 1/3 etc) so having the engine scale it for you would be a mistake because there will be too many unknowns to assure quality. My suggestion is that you could possibly have an section where you drag each resolution of each image that you made outside of C2 into C2 and depending on which device the game is played on it will use the respected image.

Anyway, just a thought.

It's an interesting idea, but I always thought it was best solved by simply designing for the biggest (iPad retina) and using the 'fullscreen scale' option to it scales down for all the smaller displays. Then you also have a single universal app that should work on any iOS or Android device regardless of screen size.

It does use more memory for the images, but on the other hand games which scale up sprites or zoom in will improve quality on the lower-resolution screens, which is a nice touch. It also is a true one-size-fits-all solution rather than having a myriad different options for each possible screen size out there.

Ashley

It's an interesting idea, but I always thought it was best solved by simply designing for the biggest (iPad retina) and using the 'fullscreen scale' option to it scales down for all the smaller displays.

Are you talking about 2048 * 1536? Will it not be a performance hit for weaker devices apart from the memory allocation? What if we also need to export it for chrome or facebook?

Wronghands - GPUs are so extremely efficiently designed for simple 2D drawing that I don't think you'll actually see much or even any runtime performance hit from using bigger textures. If you read our old blog post HTML5 gaming performance analysis, you'll note at least on desktop it takes longer to request the GPU to draw an image than it takes for the GPU to actually draw it, which means you can do a lot of scaling and rotating with zero performance impact. So memory usage/download size is the only issue.

As for Chrome and Facebook, since desktop displays go up to 1920x1080 which is only a little less than the iPad 3, it should be ideal for that as well.

Thanks for the clarification Ashley.

What if I'd need to develop for iPad3 and at the same time I need it to run for an old iPhone ( 480 x 320 )? So, considering this, how about the performance if I'd design everything for 2048 x 1536 but loading the graphic resources at runtime ( I believe that's possible using plugins ) according to the detected device ( BTW: is there a plugin to do that? ). If, for example, the iPhone is detected ( 480x320 ) and I load the resources prepared for it, then I stretch them programmatically but will also have the project set to scale mode so they'll be scaled down back to the iPhone screen resolution. Would that still affect the memory usage of the iPhone as it would when using large graphics ( prepared for iPad3 )?

i am in the middle of such a dilemma right now.

i have an ipad app, that i want to convert to iphone. i can't come to a reasonable solution to "stretch" the various 1024x768 ipad graphics elements into 960x640 iphone and still make them look right.

i would like to avoid having to redo all the artwork, and have to reimport 250+ elements and change screen XY positions etc....

xyboox, bjadams - have you tried using the fullscreen scale option I mentioned earlier in the thread? It should just downscale everything automatically. There shouldn't be any serious performance impact as long as it's hardware accelerated (as in, not PhoneGap).

bjadams xyboox I used to have similar problem but with Chrome Webstore and future Android publishment.

I'm really sure that actually the best option is to use the Fulscreen Scale mode with additions:

1. Take care about aspect ratios, that can be from 1.33 to 1,5+. You can not avoid to make the background images wider for the 1,5 ratio, and do it in a way it works (not kills the layout).

2. Use Archor behavior - to let some objects float to the left or to the right.

3. Somewhere in your menu/game screen you will need to have a streching area, what is 0% if played in 1.33 ratio and could be up to 13% of the screen width in 1.5 ratio.

My very first game - not an Angry Birds :) - uses this logic:

https://chrome.google.com/webstore/detail/eppldkeacbgnkjkabpnikmlnokknlcbc

This not just works on Chrome Webstore, but i have great results in 320x240px, 480x320px and 800x480px screens in Android (not published yet).

If you install it to Chrome, you can adjust the browser window with/height, and it will work from 1.33 to about 1.6 aspect ratio.

Ashley - of course I've tried the fullscreen ( which is a cool option, BTW ), but the problem, as nicely above, is the aspect ratio.

I'm glad to have found this thread. I'm designing my first game, "Psi vs. the Techno Zombies: A Cyberpunk Adventure" for iOS devices and PC and this is exactly the info I've been looking for. It looks like 2048 x 1536 is a good basic resolution, of course with the capacity to support various screen sizes and aspect ratios. Thanks everyone! <img src="smileys/smiley10.gif" border="0" align="middle" />

Ashley, two alternative solutions:

• a project supports multiple screen ratios (e.g. 4x3, 16x9 etc). So when a user defines a screen size, all possible screen sizes are shown in the layout with dotted lines. I guess a problem is that there would be an area on the layout which would only be shown on certain devices. However a user can design a layout with these areas in mind.

• it would be nice to be able to set the colour outside the window with letter scale. The default is black. If it was definable, I could at least make it fit with my colour scheme.

It's an interesting idea, but I always thought it was best solved by simply designing for the biggest (iPad retina) and using the 'fullscreen scale' option to it scales down for all the smaller displays. Then you also have a single universal app that should work on any iOS or Android device regardless of screen size.

It does use more memory for the images, but on the other hand games which scale up sprites or zoom in will improve quality on the lower-resolution screens, which is a nice touch. It also is a true one-size-fits-all solution rather than having a myriad different options for each possible screen size out there.

Hello,

I'm just digging into these game apps like game salad & construct and trying to get a grasp on sizes and resolutions to create game assets in. If I'm understanding correctly, having the various iphone, Ipad, retina choices, it's best to create art on a canvas of 2048 x 1536 at a resolution of 72 ppi? Then allow let's say Game Salad to scale the image based on device?

Thanks in advance for your help!