深挖 NGUI 基础 之UIRoot (一)

当你开始使用NGUI的时候,简单的从项目视图 中一个”Control”预设体 拖拽到场景视图中,你将会发现 Hierarchy层次面板中会出现以下层次结构:

1. 其中 UI Root作为根节点,是每个NGUI元素的顶级父节点
2. 在Unity中,每个元素都具有最基本的Transform属性,这也叫基元属性;
3. UI Root是用于管理和处理UI的变化和缩放
4. Camera其实是一个独立的UICamera,负责渲染UI对象到视图中,作为UI Root的子节点存在
5. 剩下的蓝色文字的物体就是最关键的UI部分.

(一) UI Root缩放方式之 Scaling Style

1. NGUI中 UI Root 缩放方式有三种,默认为Flexible

   public enum Scaling
       {
           Flexible,
           Constrained,
           ConstrainedOnMobiles,
       }

public Scaling scalingStyle = Scaling.Flexible;

他们之间的关系是:默认为Flexible,若手动选 Scaling.ConstrainedOnMobiles,应该符合的平台是编辑器,IPhone,安卓,Window Phone8或者Unity_WP_8_1,或者黑莓.那么这些情况将把UI Root缩放方式变为Scaling.Constrained,其他时候设置无效,将会默认为Flexible固定缩放,也就是说当你发布在网页平台的时候设置为ConstrainedOnMobiles为无效操作.

public Scaling activeScaling
    {
        get
        {
            Scaling scaling = scalingStyle;

            if (scaling == Scaling.ConstrainedOnMobiles)
#if UNITY_EDITOR || UNITY_IPHONE || UNITY_ANDROID || UNITY_WP8 || UNITY_WP_8_1 || UNITY_BLACKBERRY
                return Scaling.Constrained;
#else
                return Scaling.Flexible;
#endif
            return scaling;
        }
    }

Flexible 意味着保持原有像素,不进行缩放.分辨率的变化不影响UI的像素.

Unity默认按照UI Root Minimum Height 最小高度限制来设定 该UI元素的实际高度.

而且UI Root脚本中 默认最小高度为720px,最大高度为1280px

并且限定范围为320px <=  Height <= 1536px

比如当我们把屏幕的宽高度设置为1280 * 7200 px

那么在固定缩放的情况下,Scaling.Flexible中,实际高度activeHeight是怎么计算的呢?让我们看看脚本,先计算出屏幕的宽高比,限制最小和最大高度.

if (scaling == Scaling.Flexible)
            {
                Vector2 screen = NGUITools.screenSize;
                float aspect = screen.x / screen.y;

                if (screen.y < minimumHeight)
                {
                    screen.y = minimumHeight;
                    screen.x = screen.y * aspect;
                }
                else if (screen.y > maximumHeight)
                {
                    screen.y = maximumHeight;
                    screen.x = screen.y * aspect;
                }

                // Portrait mode uses the maximum of width or height to shrink the UI
                int height = Mathf.RoundToInt((shrinkPortraitUI && screen.y > screen.x) ? screen.y / aspect : screen.y);

                // Adjust the final value by the DPI setting
                return adjustByDPI ? NGUIMath.AdjustByDPI(height) : height;
            }

接下来我们用案例来看UI实际情况:首先设置屏幕大小为1270*720ox

把UI Root 的最小Minimum 设置为 720px,也就是以此 UI Root为画布的元素(画布和屏幕大小一致),默认与画布的比例是自身元素高度  :  720px

如我们把Button设置的宽高设置为72 px * 1280 px,那么刚好 10个Button元素就能把画面填充满

最顶部Button元素的坐标Y轴是324,那么它是怎么来的呢?

计算:屏幕高度 / 2 - 元素高度 /2 = 720/2 – 72/2 = 324 px

这在做网格类游戏很有用哦:比如三消游戏或者SLG游戏等