Ngui Screen Adaptive

First, Ngui default multi-resolution adaptation principle
The Ngui itself is based on the principle of "highly adaptable" for UI adaptation at multiple resolutions, and its default height is set by Uiroot.manualheight. With the use of uianchor, a certain degree of multi-resolution adaptation can be achieved.

Where the UI page is edited under Unity Editor in accordance with the height set by uiroot.manualheight. This way, when the UI page is displayed on the target device, Ngui adjusts the scale of the Uiroot node to the height of the target device (targetheight) so that the entire UI page adapts to the height of the target device. For example manualheight=400, and targetheight=800, then the scale of uiroot will be multiplied by 2. Therefore, when the aspect ratio of the target device is consistent with the aspect ratio of the edited page, the entire UI is displayed perfectly, and the page width is larger than the device width when the target device aspect ratio is less than the width-to-height ratio, so that the extra portion is not displayed, and the width of the target device is less than the width of the device when Black edges appear on both sides of the device.

Uianchor, however, divides the entire page into topleft/top/topright/left/center/right/bottomleft/bottom/bottomright nine regions, The nodes that mount the Uianchor component are automatically docked to the appropriate zone according to the settings. With Uianchor, the above two problems will be resolved to a certain extent: when the target device aspect ratio is less than the editing aspect ratio, because of the Uianchor automatic docking function, the UI will not be trimmed off, but the left and right spacing between the UI will be correspondingly smaller, there may be UI overlap problems When the target device aspect ratio is greater than the edit aspect ratio, the left and right spacing between the UI becomes larger, so that at least there is no UI cut or overlapping.

It seems that we just need to solve the problem of UI overlap. But let's think about it, a uisprite full screen, regardless of whether or not to use Uianchor, when the target device aspect ratio is more than an hour, the sprite will be cut horizontally, and the target device aspect ratio is larger, the sprite will not be able to fill the entire screen.

Here's the problem:
1. When the target device aspect ratio is more than the hour UI overlap problem
2. When the target device aspect ratio is more than the hour, the full screen sprite is cropped.
3. When the target device aspect ratio is larger, the full screen sprite does not fill the whole


Second, solve the problem
First define several variables:
Standard_width Edit the original width of the page
Standard_height The original height of the edit page
Device_width width of target device
Device_height height of target device
Standard_aspect the aspect ratio of the edit page
Device_aspect the aspect ratio of the target device

1. The target device aspect ratio is more than the hour UI overlap problem
When Device_aspect is less than Standard_aspect, Uiroot adjusts its scale size according to Device_height, thus making the device wide enough to display the entire page. We adjust the camera.orthographicsize (2D GUI only) to be sufficient to display the width of the page. Make
Camera.orthographicsize = Standard_aspect/device_aspect;
That is, changed the Ngui original "height adaptation" principle, to "width adaptation", so that the entire page can be displayed, and because of the existence of Uianchor, the left and right spacing of the UI remains unchanged, but the upper and lower spacing will become larger.
The method can be implemented as a Monobehaviour script (UICameraAdjustor.cs), mounted to Uicamera on the same node, the code is as follows:


1 using Unityengine;
2 using System.Collections;
3
4//<summary>
5///depending on the aspect ratio of the device, adjust the camera.orthographicsize. To ensure that the UI is adaptive at different resolutions (aspect ratio)
6//must be used in conjunction with Uianchor
7///Add the script to Uicamera on the same node
8//</summary>
9
Ten [Requirecomponent (typeof (Uicamera))]
public class Uicameraadjustor:monobehaviour
12 {
float standard_width = 1024f;
float standard_height = 600f;
float device_width = 0f;
float device_height = 0f;
17
void Awake ()
19 {
Device_width = Screen.width;
Device_height = Screen.height;
22
Setcamerasize ();
24}
25
-private void Setcamerasize ()
27 {
float adjustor = 0f;
float standard_aspect = standard_width/standard_height;
float device_aspect = device_width/device_height;
31
if (Device_aspect < Standard_aspect)
33 {
Adjustor = Standard_aspect/device_aspect;
Camera.orthographicsize = adjustor;
36}
37}
38}



In summary, after using this method, when the Device_aspect is greater than Standard_aspect, the UI is in accordance with the principle of high adaptation, the upper and lower spacing of the UI is not changed, the left and right spacing becomes larger, and when Device_aspect is less than Standard_aspect, UI according to the principle of width adaptation, the left and right spacing of the UI, the upper and lower spacing becomes larger.

2. Target device aspect ratio is shorter, full screen sprite is cropped problem
A full-screen background sprite cut may not be a problem in many cases, but after we have used the method in problem 1, the "cropped issue" here becomes the same as problem 3, "cannot be covered with the whole screen problem." The solution is to enlarge the sprite scale:
Sprite.transform.localScale *= (Standard_aspect/device_aspect);
This will cause the sprite to be cropped horizontally, the difference in aspect ratio is the inevitable result ... Of course, you can choose to adjust only the height or width, as long as you can accept the deformation ...

3. When the target device aspect ratio is larger, the full screen sprite does not fill the problem
As with question 2, the solution is also to enlarge the sprite scale:
Sprite.transform.localScale *= (Device_aspect/standard_aspect);
This causes the sprite to be cropped lengthwise.

The workaround for issues 2 and 3, the corresponding script (UIBackgroundAjustor.cs), is given later in the article.
The script must be mounted on the same node of the sprite, used with Uianchor, and optionally cut in the direction. If the Uianchor docking mode uses center, then the sprite will be left and right on either side or up and down, if using top, will be left or right cutting or cutting bottom.
All in all, the full screen sprite will always be full, with no black edges. When the device_aspect is greater than standard_aspect, the full-screen sprite is adapted to the width, trimmed vertically, and trimmed horizontally when the device_aspect is less than standard_aspect.

Third, optimize
1. The UI page is made in size by X 600
When it comes to mainstream resolution, the average aspect ratio (except for IPAD2/3/4) is about 1.7, and the mainstream aspect ratio is not a big deviation. That is, when using the multiresolution resolution above, the UI is not too large to be spaced vertically or horizontally, which is particularly outrageous. According to this aspect ratio, we choose the size of the 1024x600 to make the UI, and strict requirements for UI production, the page is divided into topleft/top/topright/left/center/right/bottomleft/bottom/ BottomRight Nine zones to mount the Uianchor.

2. Production of full screen background by X 768
If the full-screen background is also made as a IPAD2/3/4 x 600, there will be a greater degree of amplification on the top. Taking into account the Ngui package atlas, using the 2 power dimension, the Heights 600 and 768 will occupy the 1024x1024 atlas. Therefore, the full screen background in the production, the height of a certain amount of redundancy to make the aspect ratio of less than 1.7, the height of the magnification factor is not too large to avoid serious distortion of the picture.
The script (UIBackgroundAjustor.cs) after adding redundant dimensions is as follows:

1 using Unityengine;
2 using System.Collections;
3
4//<summary>
5////depending on the aspect ratio of the device, adjust the uisprite scale to ensure that the full-screen background image is adaptive at different resolutions (aspect ratio)
6///Add the script to uisprite on the same node
7///must be used in conjunction with the Uicameraadjustor script
8//</summary>
9
Ten [Requirecomponent (typeof (Uisprite))]
public class Uibackgroundadjustor:monobehaviour
12 {
float standard_width = 1024f;
float standard_height = 600f;
float device_width = 0f;
float device_height = 0f;
17
void Awake ()
19 {
Device_width = Screen.width;
Device_height = Screen.height;
22
Setbackgroundsize ();
24}
25
-private void Setbackgroundsize ()
27 {
Uisprite m_back_sprite = getcomponent<uisprite> ();
29
if (m_back_sprite! = null && UISprite.Type.Simple = = M_back_sprite.type)
31 {
M_back_sprite. Makepixelperfect ();
back_width float = m_back_sprite.transform.localscale.x;
back_height float = m_back_sprite.transform.localscale.y;
35
float standard_aspect = standard_width/standard_height;
Panax Notoginseng float device_aspect = device_width/device_height;
extend_aspect float = 0f;
The float scale = 0f;
40
if (Device_aspect > Standard_aspect)//Fit by width
42 {
scale = Device_aspect/standard_aspect;
44
Extend_aspect = Back_width/standard_width;
46}
+ Else//by height adaptation
48 {
The scale = Standard_aspect/device_aspect;
50
Wuyi extend_aspect = back_height/standard_height;
52}
53
if (extend_aspect >= scale)//redundant size is sufficient to fit without amplification
55 {
56}
*//redundancy size is not adequate to fit, on this basis to enlarge
58 {
/= Extend_aspect;
M_back_sprite.transform.localScale *= Scale;
61}
62}
63}
64}

Ngui Screen Adaptive