There are three ways which we could use to adjust UI elements based on different screen resolution:
- Surrounding fill out
- Relative size and fixed size
- Two patterns
Surrounding fill out
For surrounding fill out, it means that all game elements are placed in the center of the screen, and fill out rest of the screen space by using other elements, like merely black color. Here is the example from “Fallout:Shelter”:
16:9 ( for iphone5)
4:3 ( for ipad)
You can see, all UI elements are places in the center square. No matter what screen resolution it is, each UI element stays in the same position, and rest of space whether be cut (4:3) or filled in black (16:9). It is obviously a smart solution. Meanwhile, it presents a clean style for users. Personally I like this solution the most.
- Easy to implement
- Clean style, looks perfect.
- All UI elements must be in the center
- All UI elements’ size could not be adjusted
If there are a few interactive UI elements in the game scene, and each element’s size is not so small (like button), I suggest you use this method to solve UI adjustment issue.
Relative size and fixed size
For relative size and fixed size, UI element’s size and position are set as relative or fixed. Usually, the size is set as relative, and position is set as fixed. In Unity, we could use NGUI stretch and NGUI anchor to achieve it. In general, we want UI element’s size would be automatically adjusted according to screen size, and UI element’s position stays the same as resolution changes in order to make layout unchanged. Here is the example from Dead Trigger 2:
16:9 (iphone 5)
4:3 ( ipad)
It is clear that all buttons stay in the same position, as they use the same anchor target. If you look at green button on the right, you could notice that the distance between it and screen border is the same for 16:9 resolution and 4:3 resolution. Moreover, the iphone version has relatively bigger buttons as we want player are able to tap them easily on iphone device. And it could be achieved by using NGUI stretch to set button’s relative size.
- Keep UI layout unchanged
- UI elements would be not places in a certain place of the screen
- It might be generated unexpected result like buttons overlap with each other
If you want to have UI elements adjust their size based on device screen resolution, especially you want player on iphone could have relatively bigger UI elements, you could use this method. But you should be careful when elements are very close to each other. Because they might overlap with each other if their size keep increasing but they stay in the same position.
For two patterns, it is easy to understand. The game would use two different pattern of UI based on screen resolution. Here is the example from Hearthstone:
4 : 3 (ipad)
- Provide the best interaction experience by choosing the appropriate pattern according to screen resolution
- You need to do everything twice
If you have enough resources and time, just do it!