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 – Part 2: iPhone 5 and iPad

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.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (6 votes, average: 3.67 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 9 comments

  1. Gil Amran

    on August 22, 2013 at 11:36 pm

    Same problem, different (Much better) solution

    http://gilamran.blogspot.co.il/2013/08/dmt-circle-chain-example.html

  2. Sergi

    on August 27, 2013 at 10:21 am

    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.

  3. Jeff Ibacache

    on August 27, 2013 at 9:55 pm

    This isn’t 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!

  4. Donj

    on September 17, 2013 at 9:02 pm

    Sergi,

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

  5. Josh

    on September 25, 2013 at 4:01 am

    Emanuele gave a great example for people just learning about different screen sizes. It works just fine but is a bit redundant for OOP.

    As Sergi said,
    convert single frame vector assets to BitmapData at runtime.
    Then add them to Starling.

    As Donj said,
    MovieClips have a huge performance bottleneck.
    Instead of MovieClips, use Spine (http://esotericsoftware.com/spine-download/) or Dragon Bones (http://dragonbones.github.io/)

  6. faisal

    on October 2, 2013 at 8:22 pm

    if you change your rectangle equation with this one,

    viewport = RectangleUtil.fit(new 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.

  7. Jsl

    on January 21, 2014 at 11:56 pm

    Can I use movieclip isted of png (class extends movieclips)…

  8. dh

    on February 20, 2014 at 3:35 pm

    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)

  9. esdebon

    on February 26, 2014 at 9:13 pm

    dh, I have the same problem

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

×