Skip to main content
A
Anonymous
September 5, 2012
Answered

How to scale my app to fit device dimensions?

  • September 5, 2012
  • 1 reply
  • 7555 views

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..

This topic has been closed for replies.
Correct answer Colin Holgate

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.

1 reply

Colin Holgate
Colin HolgateCorrect answer
Inspiring
September 5, 2012

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.

A
Anonymous
September 5, 2012

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.

Colin Holgate
Colin Holgate
Inspiring
September 5, 2012

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.

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