Skip to main content
D
Developer2011
Inspiring
September 27, 2012
Question

Device Dimensions/Resolution... so many choices!

  • September 27, 2012
  • 7 replies
  • 2200 views

    I recently was informed by Barnes & Noble of their soon to be released Nook HD devices. Shortly after they reviewed all of my existing apps, reporting back if they were compatible or not. Given the skew of the new resolution sizes, my apps 'didn't scale up properly', as stated in the report; which came as no surprise. I've been researching all of these various tablets & devices... their new resolutions, sizes, and other specs. I get the idea of creating an HD device, but why not create a perfect scale of previous resolution?

Their whim to skew the resolution has become a pain in my... eye ! I'd like to avoid the headache of scaling every single element in an app in order to fit whatever resolution exists... or will exist.

    I'm beginning to think I develop a different way than most, by what I've read when researching scaling. Using Flash CS6, I lay everything out on the stage, as opposed to dynamically building my apps from the library, unless a need requires it. I don't scale anything in my app or use any stage width/height actionscript anywhere. Everything is displayed in an app as it was originally laid out on the stage.

    I've got a few questions: When full screen is selected in Flash, apps automatically scale up for larger devices... but do they scale down? Say I create a perfect 2x larger scale of the 800 x 480 Android app @ 1024 x 614. Will the app automatically scale down to fit a 800 x 480 resolution device? Has this been tested by anyone yet? I will test this myself when I have availability and report back here unless someone has done so already. I'd like to have my apps be their best resolution possible, but don't want to lose backwards compatibility.

    My next theory: The Nook device resolutions are as follows: Nook HD+ 1920x1280, Nook HD 1440x900, Nook 1024x600. None of these are a perfect scale of each other . When apps scale up to 'full screen' they dont skew, as noted by the app reviewers, my app displayed letter-box style with black space on either end. My thought, if a 1920x1280 app auto scales down for the next device resolution (1440x900 for example), how till that scale? Will it scale to fit the largest of the dimensions (1440), or the smallest (900)? If 1440, it will scale to 1440x960, otherwise, it will scale to 1350x900. If an app is larger than the display resolution, will it fit itself to the top left corner, or center itself?

   

    Is there a way to get the dimensions/resolution of the device itself, as opposed to whatever the 'stage' size is that you created in Flash? If possible, maybe it would be easier to create a movieClip of the background and scale that based on the device stage/width and let the rest of the app elements scale itself? Yet, how would scaling the background affect the auto-scale of the app...

    I'm probably way overthinking this; thats my gift and my curse; over-analyzing. If there is a shorter/easier way of scaling an app to compensation for the latest skewed resolutions, so an app stays backwards compatible, please share! I imagine there are many others looking for answers. Adobe AIR app development is getting a little hairy!

This topic has been closed for replies.

7 replies

D
Developer2011Author
Inspiring
September 28, 2012

(NOTE: I tested this in portait mode, AIR for Android 3.2)

Ok folks, to those interested... I've been testing a few things out over the last few hours. I'll try to explain as best I can, but it may be a little confusing.

If your app background is completely independent from your app itself, meaning your background is just a fancy backdrop for overlaying content and not actually a playable part of the game (no characters running on the background images of land itself); this solution may be for you to get your devices running on these new skewed resolution devices. Granted it won't have all the contents of the app full screen as intended, but it will take care of the empty space off stage when your app is scaled to fit.

I've determined a few key items when full screen mode is selected:

  • if the app is a perfect scale (eg. 480x800 scaled larger to 960x1600), even if larger than your device capabilities, the app will scale down to fit. Although, I'm not sure how this will affect fps while running on devices.
  • if the app is a skewed scale (eg. 480x800 scaled to 500 x 1500), the app will scale to fit it all on screen while maintaining the aspect ratio. 1500 will scale down to squeeze in the 800.
  • if scaled down with a skewed ratio, the stage of the app will center itself on the screen - giving that letterbox appearance previously mentioned.

Note: Capabilities.screenResolutionX & Capabilities.screenResolutionY //RETURNS DEVICE RESOLUTION

Now for the tricky part. The stage scales to fit, so your background movieClip scales with it. Any hope of scaling the background height & width to be the Capabilities.screenResolutionX & Capabilities.screenResolutionY sizes went out the window. BUT, it had to be a problem of figuring out the mathematics!!

I was able to figure out the following... since the app scales itself to fit all on screen... at least one size, height or width, will ALWAYS cover the entire length of the screen regardless of device resolution. You can easily set this by backgroundMovieClip.width = stage.stageWidth;

The problem is half solved! Now to scale the background movieclip to fit the other dimension: backgroundMovieClip.height = Math.round(Capabilities.screenResolutionY * (stage.stageWidth/Capabilities.screenResolutionX)) + 1; should do the trick. I added the 1 to slightly stretch the background for a better fit when centering (as we're dealing with fractions at this point).

Now that the size is ready, the following code will take care of the positioning of the background to center it perfectly:

          backgroundMovieClip.x = 0;

          backgroundMovieClip.y = (-backgroundMovieClip.height + 1 + stage.stageHeight)/2; (this will always be negative in order to offset correctly, as its now larger than the scaled stage)

You can catch the exception (if the height covers the length of the screen as opposed to the width), by running to check if the above mentioned number is positive and switching X with Y and Height with Width where applicable:

     if(backgroundMovieClip.y > 0){

               backgroundMovieClip.height = stage.stageHeight;

                      backgroundMovieClip.width = Math.round(Capabilities.screenResolutionX * (stage.stageHeight/Capabilities.screenResolutionY)) + 1;

                      backgroundMovieClip.x = (-backgroundMovieClip.width + 1 + stage.stageWidth)/2;

                      backgroundMovieClip.y = 0;

     }

I've tested this with several crazy stage sizes and scaled to fit on my 480x800 Android device and its worked perfectly. The background movieClip always covers the entire screen. However, I have not tested this with a completed app as of yet, but I imagine it should work just as well. I recommend testing this out, again, if your background is completely independent from your app, and doesnt have any content/images that you don't want skewed when its resized to fit the screen. Tweak the code as you see fit. Maybe there is a better solution. Maybe I havent caught every exception. Feel free to share here if you'd like. Hopefully this will smooth out any compatibility issues in the future.

If anyone is interested, let me know, and I can post my test.fla (Flash CS6, but can save down to CS5) on my website server and share the link so you can test it out yourselves.

If you have any questions, I'm all ears!

Colin Holgate
Colin Holgate
Inspiring
September 28, 2012

If you used Flash Pro for developing your app things become a lot easier. You can have additional content off the edges of the stage, and that will come into view in different ways depending on the scale mode you're using.

I think that all of your tests were based on the default scale mode, which is show_all. If you have a stage that is 768x1024, and that's all of the content you show, you would fill the iPad portrait screen exactly, but on iPhone and iPhone Retina you would have small gaps above and below the stage. On iPhone 5 you would have bigger gaps.

If instead you have extra content beyond the edges of the stage, out to the distances that your calculations showed (so, 768x1365, in order to fill 9x16 ratio screens), your app would fill all the screens on the market without having to have any code to achieve that.

I used to work that way, and it's successful, but it does mean having quite a bit of extra content in those directions. You also want to make sure that things animating in or out are still animating in those areas, and don't suddenly stop just outside of the stage area.

These days I work differently, I use a scale mode of no_border. With that all of the content to show is within the stage, but the stage is neither iPad or iPhone 5 ratio, it something like 9x14 (in my current portrait app it's exactly 810x1260). Now what happens is that the edges of the stage are cut off, either at the top and bottom, or left and right, depending on whether the screen is wider or taller than the stage ratio. On iPad you end up seeing all of the width and most of the height, and on iPhone 5 you see all of the height and most of the width. It's better than the show_all case because there is less extra content in the vertical or horizontal direction, it's shared between the two.

Again, it requires no code to achieve this.

F
FingersCrossed
Inspiring
September 28, 2012

Hi Colin - I'm currently using the 'Holgate technique' on an app I'm close to releasing - thanks for the time you take on this forum by the way !

If I understand correctly if you're using no border this manages scaling to fit the device - so what setting should be used in "Air for iOS Settings ... Resolution" ? I've always gone with High - but am a little unsure on what this setting does now or if it matters at all if you go with your technique.

Thanks again for all your forum time !

Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

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