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

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

One of the most interesting 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, using high resolution textures on retina devices and low resolution textures on non-retina iPhones.

Now it’s time to complete the tutorial showing you how to create full screen iPhone 5 Apps as well as iPad, iPad mini, and Retina iPad Apps, every device with its own resolution and with proper fullscreen support.

This is the final result of using this technique on the upcoming Circle Chain sequel, you should already have seen this photo if you are one of my Facebook fans:

You can see an iPhone 3GS, an iPhone 4, an iPhone 5, an iPad and an iPad 3 all with their proper textures, working in fullscreen – even the “I have a weird resolution” iPhone 5.

Know your enemy

Before we start, we have to know all iOS resolutions, which are, in landscape mode:

iPhone 3G and 3GS: 480×320

iPhone 4 and iPhone 4S: 960×640

iPhone 5: 1136×640

iPad, iPad 2 and iPad mini: 1024×768

iPad 3 and iPad 4 (called iPad with retina display): 2048×1536

Working with full screen height and width will mean to work with different stage sizes: so the first thing is to define such stage sizes. You can simplify the whole process this way:

480×320: iPhone 3G, iPhone 3GS, iPhone 4 (with textures rendered at twice the resolution) and iPhone 4GS (with textures rendered at twice the resolution).

568×320: iPhone 5 (with textures rendered at twice the resolution).

512×384: iPad (with textures rendered at twice the resolution), iPad 2 (with textures rendered at twice the resolution), iPad mini (with textures rendered at twice the resolution), iPad 3 (with textures rendered at four times the resolution) and iPad 4 (with textures rendered at four times the resolution).

This way we grouped 10 devices with 5 different resolutions in just three stage sizes.

This is the main class, look how I am setting Starling view port to full screen width and height while keeping stage width and height in a lower resolution:

Now, Game class should include all images in all different resolutions, loading the proper textures according to device type.

You can also see how I am placing the assets in different positions according to device resolution. setupDevice function (lines 90-112) tells us which device we are dealing with, then the whole function is not that different than the one I showed you in the first step of this tutorial and everything becomes something like making an HTML page with a fluid layout. You shouldn’t work with absolute, hard-coded assets placement, but rather rethink the layout according to the current screen size.

iPhone 5 fullscreen bug

Well, I don’t really know if it’s a bug for real, but actually this code won’t work on iPhone 5 because its resolution won’t be recognized, unless you include its App launch image.

It’s basically a 640×1136 png image (in portrait mode even if you are working on landscape mode) you will call Default-568h@2x.png and include in your application files.

And finally you will be able to have your App running in full screen on ALL iOS devices.

Next time I will show you how to load textures dynamically rather than embedding all of them (even unnecessary ones) at once, and will release the source code.

From null to full HTML5 cross platform game

I will take you by hand from the bare bones of JavaScript programming through the creation of a full cross platform HTML5 game, with detailed explainations and source code.

If you don't know where to start, then From null to full HTML5 cross platform game is the book for you.

Comments 9

  1. Sergi

    I’d suggest design interface in Ilustrator as vectors, import to Flash as movieclips and then convert vectors to bitmaps in runtime with desired resolution scale. You see what I mean — no need for developing assets for all resolutions. It’s just one single swf asset file, with scaling applied in runtime.

  2. Donj


    The title say “iOS resolutions with Starling”, vector image don´t work in Starling, because get low performance, the MovieClip class is to heavy.

  3. faisal

    if you change your rectangle equation with this one,

    viewport = Rectangle(0, 0, customWidth, customHeight), new Rectangle(0, 0, stage.fullScreenWidth, stage.fullScreenHeight), ScaleMode.SHOW_ALL);

    _starling.stage.stageWidth = customWidth;
    _starling.stage.stageHeight = customHeight;

    and just set customWidth and customHeight in your switch case above this equation, the design look will be more smooth.

  4. dh

    Thanks for this example.
    Managing different screen size works in my project, however, once I add box2d to it, the physics is just messed up. Probably has to do with the scaling?! I have not figgured out what the problem is yet. I have searched the web but not found a solution to my problem either.
    Basically dynamic physic bodies do not move correctly, properties applied to them do not seem to work correctly and trying to click (touch) them throws errors. So I would assume that the coordinate system is messed up.
    If I devide the position of the image in the enterFrame by the starling scaleFactor, movement of bodies is somewhat better but still not correct and static bodies suddenly appear at a totally different spot on the screen (as in: sprite.x = b.GetPosition().x * 30 / scaleFactor)
    Would you have any advice on how to solve this problem? Thanks! (btw I’m not using citrus)

Leave a Reply

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