Managing multiple iOS resolutions with Starling – real world example

Emanuele Feronato Actionscript 3, Flash, Game design, iPhone, Starling

When making iOS games, you have to handle various kind of devices, starting from the iPhone 3GS up to the iPhone 5.

Every device has its own resolution, and you should be able to make one single version of your game which will fit in every iPhone model.

I am showing you how I am managing this in an actual project, the sequel of Circle Chain game I showed you in the post how to handle your Flash Starling animations using the Juggler.

It’s time to port such project on mobile devices and see how it runs.

Before doing this, if you are using Flash Professional it’s always good to check if your AIR version is up to date. So download the latest version at this page and proceed this way:

Go to Help -> Manage AIR SDK

Click the plus symbol and select the folder containing your recently downloaded AIR folder

Select the latest AIR version and click OK

Finally you are ready to taget the latest AIR for iOS version

Fron now on, when you have to publish for iOS, you’ll just have to enter your certificate and provisioning profile

If you don’t know how to get certificates, provisioning profiles or how to install your Flash projects to iPhone, follow the guide I made in the post Creation of an iPhone App with Flash and without a Mac (for all Windows lovers). If you have a Mac, it will be even easier.

The guide is 2 years old so the page layout in the Apple developer portal has changed a bit, but the process remains the same.

Now that you are ready, here is what we are going to create with Starling: basically it’s the same thing I made in the post how to handle your Flash Starling animations using the Juggler, with a Main class:

Look at line 6 how I am setting the width and the height of the 3GS model, 480×320.

And this is Game class:

Now it’s time to make them run on my various devices and see what happens.

This is the actual screenshot of my 3GS:

Everything looks fine. Let’s see my iPhone 4:

The image has been scaled down for blogging layout purpose, but it’s easy to see the game only covers a quarter of the 960×640 retina display. Things get even worse on my iPhone 5

Less than a quarter of my 1136×640 display has been covered.

That’s what you get when you target the non-retina 480×320 display.

We have to make some changes to Main class, this way:

Basically you are saying: no matter the width and the height of the stage (which continues to be set at 480×320), enlarge the content until it fills the entire screen.

This method is called upscaling and it’s the quickest, yet cheapest, way to fix the problem.

Look at the iPhone 4 now:

The game covers the entire retina display, although it remains a low resolution graphics. Same thing with the iPhone 5:

iPhone 3GS keeps working in the same way as before. Nobody forces you to look for a better solution, but retina iPhone owners tend to give negative feedback to games released in 2013 with no retina support.

Another idea would be to work with high resolution textures, target a 960×640 stage and downscale the game on 3GS iPhones. This way you will have retina resolution on retina models scaled down on iPhone 3GS models, which will probably run the game at an extremely low framerate due to their old hardware not able to handle high resolution textures.

What if we could read the iPhone resolution and load a different set of textures according to the model?

Change Game class this way:

In the script, I am embedding both retina and non retina images, check for screen resolution and build the textures accordingly. On the iPhone 3GS keeps working in the same way, look at iPhone 4:

The game covers the entire screen, but now it supports the retina display, look at the definition of the actual size.

Same thing for the iPhone 5

Almost the entire screen is covered with an high resolution game.

This method is robust and always works, but iPhone 5 users tend to give negative feedback if their bigger screens are not supported. Moreover, I am always working with twice the images I actually need. How to fix this?

Showing it to you next time.

Comments 7

  1. kek

    Hi Emanuele, thanks for your blog, i learnt a lot with it.

    I’m making a game for android & iOs, and all my assets are in flash library (vector graphics), at the launch of the game I scale them, and cache them to bitmap.
    With this solution, i don’t have to have “low def” graphics and “high def” graphics to manage. My game is quite simple, not a lot of graphics, no pixel art etc..
    Do you think it’s a good solution ? Working with a lot of resolutions is a real pain in the ass, i think the simplest way we find, the more we can focus on the game and the more creative we can be.

  2. doomtoo

    Supporting multiple resolutions? Ios is almost as fragmented as Android! ;)

    It’s always funny when people use that argument- any web designer even has to spend time supporting multiple resolutions.

    This is how I do it as well- basically scaling everything, and using higher resolution graphics when the resolution is above a certain amount (low, med and high res version of the graphics, if you care about keeping it sharp).

    Additionally, I’ve started trying to keep the UI roughly the same size, regardless of the resolution, but then you have need to take into account the dpi to get the final size, since some devices dpi varies quite a bit.

  3. Pingback: Easy texture atlas and sprite sheet creation with TexturePacker - Emanuele Feronato

  4. Pingback: Managing multiple iOS resolutions with Starling – real world example – Part 2: iPhone 5 and iPad - Emanuele Feronato

  5. Sergi

    Re “Nobody forces you to look for a better solution, but retina iPhone owners tend to give negative feedback to games released in 2013 with no retina support.”

    In fact Apple will reject your new application if it doesn’t support iPhone 4s/5 resolution (i.e. with block borders on the side)

Leave a Reply

Your email address will not be published. Required fields are marked *