Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

Managing multiple iOS resolutions with Starling – real world example

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.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (11 votes, average: 4.18 out of 5)
Loading ... Loading ...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 7 comments

  1. Gil Amran

    on August 13, 2013 at 4:44 pm

    I would suggest using DMT, a dynamic textures generator that would do the creation of the bitmaps on runtime (Only once).
    This way you will embed only the swf assets (Much small than pngs), and it will fit ALL the resolutions possible!

    Checkout the library here: https://github.com/XTDStudios/DMT
    Tutorial: http://gilamran.blogspot.co.il/2013/06/dmt-basic-tutorial.html

    Enjoy!

  2. kek

    on August 13, 2013 at 5:35 pm

    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.

  3. doomtoo

    on August 14, 2013 at 1:53 am

    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.

  4. Easy texture atlas and sprite sheet creation with TexturePacker - Emanuele Feronato

    on August 16, 2013 at 6:06 pm

    […] am currently using it in the games I am making, from the Circle Chain sequel to the iPad porting of 99 […]

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

    on August 20, 2013 at 5:25 pm

    […] thing you can do with Starling is to target all kind of resolutions in a single project. In the first step of this tutorial I showed you the basic principles of this method publishing for retina and non-retina iPhones, […]

  6. Jeff Ibacache

    on August 27, 2013 at 8:42 pm

    This is not the better way. Look at: http://wiki.starling-framework.org/manual/multi-resolution_development

    And consider to use contentScaling factor with Sprite package exporters that lets you to produce multisize quality textures. You are wasting a lot of if-else statements

    Cheers!

  7. Sergi

    on September 8, 2013 at 6:40 pm

    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)

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×