[Unity3D plugin] NGUI screen adaptation

Screen Adaptation

NGUI can easily implement screen self-adaptation. However, there is no detailed tutorial for this issue in its official tutorial, so it may take a lot of detours during implementation. The following is a convenient implementation method I found during the development process.

Main Components

1. UIAnchor

This is used to determine the position of the control on the screen. In addition, there is a tutorial dedicated to its functions, and it will not be repeated.

2. UIStretch

This is a component used for scaling. Earlier versions of NGUI are integrated on UIAnchor. The new version of UIStretch provides four scaling methods:

Horizontal: scales horizontally only

Vertical: Only zooming the Vertical direction

Bose: Two scaling directions

BasedOnHeight: proportional scaling based on height

Then I implemented

BasedOnWidth: proportional Scaling Based on Width

The Code is as follows:

else if(style == Style.BasedOnWidth){    localScale.x = relativeSize.x * screenWidth;    localScale.y = relativeSize.y * screenWidth;    localScale.z = localScale.x;}

This code is added to the Update method. To mount the UIStretch on the UIPanel, all zks are scaled.

Adaptive Process

1. Create a new UI and adjust the UIAnchor position in Anchor. It is best to set Anchor to Bottom.

2. Adjust the Size of Camera to the default screen Size. For example, if the UI is created at a resolution of 960*640, adjust the Size of Camera to 960.

3. Add a UIStretch to the Panel and select BasedOnWidth as the mode. After that, you can see that the Scale of your Panel is changed to the X-direction resolution of the current screen.

4. Add the UI control to the Panel and adjust the position. All controls under the Panel are scaled proportionally in the X direction to adapt to the screen size.

5. Add a background image and set the anchor of UISprite to Bottom. After adding the image, you can see that the sprite can be adaptive at different resolutions.

6. The background image added in the preceding step is used as a reference object to place controls on the page. This is not only the size, but also the position is scaled proportionally in the same mode.

7. You can add a sub-Panel under the Panel created in step 2. The sub-Panel does not require UIStretch (generally used for Draggable Panel; otherwise, additional Draw calls will be added)

8. if a widget needs to be located in a certain corner of the screen, you can add a UIAnchor to it separately. At this time, UIStretch only scales the size of the widget, its location is controlled by his own UIAnchor.

If you have any questions, you are welcome to shoot bricks and spray carbonate water.