Unity+ngui multi-resolution adaptation scheme

When it comes to Unity's adaptation program, there are a lot of things to look for online, but there are always a variety of issues to apply to the project. Since I have to make a small game recently, before starting to play, think of a good fit this piece, the new project will be useful later.

Ngui should be the most developers will now choose the UI plug-in, although Ngui still have a lot of problems, such as relatively speaking, Ngui is still relatively reliable, so this is only for the Ngui to do the appropriate scheme.

Ngui for each scene, is to uiroot as the root of the Gameobject tree, uiroot the following mainly have these kinds of properties

　　

1) Scaling Style

Uiroot There are several ways to zoom

Way 1:pixelperfect in this way, your UI is always based on pixels, and a 300*200 widget always occupies 300*200 pixels on the screen. This means that your UI will look very large on low-resolution machines and will appear small on high-resolution machines. This setting is always to keep your UI clear.

The way 2:fixedsize is a setting that is exactly the opposite of its function. When Uiroot uses this option, your screen will always keep the size of the Ngui you care about, no matter how big your actual screen is. That means a 300*200 widget takes up 25% of your 1920*1080 screen, so when the resolution drops to 1280*720, it also takes up 25% of the screen. Choose this option if you don't mind that your UI looks like a different size and doesn't care whether it's clear (or maybe a small UI is stretched very large). When choosing it, don't forget to set the manual Height.

This percentage is calculated from the size of the widget and the size of the manual you are currently setting so that when you migrate to a different mobile device, it will calculate the actual pixel size of the display based on the ratio and the real resolution of the mobile device. That is, the scaling style is specified as Fixedsize or fixedsizeonmobiles, the scale is only referenced by manual height, and the height value of the screen resolution differs from this setting value, according to its scale Manual Height) The "equal to" scale of the entire UI tree (the zoom ratio of the width is also this scale value).

The way 3:fixedsizeonmobile is the first two combinations. When this option is selected, "Pixelperfect" is used on desktop devices such as PC or Mac, and "Fixedsize" is used on mobile devices.

If you do not select the fixed size option, set the value for minimum and maximum height. These values make your virtual screen look reasonable. For example, if you choose the pixel perfect mode, Minimum height is set to 720, then when a player runs your program on a device with a 800*600 (height of 600, less than Minimun), your UI behaves and sets the "Fixed Size "mode, the Manual height value is set to 720.

This Minimum and maximum height is for you to limit the actual screen size, if the actual screen size is less than Minimum, then it is equivalent to setting the "Fixed Size" mode, the Manual height value is set to Minimum , in the same way, if the screen size exceeds Maximum, it is equivalent to setting the "Fixed Size" mode,Manual height value is set to Maximum .

Here's a practical example to verify the actual effect of each method.

Pixel Perfect, first set minimum and maximum Height to 500,1500 respectively, and then use Ngui to make the desired UI, as follows

The following is the actual display at each resolution

1024x768

1920 * 1080

The others are not listed, we found that the middle of the picture has maintained the original size has not changed, as the background map will go beyond the screen problems, we can set the anchor method to solve, the background of the four sides of the map to align the four sides of the uiroot, four corner of the box button anchor the background map as the target , the effect is as follows:

Obviously this kind of effect and the expectation design UI contrast is unacceptable, so now the market mobile game almost does not use pixel perfect to do the adaptation plan ....

The following changes the pixel perfect to fix size,ui background and Four corners of the anchor remain unchanged,

This effect is acceptable, there is a problem, that is because the set of anchor, resulting in the background map will be stretched, and if the use of anchor to do the adaptation, the front-end programmer is too much work. So let's get rid of anchor and think about other ways.

Here we first set the Uiroot to

Then 1280 * 720 as the default resolution, and then the background map size is also set to 1280 * 720, do a simple interface

The UI is then displayed at a resolution of 960 * 640, because 1280 * 720 is a 16:9 screen, and 960 * 640 is a 3:2 screen, which causes the width to not be displayed completely

There are several ways to solve this problem

Method 1: Dynamically change the manual Height of the Uiroot

In the 960 * 640 screen, because manual height = 720, so 720 to 640 of the height of the need to scale 640/720 = 8/9, because the UI is designed according to the size of 1280*720, so the width of the UI is reduced to 1280 * 8/9 = 1137.7, Ming The width of the 960 does not fit at all, so we will continue to change the zoom factor so that it

Can be fully displayed at a width of 960, and this scaling factor is calculated based on the screen size and manual height, so we only need to dynamically calculate the manual height, it will be good to put the overall UI into the screen.

Previously seen code, hang to Uiroot below

1 usingUnityengine;2 usingSystem.Collections;3 4  Public classUiadapter:monobehaviour {5 6      Public intManualwidth = the;7      Public intManualheight =720;8 9     voidAwake ()Ten     { One Adaptiveui (); A     } -  -     Private voidAdaptiveui () the     { -  -Uiroot Uiroot = getcomponent<uiroot>(); -         if(Uiroot! =NULL) +         { -             if(System.Convert.ToSingle (screen.height)/screen.width > System.Convert.ToSingle (manualheight)/manualwidth) +Uiroot.manualheight = Mathf.roundtoint (System.Convert.ToSingle (manualwidth)/screen.width *screen.height); A             Else atUiroot.manualheight =Manualheight; -         } -     } -}

Run now

This method will leave a black edge, black side if you feel unbearable, you can do some processing, the back of the method is also with Black edge, as to how to optimize these black edges, back to study.

However, if the Ngui version is too low, this scenario may result in the UIPanel clipping function being invalidated. So look at the following method.

Method 2: Adjust the orthographicsize of the Uicamera

This is done by changing the orthogonal dimensions of the camera to make the UI adaptive, and when the camera is orthogonal, it looks like this:

It looks like a cube box, which is the range that the camera can display, and when the orthographicsize changes, the width of the box changes accordingly, for example, we reduce the orthographicsize to 0.5.

See the camera's orthogonal surface is also reduced by 0.5, so the screen shows the UI is half the original, then the above mentioned if the 1280*720 picture placed in the 960*640 screen, the width of the problem, we can properly enlarge the orthographicsize, This allows the UI to be fully displayed on the screen.

Directly on the code, http://blog.csdn.net/dingkun520wy/article/details/26084045, thank the classmate, but the code a little bit wrong, after the changed, hanging on to Uiroot's camera

usingUnityengine;usingSystem.Collections; [Requirecomponent (typeof(Uicamera))] Public classuiadaptercamera:monobehaviour{floatStandard_width = 1280f;//Initial width    floatStandard_height = 720f;//Initial Height    floatDevice_width = 0f;//Current Device width    floatDevice_height = 0f;//Current Device Height     Public floatAdjustor = 0f;//Screen correction ratio    voidAwake () {//Get device width and heightDevice_width =Screen.width; Device_height=Screen.height; //Calculate the width to height ratio        floatStandard_aspect = standard_width/Standard_height; floatDevice_aspect = device_width/Device_height; //Calculate correction ratio        if(Device_aspect <standard_aspect) {Adjustor= Standard_aspect/Device_aspect; //Debug.Log (Standard_aspect); } Debug.Log ("the scale of the screen"+adjustor); if(Adjustor <2&& adjustor >0) {camera.orthographicsize=adjustor; }    }    //Use this for initialization    voidStart () {}//Update is called once per frame    voidUpdate () {}}

And then 960 * 640 shows it's like this.

See the value of the red box changed from 1 to 1.18 ... The Ok.

Here it seems that the plan should be OK, in fact, there is a problem, that is, the camera is not orthogonal, orthographic size is ignored, that is, the script can only be used to solve the 2d camera adaptation problem, some non-orthogonal camera adaptation is not possible, So the program is also pass off.

Method 3: Change the RECT value of the camera, which is the corresponding viewport rect within the editor

The camera's rect defaults to (0,0,1,1), and (0,0) corresponds to the lower-left corner of the screen, which corresponds to the percentage of screen width and the high percentage, so the default camera's rect range is from the lower-left corner to the upper-right corner of the screen, which is full screen.

In this way, we can actually calculate the range of the camera's viewing angle through the actual screen resolution and design resolution.

On the code, hang it under the camera

usingUnityengine;usingSystem.Collections; [Requirecomponent (typeof(Camera))] Public classmycameraadapter:monobehaviour{ Publiccamera camera; voidStart () {Adaptcamera (); }     Public voidAdaptcamera () {if(Camera = =NULL) {Camera= getcomponent<camera>(); }        floatScreenaspect = screen.width/Screen.height; floatDesignaspect = the/ (float)720; if(Designaspect < Screenaspect)//screen resolution is too large, the width is too long, the screen left a black edge, the height of the same        {            floatTarwidth = Screen.height * designaspect;//find out the actual width to display            floatTarwidthradio = Tarwidth/screen.width;//Find the width percentage            floatPosW = (1-Tarwidthradio)/2;//a wide starting pointCamera.rect =NewRect (PosW,0, Tarwidthradio,1); }        Else if(Designaspect > Screenaspect)//screen resolution is too small, height is too high, vertical left black edge, width unchanged        {            floatTarheight = screen.width/Designaspect; floatTarheightradio = tarheight/Screen.height; floatPosH = (1-Tarheightradio)/2; Camera.rect=NewRect (0, PosH,1, Tarheightradio); }        Else{camera.rect=NewRect (0,0,1,1); }    }}

In this case, both the 2d camera and the 3d camera can be mounted to fit the script. This is a perfect solution, as for the black side, there is time to optimize.

Unity+ngui multi-resolution adaptation scheme