Instead of the current screen’s resolution, you could look at the stage dimensions.
I know that the “screen resolution” method means that one inch on your screen is one inch on theirs. That can be nice to have, especially when dealing with tablets. On the other hand, it’s not so great for small screens. A one-inch-wide button on a low-end device could fill a quarter of the screen!
Plus, you can’t even get at the screen resolution in Flash, and HTML5 may or may not be able to access that information.
The “stage dimensions” method, on the other hand, works on all platforms, handles smaller screens gracefully, and is much easier to test.
Let’s say I’ve convinced you to give this method a shot. How does it work?
The first step is to take the stage dimensions and convert them into
scaleY values. Then scale all your objects using these values.
Flash defines four stage scale modes, each representing a different way to generate
scaleY. Let’s take a look.
Click and drag in this demo to get a sense of the
Somehow I doubt this is the one you’re looking for.
You already implemented it. Moving on!
Quick: what’s the simplest way you can think of to handle scaling?
Remember, you have access to
stageHeight, and you can set
If you guessed “scale x and y independently,” you’re right!
Hey, I never said it was a good way to handle scaling. I just said that it’s simple.
var scaleX:Float = stage.stageWidth / 800; var scaleY:Float = stage.stageHeight / 600; Lib.current.scaleX = scaleX; Lib.current.scaleY = scaleY;
Note: you can’t set
stage.scaleY. In most cases,
Lib.current works equally well, which is why I used that. (Just avoid adding children directly to the stage.)
Obviously, you don’t want to stretch your content like that. Somehow, you have to make sure that each individual object keeps the same proportions.
There are two main ways to do this, and
NO_BORDER is one of them.
NO_BORDER considers the same two values as
EXACT_FIT, but it picks only one. Specifically, it picks the larger one.
var scaleX:Float = stage.stageWidth / 800; var scaleY:Float = stage.stageHeight / 600; var scale:Float = Math.max(scaleX, scaleY); Lib.current.scaleX = scale; Lib.current.scaleY = scale;
Imagine your stage is made wider, so that
scaleX comes out to 1.55, and
scaleY is still 1.
NO_BORDER will choose the larger of the two values (1.55), making the stage the right horizontal size, but too large vertically.
NO_BORDER tends to make objects too large,
SHOW_ALL errs on the side of keeping them small.
NO_BORDER, except with
//SHOW_ALL var scaleX:Float = stage.stageWidth / 800; var scaleY:Float = stage.stageHeight / 600; var scale:Float = Math.min(scaleX, scaleY); Lib.current.scaleX = scale; Lib.current.scaleY = scale;
Given the choice between 1.55 and 1,
SHOW_ALL will choose the smaller value. This ensures that everything will fit, though there will also be extra space.
In most apps, extra space is better than objects being cut off, making
SHOW_ALL the clear winner.