Mad Level Manager gives you a decent support for multiple screen resolutions. It is done by two main mechanisms that you should keep in mind when creating a layout for devices with unspecified resolution.
Configuration of root node
Mad Level Manager layout consists of several auto-generated objects. You might see them before without paying closer attention to them. Let’s take a look at the Mad Level Manager root object. It contains a component called Mad Root Node:
Mad Root Node allows you to set two different Resize Modes. It’s important to know how they work, but you can create a nice level select screens without knowing the details. For most cases the default setup is perfectly OK.
If you’re familiar with NGUI, you may see the resemblance. In fact, this method was inspired by NGUI because of its simpleness and intuitiveness.
You are allowed to choose between these Resize Modes:
- Fixed Size
- Pixel Perfect
Before further description let’s understand the height values below.
Heights are defining the scale of your layout. You don’t know what screen resolution your client will use, but you need to have everything in order to setup sizes, distances etc. What you really need is a virtual size that will scale GUI elements depending on target screen resolution.
Fixed Size makes the layout height constant and its size is defined by Manual Height. This means that you will be always operating on virtual screen size of 720 pixels (in this case) and you don’t need to worry if the screen will be higher or lower than that. In the end, the layout will scale all its elements to fill target device resolution in 1:1 fashion. When this option is set, Minimum Height and Maximum Height are ignored.
Pixel Perfect is a little more complicated. First of all, it ignores the Manual Height setting. If your real screen size is between Minimum Height and Maximum Height then you will be operating on REAL screen coordinates. When the screen height is lower than Minimum Height or higher than Maximum Height it starts to behave just like Fixed Size but with the closest border value. For example if your screen height is 1600, then the virtual height will be 1536 (in this case).
Screen anchors
Anchor is an UI element that helps you position nested elements relatively to screen edges, corners, or screen center.
All you need to do is to create an Anchor by executing Tools → Mad Level Manager → Create UI → Anchor from the main menu, and then put elements that are needed to be anchored under the Anchor objects.