Scaling for iPhone 5 and iPad - HOW TO DO IT RIGHT
(Perhaps a mod could make this sticky?)
So I've noticed a lot of people aren't sure quite how to use the scaling options in the exporter to get their game to fit the different screen ratios between the 16:9 screen of the iPhone 5, the 3:2 of the previous models, and the 4:3 iPad. The latest beta versions of the exporter (and thus build 256 when it is out) have several different scaling options but some people are finding the descriptions slightly vauge and may not have all three different types of device to test on, so I've written this article to make it clear.
So, you're building a game which you want to be universal, or perhaps you just want to take advantage of the iPhone 5's new wide screen without gaining unsightly black bars when played on an older iPhone. So how do we pull it off?
Firstly, you need to understand how the iOS Exporter's 'window' works. By default (and on every build up until 256 Beta 5), the exporter displays your game within a window the size of which you set in MMF2 (960x640 is most people's favoured choice, the size of the iPhone 4), then scales it up (or down) until two sides hit the edges of the device, meaning that on iPad (and now iPhone 5), the whole screen is shown with black bars (known as letterboxing or pillarboxing) filling in the extra. Think of it like watching a widescreen DVD on a non-wide TV, or vice versa. I'm going to demonstrate this using this lovely picture of Sonic:
This picture is the exact aspect ratio of the iPhone 4 (3:2), so, if you use build 255 or earlier, or leave build 256 on default settings, here's what will happen:
iPad:
iPhone 5:
The image retains its aspect ratio and no information is lost off screen. In build 256+ this option is known as fit inside, and it is the default setting.
If you're happy with this style of scaling, you can go ahead and leave your game be and it'll all work that way. However, most of you are in this thread because you want to be a little bit more professional and take advantage of the different aspect ratios, so read on.
How to make your universal game scale properly
Firstly, before you do anything else, it's important that you upgrade to the latest build of the exporter! At the time this article was written, a stable build 256 is not yet out, and build 255 doesn't implement these options, so you need to grab the latest Beta version which introduces these features. To do this, you need to register your iOS Exporter on the forum. Just go to your settings page and paste the serial code into the box under 'My Products' and click the 'Add New Product' button. This'll give you a nice icon under your username on the forums, but more importantly you will get access to the Owner's Lounge. From there, you can download the latest Beta. Note that Beta versions are in testing, so there may be a couple of issues or glitches, but as of the writing of this article, build 256 Beta 6 is very stable, to the point that we are expecting the stable release to have barely changed from it, so go grab it! If build 256 is out by the time you read this, then sorry for the useless paragraph...!
Now that that's out of the way, let's get started! So, unless you want black bars or for your app to stretch/distort to fit and distort the images (not recommended, it may not be a problem to you but a lot of gamers hate stretched/distorted graphics), there are two methods! Read both to decide which you think is best for your game.
METHOD 1: THE CROP
The age old method, the easiest, and the best one to use on a game you've already built and are updating. This is the iOS Exporter equivalent to hitting the 'zoom' button on your TV when the film doesn't match your aspect ratio. This is best used if your game only scrolls on one axis and has a set height (or, if your game is a vertical scroller on a horizontal screen with a set width, use 4:3 instead of 16:9).
Firstly, you need to set your window size to 1366x640 (the iPhone 5 resolution) or any resolution with a 16:9 ratio. Here is that lovely Sonic picture at that ratio:
Then you need to use the scaling option "fit outside". Fit outside is the opposite of "fit inside" in that it scales the image up until it completely fills up the screen, cutting some information out. Here's how it'll look:
iPhone 5:
iPhone 4:
iPad:
See how much more professional that looks?
This is the easiest method to work with, particularly for sidescrolling games, and also the best for adding in to any game you've already made due to having the same vertical height on all devices.
There are some disadvantages to this method, however. For one thing, notice how much less an iPad user is able to see, despite the fact that he has the biggest screen of all. If you have a sidescrolling game with a lot of detail, iPad users may feel that your game is too 'zoomed in' and that they don't get much of a viewing area, much like when Master System games used to appear on the Game Gear, only this is actually zooming in further on the larger screen.
There's always the option to do the opposite of this, for example you could create a game in 4:3, which would crop away the bottom of the screen on iPhones, but you'd need to ensure you enabled vertical scrolling if your game is a sidescroller, and then the people who bought the iPhone 5 for the extra screen space would actually be at a disadvantage, which seems unfair.
Also, be sure to note that this method does not just zoom in and cut off the sides - it actually resizes your application window, meaning the data you lose will be from the right hand side of the screen, but scrolling will still work perfectly, so this can easily be remedied by adding an event to simply centre the camera in the middle of the frame in any non-scrolling frames. You should all know how to do this.
If you are just starting your game or are early enough into development that you can afford to go back and make some changes to your frame layouts, method 2 is ideal.
METHOD 2: EXPANDING THE FIELD OF VIEW
Although a little more complicated, this is in many ways the ideal method for any game which uses both horizontal and vertical scrolling without any set 'rooms', as the iPhone 5 and iPad users both get to take advantage of the larger screens they bought their devices for.
For this method, you need to start with a 960x640 window (or any resolution with a 3:2 aspect ratio), which is that of the iPhone 4, but your frames must be at least 1136x768 (or equivalent matching your resolution).
^ The red indicates the edges of your application's 960x640 window. The paler area is the rest of the frame.
With that sorted, the next step is to choose the scaling option "fit inside and adjust window". What this little beauty does is the opposite of the above. It actually scales until two sides touch the edge (like with the default "fit inside" option) and then enlarges the window to fit on the other axis, displaying more of the frame. Here's what you get:
iPhone 4:
iPhone 5:
iPad:
^ Once again, the red indicates the edges of the original 960x640 window and the paler area the rest of the frame. The game itself will not show any kind of divide.
With this method, the iPad and iPhone 5 users both get to take advantage of their device's bigger screen. The iPhone 5 will give the player more horizontal information, and the iPad will give more vertical information, meaning both 'larger screen' devices will show more of your game. The's no real advantage to using this method for an iPhone-only game, but for a universal game this means iPad users don't get the short end of the stick despite choosing the bigger screen. Like with the previous method, this resizes the application window at startup, so the extra detail will be on the right hand side for iPhone 5, and at the bottom on the iPad. As the window has been resized, scrolling will still work perfectly, so you ensure that any non-scrolling frames (i.e. title screens and menus, or the whole game if non-scrolling) have an event to centre the camera in the middle of the frame.
OTHER OPTIONS
The exporter also provides the "stretch to fit" option, which is not recommended as it will distort your graphics. For example, a 3:2 game would have the characters appear unusually short and fat on the iPhone 5, and tall and thin on the iPad. Some people don't mind this, and some games can actually work this way, but generally it isn't ideal, and it also can cause a performance hit which doesn't happen in the other methods.
There are other options, but these are mainly for testing purposes and shouldn't really be used unless you really know what you're doing. Both the "centre" and "centre and adjust window" options leave your game at its original resolution regardless of your device and either add a black border (if smaller than the device's screen), zoom in (if larger) or show the rest of the frame. The huge problem with this is that between the iPad 2 and 3, and the iPhone 3GS and 4, the device resolutions double, so if your game was built at 960x640 it'd appear double the size on the iPhone 3GS, or if at 1024x768 it'd be absolutely tiny on the iPad 3. Unless you have created a complicated app which scales everything accordingly, these options are best avoided.
RE-POSITIONING YOUR HUD
So here's the next thing. Whichever of the two methods above you've used, you're going to notice that some of your HUD stuff will need moving. If you just have lives and score information on the top left, you don't have a problem, but it's the right-aligned stuff (and stuff at the bottom of the screen if using method 2) which needs dealing with.
This is easier to do than you might think, thanks to a lovely built in feature which lets you detect the positions of the window edges. These are expressions found in the storyboard controls object (the one which looks like a chess board), under the 'Frame' sub menu, the two we need are X coordinate of right visible edge and Y coordinate of bottom visible edge.
It's simple really, just take any counters, custom virtual buttons (MMF's own buttons should do this automatically for you) or other objects which are at the right side of the screen and add add this event:
Start of Frame: Set X co-ordinate of (Your Object) to X Right Frame - 50
Where 50 is however many pixels from the right of the frame you want it to sit.
If using method 1, you're done. If you're using method 2, you should now do the same with the objects at the bottom of the screen, but with Y coordinates and the bottom of the frame.
NON-SCROLLING GAMES AND MENU SCREENS
Single screens are easy to deal with. Just make sure they are the maximum window size (1136x640 for method 1, 1136x768 for method 2) and ensure you keep everything important in the middle (an area the size of your application window). Then add this event:
Start of Frame: Center window position in frame (When prompted, place the cursor exactly in the centre of your frame or manually set the numbers to half of your frame's width and height).
If your game is single screen, try to either confine everything to the original size of the window, or adjust your events so that they refer to the edges of the window (those lovely conditions we used in the repositioning your HUD section). A game like Fruit Ninja should be fine to give a little more playfield space to users with bigger screens, but more competitive games may give an unfair advantage to those using a larger device unless things are properly balanced. Many games simply use the iPhone 4's screen area for the gameplay and just extend the backdrop over the extra space the larger devices provide. You could even add a border if you wanted to.
When adapting AWESOME Land (as of this article's writing, the update is waiting for review), which was built entirely around 960x640, I ran into issues such as non-scrolling boss rooms, which, on the iPhone 5, ended up giving the player the ability to 'hide' from the boss just outside of the boss room thanks to the wider screen, and on the iPad became too thin (I had used method 1) making the boss battle much harder. These are the kind of challenges which you just don't think about when re-cropping a game, and MANOS has presented me with one even worse. All I can suggest is that for all of your future projects you consider that it will be running on different sizes (maybe even ones other than the current three thanks to the Android exporter and potential future Apple devices) before including such features.
So hopefully you guys now understand how the scaling works, and what great options Clickteam have provided us with for adapting our games to the different screen sizes. Any questions or comments, please add below!
