Ngui Uiroot Screen resolution adaptation

Ngui is very common in unity3d game development, and Ngui for every UI scenario is rooted in a uiroot for the UI game object tree, what does this uiroot do?

Let's take a quick look at the basic properties in Uiroot

There are only 4 properties for the Uiroot game object, namely scaling rules, manual height, minimum height and maximum height

And it is these 4 properties that will affect the overall scale of the entire UI scene, and when these 4 properties are set, the relative scaling value (Localscale) of the Uiroot game object will be generated and cannot be directly modified (many properties in Ngui cannot be directly modified, This control is in the Uiroot script, by setting [Executeineditmode] to do, its relative scaling value is calculated according to the 4 properties of Uiroot, then what is the meaning of these 4 attributes?

(Spit a bit, perhaps the user experience here is not friendly enough, because the manual height and minimum height, Maximum height does not work at the same time, if you can choose the scaling style when the dynamic switch, Users may be more aware of the relationship between them)

1.Scaling Style (zoom type)

This is a simple enumeration variable, including three enumerated values

[CSharp]View Plaincopyprint? < param name= "wmode" value= "Transparent" >

1. Public enum Scaling
2. {
3. Pixelperfect,
4. Fixedsize,
5. Fixedsizeonmobiles,
6. }

(Fixedsize and Fixedsizeonmobiles are similar, and the latter only adds a judgment on iOS and Android platforms, so the former can be used instead of the latter)

The difference between Pixelperfect and Fixedsize is discussed here, both for all UI components under this uiroot, or for the size of the entire game screen under this uiroot!

2.Manual height and minimum height, Maximum height (manual height and min height, max height)

Manual height and minimum height, Maximum height does not work on this uiroot at the same time, when choosing the scaling style to pixelperfect, we need to set minimum height, Maximum height, and when the scaling style is fixedsize or fixedsizeonmobiles, we need to set the manual height. (That's why I spit in front of me)

3. Using (1) pexelperfect and minimum height, Maximum height

This combination is mainly used to expect that all UI textures are "as far as possible" without scaling, so the so-called "as far as possible" level depends on the Minimum height and maximum height,minimum height, which means that when the device is less than this setting, The uiroot is scaled according to this setting value; Maximum height means that when the device resolution is greater than this setting value, the uiroot is scaled according to this setting value (Uiroot is the root of the UI game object tree, modifying uiroot scaling will affect scaling of the entire UI tree)

(2) Fixedsize and Manul Height

This combination is mainly used to expect all UI textures to be "fit" scaled, and the so-called "fit" scaling principle is based on the manual height setting, when the device resolution height value differs from this setting value, according to its scale (i.e. manual height/screen Height) The "equal to" scale of the entire UI tree (the zoom ratio of the width is also this scale value), so that we can do a set of resources, at different sizes of the resolution of the best "no distortion" adaptation

(3) Intersection

What is the equivalent of the first two groups?

Manual height = = Minimum Height = = Maximum Height

Derivation process, hehe ~ ~

Refer to the calculation process of activeheight attribute and getpixelsizeadjustment in Uiroot

4. This may not be enough

Based on the above, when we do a set of UI resources in 1024x768 for standard resolution (that is, choose Fixedsize and Manual height=768), it seems to meet more than 90 of the model, and why is 1024x768 it?

Now that we have tolerated the scaling on other devices other than 1024x768, why not 960x640?

Calculate the aspect ratio of the 1024x768 aspect ratio =1.33,960x640 = 1.5, which is all of the resolution ratios of the mobile devices?

Of course not, the proportion of iphone5 will be more than 1.5, there are all kinds of wonderful Android devices, such as Amoi n828 is 960x540, aspect ratio =1.78

So why use 1024x768 as the standard?

Because of the aspect ratio of 1.33, what happens when our 1024x768 resource is on a 960x640 device?

According to the ratio of manual height/screen Height, we need to scale 768/640 = 1.2 times times, assuming it is a 1024x768 texture, Height scaling 1.2 times times to 640, the width of the corresponding scaling 1.2 times times to 853 (to ensure that the same ratio of scaling without distortion), that is, 1024x768 resources on the 960x640 on both sides have black edge, which we can tolerate, we can do a large background or stretching, to ensure that the UI components are not deformed, many games This is done, for example, plants vs zombies on the iphone5 and ipad see the background is not as big!

When you put it on the Amoi machine?

We need to scale 768/540 = 1.4 times times, width 1024/1.4 = 731, which is possible, just look a bit more strange because the black edges on both sides are more proportional (the black edge of the 960-731=229 area)

And I said the resolution of the Android machine to only unexpected, not can not do, perhaps the width of 1.7 is not the end, when encountered 1.8, the relative proportion of black edge will be greater ...

5. Here comes the question again.

Let's say that our game type is more suitable for iphone games and less suitable for ipad, so I want to be able to do a set of resources with 960x640 as standard, OK?

I can only say that it's not possible, because you have to limit the size of the UI component you're designing, why do you need to limit it?

Suppose I have a texture that is 960x640 size, on the iphone with full screen, according to our settings (Fixedsize and manual height=640), get 1024x768 resolution, height 640/768 = 0.83, in order to ensure equal than zoom, Width 960/0.83 = 1156, unfortunate thing happened, 1156 > 1024, this UI component is wider than the width of the screen, has been cropped ... This is something we can't tolerate, maybe you can say we try not to do this size of Ui,ok, you can limit the size of the UI, but when faced with Android those wonderful resolution, you will find that the limit is getting bigger, which may make art and planning crazy!

6. Solution

When we take some time to observe the resolution of mobile devices now, although a lot of wonderful, but there are some rules, the law is the aspect ratio and not in the specific size, broadly divided about the aspect ratio in the 1.3,1.5,1.7 range of the majority (basically is all it!). Even if there is a 1.2, the ratio of 1.8 is no harm ...

Ngui offers us a solution that is not enough to measure at various heights, we should add a scale type that is measured in terms of width

For the standard of UI resources, we choose 960x640, the aspect ratio is 1.5

In this way, when we are compatible with sizes greater than 1.5, we use the existing scheme of Ngui, and when we are compatible with sizes smaller than 1.5, use width as a measure

In other words, there is a property similar to manual width, when less than 1.5, we use manual width/screen width to derive the scale of the entire UI tree!

The advantage of this is that the black edge area is not too large and does not require a limit to the size of the UI component!

PS: I said the above remarks for "can be used for the adaptation of the resolution of a myriad of resources local tyrants" may be I think more!

Ngui Uiroot Screen resolution adaptation