Skip navigation
Phelim O\'Neill
Phelim O\'Neill
Currently Being Moderated

How to scale my app to fit device dimensions?

Sep 5, 2012 6:49 AM

Tags: #air #scaling #resolution #adobe #android #actionscript

My apps dimensions are 800x450.

 

My android devices dimensions are 540x960.

 

With this of course when I installed on device the app appeared non scaled inside a window on my mobile device.

 

I have the  XML set to the

 

Now I'll show you some of my code.

 

  public static var gameStage:Stage;
....  
 
public function initApplication():void
  {
   this._game = new MovieClip;
   super.addChild(this._game);
  }
  private function initThreeBalls():void
  {
   gameStage = this._game.stage;
   var starBackGround:Stars = new Stars; // Add a background large 1200 x 3000 texture
...
}
 
 
 
 

 

Here is some code I found here:

 

 

var appScale:Number = 1;
var appSize:Rectangle = guiSize.clone();
var appLeftOffset:Number = 0; // if device is wider than GUI's aspect ratio, height determines scale 
if ((deviceSize.width/deviceSize.height) > (guiSize.width/guiSize.height)) 
{ 
appScale = deviceSize.height / guiSize.height; appSize.width = deviceSize.width / appScale;
appLeftOffset = Math.round((appSize.width - guiSize.width) / 2);
 } // if device is taller than GUI's aspect ratio, width determines scale 
else { appScale = deviceSize.width / guiSize.width;
 appSize.height = deviceSize.height / appScale; appLeftOffset = 0;
 }

http://www.adobe.com/devnet/air/articles/multiple-screen-sizes.html

 

Wondering what elements I apply this code to?

 

It doesnt seem to work with Stage..

702 Views   4 Replies   Latest reply: Phelim O\'Neill, Sep 6, 2012 4:21 AM
 
Replies
  • Colin Holgate
    Currently Being Moderated
    1. Colin Holgate,
    Sep 5, 2012 7:56 AM   in reply to Phelim O\'Neill
    Report

    Did you write that correctly? Your app is landscape, and you've given portrait figures for the device. Did you mean 960x540?

     

    That aside, you can remove all of your code and let Flash do the scaling for you. In your game scene make it so that there is important content in the middle, and extra content at the edges. There are three variations of working this way:

     

    1.

     

    1.1 Set your stage to 800x600, the aspect ratio of the iPad, and have extra content to the left and right of the stage, going out far enough to make the content be 1066 pixels wide.

     

    1.2 Don't use any code to set the stage scale, the default of "show all" is what you want.

     

    1.3 When you play the game on an iPad it will show the middle 4:3 of the game. On an iPhone it will show a little bit more, and on the widest Android it will show even more. That extra content can be say more of the background, or more of a star field.

     

    2.

     

    2.1 Set your stage to 960x540, which happens to be the widest Android ratio. Have extra content above and below the stage, so that it reaches to a height of 720.

     

    2.2 Don't use any code to set the stage scale, the default of "show all" is what you want.

     

    2.3 When you play the game the Android will see exactly what was in the stage area, and the iPhone will see a little bit of what was above an below the stage. The iPad will see all of what was above and below the stage.

     

    3.

     

    3.1 Set your stage to 840x540, where the middle 720x472 is the important part of the scene, and near the four sides of the stage is content that is within the stage, but not crucial. Much the same as when dealing with action safe on TV.

     

    3.2 Set the stage scale mode to "no border":

     

         import flash.display.StageScaleMode;

     

         stage.scaleMode = StageScaleMode.NO_BORDER;

     

    3.3 Now when you play the game you will see all of the height of the stage on iPad, but will miss a little of the left and right, and you'll see all of the width of the stage on the widest Android, but will miss a little of the top and bottom.

     

     

    The good thing about the above approaches is that it will work for every device size there is, not just the one you mentioned, and all without any code.

     
    |
    Mark as:
  • Phelim O\'Neill
    Currently Being Moderated
    2. Phelim O\'Neill,
    Sep 5, 2012 8:47 AM   in reply to Colin Holgate
    Report

    I'll respond later in more detail, i cant reedit my post. The app is landscape, I am running my app in mobile for landscape also.

     

    So both are on the aspect ratio 16:9 .

     

    I was trying to use the appraoch of

     

    stage.scaleMode = StageScaleMode.NO_SCALE;

    stage.align = StageAlign.TOP_LEFT;

     

    Maybe thats not the best way hoewver.

     
    |
    Mark as:
  • Colin Holgate
    Currently Being Moderated
    3. Colin Holgate,
    Sep 5, 2012 8:52 AM   in reply to Phelim O\'Neill
    Report

    A lot of people do work that way, and take on all of the math for themselves.

     

    If you're doing a code laid out interface, then no_scale makes more sense. But if it's a game where you would like the scene to fill the device whatever size it is, then getting Flash to do that for you may well be easier.

     
    |
    Mark as:
  • Phelim O\'Neill
    Currently Being Moderated
    4. Phelim O\'Neill,
    Sep 6, 2012 4:21 AM   in reply to Colin Holgate
    Report

    Ok your way works for my device anyway, some others seem to think its glitchy on certain devices but ill ignore as it seems the simplist way.

     

    I am indeed using a code laid out interface.

     

    You can see here my result.

     

    http://i50.tinypic.com/2uzcvbs.png

     

    At this stage I wont test for devices with other aspect ratios, i'll have to re-visit your post later when i do.

     

    The drawbacks on larger screened devices obviously have to do loss of definition in fonts and the like. I can live with that for now. I didnt particularly want to go down the root of managing a load of math to deal with a dynamic stage size or having code to find where a touch is and then determining where that is on the stage with the scale removed.

     

    With this project I have to:

     

    • Create an entirely new UI as my one is just suited to a PC, not a mobile.

     

    • Work out some optimisation techniques, my framerate is woeful due to the sheer amount of math per frame in my project (its based on a newtonian gravitational model)

     

    • Increase rendering speed as this is all vector graphics (except the background which is a code generated bitmap.

     

    • Find some components that are better for Mobile..

     

    Cheers,

    P O Neill

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points