How to display a 2D image on every display resolution (Tablet, Phone, etc)?

Question

I've been programming for a while, but I just recently started to develop application for mobile and tablets. I'm using Marmalade for developing cross platform app for tablets and mobiles. But my question is more conceptual rather than technical.

First let me tell you a little bit about my app. I want to develop an app that introduce animals to kids. Each animal has a small story. I designed every animal in 1072 x 768 dimension. As all my design are vectors I can change the dimension of my graphics very easily.

My question is how should I develop my app to display perfectly on all devices? Retina display in the new iPad is 2048 x 1536, iPad 2 and iPad 1 resolution are 1024 × 768, iPhone resolution is 960 x 640, Samsung Galaxy Tab resolution is 1280 x 800 and so on (different devices (tablet or mobile) has different resolution)

There are only two options for overcoming this issue, AFAK:

1- Design multiple layout (960 x 640 and 1024 x 768) and based on every device switch to nearest resolution and stretch the layout on the screen. In this case a Galaxy Tab user will see a slightly deformed image and iPad 2 users will see a perfect image.

2- Rearrange layers of my graphic based on the display size, rather than having multiple fixed layouts to choose from. Implementing this is a little bit harder and I've to change my images to be slightly larger than 1024 x 768, so according to the final platform, I can reveal the hidden part if necessary.

What do you think guys? Which method I need to use? Is there any other way to overcome this issue?

Answer 1

After studying the topic more, I found a solution for my problem with different resolutions and aspect ratios. I want to share my plan with you, but please note this is not a general solution for the problem. It's only the way that I decide to deal with this issue for this specific project.

First of all lets take a look to see what we are dealing with. Here is a list of all common smart phones and tablets in the market. Using this article you can easily find the aspect ratio of each resolution.

After studying this list I realized that the biggest aspect ratio that I have to deal with is 16:9 (~1.77) and the lowest aspect ratio is 4:3 (~1.33). Also the biggest resolution that I have to deal with is 2048×1536 (iPad 3 or New iPad)

So I decided to design my graphics in dimension 2760×1536 which preserve 16:9 (~1.77) aspect ratio, but my important sprites and graphics only should place into 2048px (4:3 or ~1.33 aspect ratio or the lowest aspect ratio).

In other words my background fill all the 2760px width but my sprites and graphics that are essential and all users in all different devices must view it should placed in 2048 pixel width that preserve the 3:4 aspect ratio (lowest aspect ratio)

Then according to every screen resolution I only need to resize my graphics to fit into the device resolution. For an Android device with 1024×600 resolution (16:9 aspect ratio) I only should resize my graphic to the device resolution. For iPad 3, I don't have to resize the graphic at all. And so on. Also it's important that in all devices I show the graphics in center of the screen horizontally, because right margin and left margin of my screen don't contain any important graphic or sprite.

This answer also posted in Marmalade forum here.

Answer 2

I can't speak for Android, but iOS graphics rendering is resolution independent (on a per-device-family basis). Although, the main challenge you face is rendering your vector images, as iOS's image file of choice is the PNG. There is no built-in SVG renderer, but there is an attempt to try and remedy this (though gradients are not supported at all). Implementations based in CoreGraphics or UIKit will render a 1024x768 image in 1024x768 points regardless of whether the screen may hold 2048x1536 px because it operates in points and not pixels.

Although you are right, there will need to be come changes for certain form factors (you would need at least 2 for iOS based devices, and maybe 3 or four for the android form factors). You wouldn't necessarily have to design graphics tailored to the exact specifications of the screen, rather support the various aspect ratios.

Answer 3

If you are just developing for the iOS, you can disable the native resolution support while creating the ipa. This option will let you display a 2x button on iPad, which will stretch your app and if you've used vector graphics, it'll look fine.
Another way could be to use different assets for different screen size, just like what I used to do in Android.