Trying to figure out how to match aspect ratio on mac to android

Question

I'm making a shape matching game for toddlers. I drew the shapes using gimp on my mac.

The images all seemed stretched out on the android devices.

Is there some mathematical way i could figure out how much shorter I have to make the images on the mac computer so they look correctly on the android devices?

Answer 1

This is a tough question. I have made several Apps for iOS and have pretty much the same problem with graphics for buttons and backgrounds when going between iPhone and iPad, which have different aspect ratios (which I suspect is the problem you are having). Throw orientation into the mix as well.

I use Gimp, Inkscape, Spine, Cocos2d-x, and lots of other tools for reference (see here).

As far as I know, the general options for "different screen geometry" issues are (if there are others, let me know):

1. Different graphics for each geometry.
2. Scaling the graphics proportionally for the geometry (I suspect you have this).
3. Same graphics for all, scale proportionally based on one dimension and then place graphics on screen using percentages for fixed stuff.

Option 1 means extra work...not acceptable for a hobbyist or indie (like me) developer. Option 2 usually looks like junk. Frustration and sadness usually ensue. Option 3 is the option I use most often. I find that occasionally I have to add small changes (read: hacks) based on the device or geometry. In the case of iOS, it is not too bad, because there are only two geometries to deal with. In the case of Android, where there are lots of different tablet geometries, you could cut it down by working with ranges of geometries and picking a fixed orientation for your application.

At the end of the day, proportional scaling by a single dimension (height or width) has gotten me the most bang for the buck.

I usually make the graphics a little "bigger" than I will need so I only have to scale down. This consumes a bit more memory, but I re-use a lot, use sprite sheets, etc. There is a definite tradeoff with managing every bit of memory (which you have to do in a large AAA rated game) and what you can get away with in a small independent application. I am not encouraging sloppiness or memory mismanagement; I'm encouraging balancing the resources against the developmental needs of simplicity...making the same graphics for different situations burns a lot of daylight.

ONE MORE NOTE: For applications where I use a framework for the graphics (i.e. games), I use a "viewport" to let me match up the physics with the graphics...that is to say, dynamically scale the size of the graphics based on how much of the total scene I want the user to see. This lets me put the graphic for the "body" on top of it and match up the size statically or dynamically as needed. The code is in C++ and is only loosely tied to the framework...and the concept is applicable to general situations for games (i.e. scaling the graphics as needed). You can find some description and code here, if you are interested.

Was this helpful?

Answer 2

You need to design your application so that it can function correctly regardless of device resolution as many mobile devices have many different aspect ratios and resolutions.

If your images are being stretched then you need to change the ui design so that they are enlarged and spaced out to make use of whatever space there is.