Skip to main content
M
mrwizzer2
Inspiring
June 27, 2013
Question

One Size Fits All? (Stage size for best display on iOS and Android)

  • June 27, 2013
  • 3 replies
  • 6963 views

I'm beating my head against the wall trying to find the one proper stage size that will accommodate all iOS devices and all Android devices adequately.

I've been following Colin Holgate's informative posts and am using the   stage.scaleMode = StageScaleMode.NO_BORDER;  approach.

However, I'm not sure what I should be setting the dimensions of my stage to, as the suggestions I found of Colin's seem to be prior to the release of iPhone 5 and the iPad retina display.

Can anyone recommend a stage size that would work best in trying to accommodate the wide variety of devices out there?

Many thanks in advance!

Mike

    This topic has been closed for replies.

    3 replies

    X
    xTLS
    Inspiring
    June 30, 2013

    I take it you have considered programming a dynamic interface and decided against it? I've worked on a few cross-platform apps and used the resize and orientation events to arrange the contents to fit the current screen dimensions. I've found it is a lot of fun to make a fluid layout and not overly difficult if you start the project with that in mind, but of course the feasability depends on the app

    Colin Holgate
    Colin Holgate
    Inspiring
    July 1, 2013

    A lot of what we do involves graphical scenes, and character animations. In some cases I do move elements around with code, to make them hug the edge of the screen the app is running on. But I can still use the advantages of show_all for all other aspects in the app.

    Here’s one recent app, which has an update waiting for review at the moment:

    https://itunes.apple.com/us/app/thomas-friends-lift-haul-collection/id641291615?ls=1&mt=8

    Here’s a new app, waiting for review, which hopefully will be live in a few days:

    https://itunes.apple.com/us/app/thomas-friends-lift-haul-collection/id 666984904?ls=1&mt=8

    Both of those use show_all. This one uses no_border:

    https://itunes.apple.com/us/app/milkshake-mayhem/id556962979?mt=8

    You don’t need to buy the apps to see the difference, just look at the sample screenshots, and compare the iPad and iPhone 5 ones.

    M
    mrwizzer2Author
    Inspiring
    July 2, 2013

    Thanks Colin, and everyone, for your suggestions.

    The problem I'm running into when exploring your advice is that our layout is a more standard type of layout with a defined top and bottom, (namely, a banner with navigation buttons at the top and another banner at the bottom).

    Colin, your samples don't seem to involve these kind of "picture frame" type of layout restrictions, they appear to be more free form on the stage.

    I've experimented with setting the placement of the top and bottom elements dynamically, but everything I've tried seems to provide it's own problems, elements being cut off in one direction or the other, for example.

    My best results so far seem to derive from having a stage size of 640x960 and NOT setting any kind of stage.scaleMode.  This way, on both the iPhone 5 and the iPad, the layout seems to work nicely, with the one caveat that there's some letterboxing going on on the iPhone 5, (black bars at top and bottom). 

    Also, I didn't notice anyone mentioning the need for a "Default Image" named "Default-568h@2x.png".   I've found that's the only way to get the iPhone 5 to display full screen without the letterbox at top and bottom.  Is there a different method to achieve this, or is it just taken for granted that that's a requirement?

    1
    12345abcdefghi
    Inspiring
    June 28, 2013

    Try

    stage.scaleMode = StageScaleMode.EXACT_FIT

    If your stage size is 480x320 and it is being displayed on an ipad 1 res it will appear slightly taller than it is wide. There are other more elegant ways to do this but nothing simpler.

    Colin Holgate
    Colin Holgate
    Inspiring
    June 28, 2013

    That approach will end up distorting all of the content, and changing from a 16:9 to a 4:3 will be very noticeable. Even changing from 14:9 to 4:3 isn’t ideal.

    But, it still would be interesting to test.

    Mark.fromOP
    Mark.fromOP
    Inspiring
    June 30, 2013

    I use Colin's approach and set my stage to 1024 x 600, so far this has worked wonderfully even on HD displays like iPad 4th gen.

    Colin Holgate
    Colin Holgate
    Inspiring
    June 27, 2013

    When using no_border I set the stage to a ratio of 14:9, so for example 1680x1080. Your entire content fills that stage, and iPhone 5 users see the middle 16:9 part, and iPad users see the middle 4:3 part. So, iPhone 5 users miss a bit of the top and bottom, and iPad users miss the left and right. You would just make sure that the import stuff was not too close to the edges.

    If you try this app I made:

    https://itunes.apple.com/us/app/milkshake-mayhem/id556962979?mt=8

    on iPhone 5 and iPad, you’ll see how extra parts of the scene become visible.

    The other way to work is show_all. For that I use a 16:9 stage and have extra content off the top and bottom of the stage, or I use 4:3 stage, and have extra content off the left and right. That extra content then gets revealed on wider or taller devices.

    Here’s an example of a 4:3 app that has extra stuff to the left and right of the stage:

    https://itunes.apple.com/us/app/meet-heckerty-funny-interactive/id514220257?mt=8

    and here’s a 16:9 app that has extra content above and below the stage:

    https://itunes.apple.com/us/app/thomas-friends-lift-haul-collection/id641291615?mt=8

    The first two apps are free, that last one is $1.99.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices