Fragmentation is for Androids - or is it?

I won't get on my soapbox quite yet (although I do have a fair bit of natural height anyway) but all this talk of Android fragmentation seems fairly churlish when the iOS has 4 different screen resolutions and numerous specs of device (ok, I know technology moves on and devices have to be left behind at some point, I'm just making an ill conceived point), ahem, but how do we deal with all these different devices?

I feel a bit bad actually, up above I mentioned 4 screen resolutions but technically its only two resolutions, but with different pixel densities. We have the iPhone (480*320) and it's big brother, the twice as big iPhone Retina display (960*640) running at a screen ratio of 3:2. Then we have the iPad (1024*768) and it's double trouble super res Retina version (2048*1536) running at an annoying 4:3 ratio.

We can account for standard - retina displays very easily, in fact, cocos2d does it for us by using "points", but accounting for iphone - ipad displays are a bit more difficult before of the difference in screen size and the annoying problem of the different screen ratio. This post here helps us think about our positioning a bit more, but the simple fact is tat you are going to have to think long and hard about how different your game is going to look between the two devices. Bordering? Repositioning? Showing or hiding more of your play field? I couldn't possible offer one single piece of advice because everyone's game is different. I think we're going with repositioning UI elements and showing more horizontal space on the iPad to the iPhone.

Ok, we haven't fully finished with repositioning, that was just food for thought, but now is not yet the time for more of that, I will be coming back to it later though.

One good thing about all these 4 resolutions over Androids method of any res fits all, is that we can really target each res making our games look great, we do this by creating assets for each resolution. Now, I have been researching this for hours and have had to trawl through pages of forum posts, blogs and bad documentation, most of it out of date, so before you start taking what I'm saying as gospel, look at the date of this post and decide if the time difference means things could have changed, if so time for more research... rule of thumb, if you own a flying car and your dinner consists of a meal in a pill, then stop reading.

It is also important to say that this advice is only useful if we are on the same page, the page being "Cocos version 1.1 beta 2b" anything before this and we are talking different languages. I say that because all the early forum posts I found were discussing hacks and dark art methods of loading in images based on the hardware you are running. From version 1.1 beta-2b everything has got a lot more clear.

Essentially to target a particular screen you simply have to append your image filename with certain suffixes, the file loading doesn't change, just the names of your files.. so here we have a line of code to load a background image:

CCSprite *bg = [CCSprite spriteWithFile:@"MainMenu/mainmenubg.png"];

and here we have a list of files in the foler, MainMenu:

mainmenubg.png
mainmenubg-hd.png
mainmenubg-ipad.png
mainmenubg-ipadhd.png

See the pattern? Each suffix is good for loading a particular file. Now what you put in those files is up to you, nothing will be scaled or repositioned, just shown as is. In this case each image is the same size of it's counterpart resolution meaning I get crystal clear display, which looks very special, trust me.

So, what can you take away from all of this? How about... upgrade to 1.1 beta2b NOW, think about ratio differences, think about scaling your positions between iPhone and iPad, make sure your assets are big enough for that MAHOUSIVE iPad Retina display (hope you used PNG's) and get used to having your iPhone version being a lot bigger in size to the Android version.