NGUI自适应之懵逼梳理

被NGUI自适应苦苦困扰，终于下定决心好好看，看了许多大神的心得，这是本人的一点总结。

主要参考了两位大神写的

http://www.cnblogs.com/liujidong/p/5650305.html   晓东大神

http://www.xuanyusong.com/archives/2536    雨松大神   

首先呢，了解一下NGUI的的两个容器组件  UI Panel和UI Widget。

UI Panel相对于UI Widget的父物体一样，一个UI Panel包含多个UI Widget

1.UI Panel    

   UIPanel用来收集和管理它下面所有widget的组件。通过widget的geometry创建实际的draw call（与优化有关的东西，还不太了解）。没有panel所有东西都不能够被渲染出来，你可以把UIPanel当做Renderer。

  所有panel都有一个Depth值，会影响所有它包含的widget。如果你的UI有很多窗口，那么最好每个窗口有一个panel。Panel上的depth权重会远远高于每一个widget的depth权重，所以保证panel不要使用同样的depth。如果使用同样的depth在panel上，那么draw call会被自动拆分来保证渲染顺序，所以会增加更多的draw call。

• Alpha属性影响所有在panel下面的widget。所以可以用它来淡出整个窗口。
• 如果你的UI需要被灯光影响，需要勾选上Normals。
• 如果创建了一个有很多geometry的scrollable panel，你需要勾选Cull选项来减少三角形的数目。这样也可能降低性能，因为widget的可视性需要每次update都检验一次。
• 勾选Static选项来告诉NGUI这个panel下面的widget不会被移动，这样可以提高性能。NGUI会忽略所有的position/rotation/scale改变。所以在运行时移动widget不会有效——所以小心使用。
• 如果要调试由panel创建的draw calls，Show All选项可能帮助到你。你会看到由panel创建的所有draw call，以渲染顺序排序。每个draw call会包括它使用到material的详细信息，那个widget用的这个material，甚至可以让你关闭某些draw call来让你查询某些问题。

2.UI Widget

  UIWidget是NGUI的基础组件（所有NGUI元素的基类——所有你创建的sprites和labels。UILabel，UISprite，UITexture）。也就是一个你可以放在屏幕任意位置的矩形框。widget会有一定的面积，但是在运行的时候（Game View）是完全不可见的，所以非常适合当做其他组件的容器（让所有的sprite或者label等以它进行各种对齐）。

       Widgets也有Depth属性，控制他们被点击时的响应顺序（在Sprite和Label中也用来控制渲染顺序，值越大，显示的时候越靠前）。

     做游戏功能界面时，每个功能界面做用一个panel，（如果界面用widget做容器区分，多个界面之间的遮挡就没办法调了，总不能把所有的子都排序），独有的只有这个系统用的图片资源创建一个atlas，功能界面的子页用widget来当容器。当一个功能系统有多个界面时，并且可以共用一个panel时，也可以每个界面用widget来当容器划分

--------------------

然后现在是自适应的问题，这个自适应的问题呢主要是通过UI Root组件的Scaling Type（缩放方式）来解决的。

注意，开始做UI的时候就要制定主游戏界面的分辨率！

Scaling Type：

        1.Pixel Perfect  这种方式下，你的UI一直都是以像素为基础，一个300*200的widget在屏幕上永远占用300*200像素。这就意味着，你的UI在低分辨率的机器上会显得非常大，在高分辨率的机器上就会显得很小。这个设置就是一直保持你的UI清晰。

              2. FixedSize    是一个和Pixel Perfect功能正好相反的设置。当UIRoot用了这个选项，你的屏幕永远都会保持NGUI所关心的尺寸，不管你的实际屏幕是多大。就是说一个300*200的widget占用了你1920*1080的25%的屏幕，那么当分辨率降低到1280*720的时候，它同样占用25%的屏幕。如果你不介意你的UI看起来像是不同的尺寸，也不关心是否清晰（就是可能一个小的UI被拉伸很大），那么选择这个选项。选择它的时候，不要忘记设置Manual Height。 

Manual Height：这个属性就比较重要的，因为我们的自适应屏幕，原理就是根据Screen.width 和Screen.height来动态的计算它的实际高度，动态的修改这个值。

Min/Max inum Height：这就是支持的最大高度，和最小高度一般都是 640 到 1536。

这个占的百分比就是通过widget的尺寸和当前你设置的Manual的尺寸而算出来，所以当你移植到不同的移动设备时，它会根据这个占比和移动设备的实际分辨率进行运算，然后算出显示的实际像素大小。即Scaling Style指定为FixedSize或FixedSizeOnMobiles，则缩放只以Manual Height为参考，屏幕分辨率的高度值不同于此设置值时，则根据其比例（即Screen Height / Manual Height）对整棵UI树的进行“等比”缩放（宽度的缩放比也是此比例值）。

            3:　FixedSizeOnMobile是前两种的组合。选择这个选项后，会在pc或者mac等桌面设备上用“PixelPerfect”，在移动设备上用“FixedSize”。 

如果你没有选择Fixed Size选项，那就要设置Minimum和Maximum Height的值。这些值让你的虚拟屏幕看起来在合理范围。比如选择了Pixel Perfect方式，Minimum Height设置为720，那么当有玩家把你的程序运行在800*600（高度是600，小于Minimun Height）的设备上时，你UI的行为就和设置了“Fixed Size”模式、Manual Height值设为720的时候一样。这个Minimum和Maximum Height用于你对实际的屏幕尺寸进行限制，如果实际的屏幕尺寸小于Minimum，那么就相当于设置了“Fixed Size”模式、Manual Height值设为Minimum的时候一样，同理，如果屏幕尺寸超过了Maximum，那也相当于设置了“Fixed Size”模式、Manual Height值设为Maximum的时候一样。（感觉这个还是很好的，在介于Minimum与Maximm之间时，UI元素的大小不会改变，一旦小于Minimum时就相当与Fixed等比例缩小，大于Maximum相当于Fixed等比例放大）

对于UI界面移植到其他的不同分辨率的屏幕上，只能用脚本动态的改变Manual Height的大小才能使界面完全显示出来，那么这样的话会出现黑边的情况，所以可以用Anchor使图片拉伸以覆盖黑边，但是这要你不介意图片拉伸的情况下。

 例如在960 * 640的屏幕下，由于Manual Height = 720，所以720放到640的高度下需要缩放640/720 = 8/9, 由于UI是按照1280*720的尺寸设计的，所以UI的宽度缩为1280 * 8/9 = 1137.7,明显960的宽度根本放不下，所以我们要继续更改缩放系数，使其

能够在960的宽度下完全显示，而这个缩放系数是根据屏幕尺寸和Manual Height算出来的，所以我们只需要动态的去计算Manual Height，就可以很好的将UI整体放进屏幕中了。

动态改变Manual Height的脚本如下

using UnityEngine;
using System.Collections;

public class UIAdapter : MonoBehaviour {

    public int ManualWidth = 1280;
    public int ManualHeight = 720;

    void Awake () 
    {
        AdaptiveUI();
    }

    private void AdaptiveUI()
    {

        UIRoot uiRoot = GetComponent();
        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);
            else
                uiRoot.manualHeight = ManualHeight;
        }
    }
}

总的来说呢，UI界面的做自适应还是可以完美解决的  Scaling Style+Anchor+Manua Height动态改变脚本应该是没问题的。

新人投稿，多多包涵。