This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
manual:universal_app_development [2013/05/29 12:58] – [iPhone 5] daniel | manual:universal_app_development [2015/01/29 09:42] (current) – [Universal App Development] daniel | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== Universal App Development ====== | ||
+ | Sparrow' | ||
+ | |||
+ | Before you start with your game, it's important to understand how this task is achieved. It's a simple process in the end, but it's a little hard to explain, so let me take you by the hand. | ||
+ | |||
+ | <note info> | ||
+ | When you create a universal app, this cheat sheet with the resolution data for all iOS models comes in really handy: [[http:// | ||
+ | |||
+ | And here is another compilation containing all the required " | ||
+ | </ | ||
+ | ===== The Challenge: Different Screen Sizes ===== | ||
+ | |||
+ | First of all: forget about retina displays for now. Just think of the first iPhone and iPad. We'll add the retina-complexity later. | ||
+ | |||
+ | The problem with universal apps is that the display resolutions between iPhone and iPad differ that much. The following image shows you how much: | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | The iPhone screen is just a fraction of the iPad screen -- less than one fourth of the size/ | ||
+ | |||
+ | For that reason, Apple recommends to create special user interfaces for the iPad. In conventional apps, that makes sense: just think of the Mail app. If Apple had simply scaled up the version running on the iPhone for the iPad, this would not have made much sense: we want to make use of the additional space! | ||
+ | |||
+ | Many games, however, are different. A game like " | ||
+ | |||
+ | ===== Step 1: Scaling Up ===== | ||
+ | |||
+ | Let's say our initial game was designed for the iPhone (320x480). Now we simply scale it up by two. Why two? Because that scale factor does not generate any rounding problems -- one pixel becomes exactly 4 pixels (2x2). | ||
+ | |||
+ | But how do we do that? As you know, all Sparrow content is rendered into an '' | ||
+ | |||
+ | Now here's the critical thing to understand: scaling up the '' | ||
+ | |||
+ | The Scaffold project already does that for you, of course. Here is the result of our efforts: | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | Now the size difference is not so bad, after all! Two issues remain, however: | ||
+ | |||
+ | - The graphics look blurry on the iPad, because we've simply scaled up our textures. | ||
+ | - We've got unused space at the right and bottom. | ||
+ | |||
+ | Let's tackle them one after the other. | ||
+ | |||
+ | ===== Step 2: Adding HD textures ===== | ||
+ | |||
+ | The first issue is easy to solve. Remember that Retina stuff I told you to ignore? Now is the time to add that to the equation. | ||
+ | |||
+ | By adding graphics with the '' | ||
+ | |||
+ | That should work just the same on the iPad, right? Well, bummer. When you start it up on the iPad, your game is still using the low resolution textures. Why is that? Because the iPad does not have a Retina display. Remember, the '' | ||
+ | |||
+ | Sparrow to the rescue! We can tell it to let the iPad **pretend** it has a Retina screen by starting it with the following arguments: | ||
+ | |||
+ | <code objc> | ||
+ | [controller startWithRoot: | ||
+ | </ | ||
+ | |||
+ | Note the " | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | Let's summarize what he have done this far: | ||
+ | |||
+ | * We have created our game with a stage size of 320x480 points. | ||
+ | * On the iPad, we let Sparrow render that stage into a 640x960 '' | ||
+ | * We added HD graphics for Retina iPhones. | ||
+ | |||
+ | <note tip> | ||
+ | A problem with all those graphics is that they are making your app rather huge, quickly, especially when you support the iPad 3. This is where compressed [[PVR Textures]] come in handy. Be sure to have a look at that section, as well! | ||
+ | </ | ||
+ | |||
+ | ===== Step 3: Filling the Gaps ===== | ||
+ | |||
+ | The image above shows that there is still one issue remaining: we've got two unused bars at the right and the bottom. What do we do with that? | ||
+ | |||
+ | ==== Quick & Dirty Solution ==== | ||
+ | |||
+ | The simple solution: center the game on the screen and add a black frame around the game. If you're satisfied with that, all you have to do is modify the file '' | ||
+ | |||
+ | <code objc> | ||
+ | - (void)render: | ||
+ | { | ||
+ | float stageHeight = Sparrow.stage.height; | ||
+ | | ||
+ | if (stageHeight == 512) | ||
+ | { | ||
+ | glEnable(GL_SCISSOR_TEST); | ||
+ | | ||
+ | float scale = Sparrow.contentScaleFactor; | ||
+ | float x = 32 * scale; | ||
+ | float y = 16 * scale; | ||
+ | float width = 320 * scale; | ||
+ | float height = 480 * scale; | ||
+ | | ||
+ | glScissor(x, | ||
+ | | ||
+ | [super render: | ||
+ | [support finishQuadBatch]; | ||
+ | | ||
+ | glDisable(GL_SCISSOR_TEST); | ||
+ | } | ||
+ | else | ||
+ | { | ||
+ | [super render: | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Agreed, some might call this a " | ||
+ | |||
+ | However, it's still much better than distributing the game as iPhone-only and give people the " | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | ==== Sophisticated Solution ==== | ||
+ | |||
+ | On the other hand, it would be nice if we could actually //use// the additional space. In many games, this is rather simple: we just have to align our user interface at the sides of the game area instead of hard-coding their positions in the 320x480 range. | ||
+ | |||
+ | In other words, we'll have to support two stage sizes: | ||
+ | |||
+ | * 320x480 for iPhone devices | ||
+ | * 384x512 for iPad devices. (Remember, we've scaled up the game //by two//, so we have to use //half// the iPad resolution!) | ||
+ | |||
+ | The scaffold project sets up your stage in the correct size already, depending on where it is started. All you have to do is align your objects depending on the size of the stage. | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | ===== Device Modifiers ===== | ||
+ | |||
+ | These guidelines make it possible to use the same assets for both the iPhone and the iPad most of the time. However, sometimes you still need to load different images, depending on the device your game is running on. This is where the so-called " | ||
+ | |||
+ | That's just an additional suffix that tells Sparrow for which device a certain image was designed for. Just add either " | ||
+ | |||
+ | < | ||
+ | image@2x~iphone.png | ||
+ | image@2x~ipad.png | ||
+ | </ | ||
+ | |||
+ | Sparrow will automatically load the image that is best suited for your device. | ||
+ | |||
+ | ===== Summary ===== | ||
+ | |||
+ | I hope you're still with me! In case you're feeling a little overwhelmed, | ||
+ | |||
+ | **But wait! What about more recent iOS devices?** | ||
+ | |||
+ | ==== Retina iPads ==== | ||
+ | |||
+ | Supporting a Retina iPad is quite simple: in the setup described above, just add another set of textures, with the suffix '' | ||
+ | |||
+ | Now we've got quite a number of different texture sets. Here's a lineup of devices and the textures they are loading: | ||
+ | |||
+ | * iPhone, non-retina: '' | ||
+ | * iPhone, retina: '' | ||
+ | * iPad, non-retina: '' | ||
+ | * iPad, retina: '' | ||
+ | |||
+ | ==== iPhone 5 ==== | ||
+ | |||
+ | The iPhone 5 has a different aspect ratio than other iPhone models, which means some additional work. It's not really difficult, though! Actually, the workflow is just the same as with a universal application. | ||
+ | |||
+ | * When the game is started, you either find a stage size of 320x480, then it's an old iPhone. | ||
+ | * Or you find a stage size of 320x568, then it's a new iPhone. | ||
+ | |||
+ | What you have to do now is design your interface in a way that it can cope with those different sizes. Some positions can't be hard-coded any longer, but need to be set in dependence of the screen size. | ||
+ | |||
+ | <code objc> | ||
+ | int stageHeight = Sparrow.stage.height; | ||
+ | |||
+ | // align " | ||
+ | myObject.y = stageHeight - myObject.height; | ||
+ | </ | ||
+ | |||
+ | This should be all of the information you need to optimize your game for all kinds of iOS devices. Good luck! | ||
+ | |||
+ | ---- | ||
+ | |||
+ | //Continue to [[Adding UIKit Elements on Top of Sparrow|Adding UIKit Elements]]// |