Unity3d + NGUI 的多分辨率适配

不念不忘少年蓝@ 2022-01-26 03:13 354阅读 0赞

**一、当下移动设备的主流分辨率(数据来自“** [腾讯分析移动设备屏幕分辨率分析报告][Link 1] **”)**

1.1 iOS设备的分辨率主要有：

Android设备的分辨率则相对纷杂，主流的分辨率有：

**二、NGUI默认的多分辨率适配原则**

NGUI本身按照“高度适配”的原则进行多分辨率下的UI适配，其默认的高度通过 UIRoot.manualHeight 设置。再配合使用 UIAnchor 便可实现一定程度的多分辨率适配。

其中，在Unity Editor下按照 UIRoot.manualHeight 设定的高度，编辑UI页面。这样，当UI页面在目标设备上显示时，NGUI按照目标设备的高度(targetHeight)来调整UIRoot节点的scale，以使整个UI页面适应目标设备的高度。比如manualHeight=400，而targetHeight=800，那么UIRoot的scale将被乘以2。所以，当 **目标设备的宽高比**与所 **编辑页面的宽高比**一致时，整个UI将完美显示；当目标设备宽高比小于所编辑的宽高比时，页面宽度将大于设备宽度，使得多出的部分无法显示；而当目标设备宽高比大于所编辑宽高比时，页面宽度小于设备宽度，设备两边将出现黑边。

而UIAnchor则是将整个页面分为TopLeft/Top/TopRight/Left/Center/Right/BottomLeft/Bottom/BottomRight九个区域，挂载了UIAnchor组件的节点都将按照设置自动停靠到相应的区域中。有了UIAnchor，上面的两个问题将被一定程度的解决：当目标设备宽高比小于编辑的宽高比时，由于UIAnchor的自动停靠功能，UI不会被裁切掉，但UI之间的左右间距将相应变小，便有可能出现UI重叠的问题；当目标设备宽高比大于所编辑宽高比时，UI之间的左右间距将变大，好在这样起码不会有UI被裁切或重叠。

看似我们只需要解决UI重叠的问题就搞定了。不过让我们再仔细想一下，一张铺满整个屏幕的UISprite不管是否使用UIAnchor，在目标设备宽高比更小时，sprite都会在横向上被裁切，而将目标设备宽高比更大时，sprite都不能铺满整个屏幕。

问题出来了：

1. 当目标设备宽高比更小时的UI重叠问题

2. 当目标设备宽高比更小时，全屏sprite被裁切问题

3. 当目标设备宽高比更大时，全屏sprite不能铺满整个屏幕的问题

**三、解决问题**

首先定义几个变量：

standard\_width　　编辑页面的原始宽度

standard\_height　　编辑页面的原始高度

device\_width　　　　目标设备的宽度

device\_height　　　　目标设备的高度

standard\_aspect　　编辑页面的宽高比

device\_aspect　　　　目标设备的宽高比

**1. 目标设备宽高比更小时的UI重叠问题**

当device\_aspect小于standard\_aspect时，UIRoot根据device\_height调整其scale大小，因而使得设备宽度不足以显示整个页面。我们调整Camera.orthographicSize(仅适用2D GUI)，以足够显示页面的宽度。令

Camera.orthographicSize = standard\_aspect / device\_aspect;

即，改变了NGUI原有的“高度适配”原则，转为“宽度适配”，使得整个页面都得以显示，而由于UIAnchor的存在，UI的左右间距保持不变，但上下间距会变大。

该方法可以实现为一个MonoBehaviour脚本( *UICameraAdjustor.cs*)，挂载到UICamera同一个节点上，代码如下：

![复制代码][copycode.gif]

[![复制代码][copycode.gif]][copycode.gif 1]

1 using UnityEngine;
     2 using System.Collections;
     3 
     4 /// <summary>
     5 /// 根据设备的宽高比，调整camera.orthographicSize. 以保证UI在不同分辨率(宽高比)下的自适应
     6 /// 须与UIAnchor配合使用
     7 /// 将该脚本添加到UICamera同一节点上
     8 /// </summary>
     9 
    10 [RequireComponent(typeof(UICamera))]
    11 public class UICameraAdjustor : MonoBehaviour
    12 {
    13     float standard_width = 1024f;
    14     float standard_height = 600f;
    15     float device_width = 0f;
    16     float device_height = 0f;
    17 
    18     void Awake()
    19     {
    20         device_width = Screen.width;
    21         device_height = Screen.height;
    22 
    23         SetCameraSize();
    24     }
    25 
    26     private void SetCameraSize()
    27     {
    28         float adjustor = 0f;
    29         float standard_aspect = standard_width / standard_height;
    30         float device_aspect = device_width / device_height;
    31 
    32         if (device_aspect < standard_aspect)
    33         {
    34             adjustor = standard_aspect / device_aspect;
    35             camera.orthographicSize = adjustor;
    36         }
    37     }
    38 }

[![复制代码][copycode.gif]][copycode.gif 1]

![复制代码][copycode.gif]

总之，在使用该方法后，当device\_aspect大于standard\_aspect时，UI按照高度适配原则，UI的上下间距不变，左右间距变大；当device\_aspect小于standard\_aspect时，UI按照宽度适配原则，UI的左右间距不变，上下间距变大。

**2. 目标设备宽高比更小时，全屏sprite被裁切问题**

全屏背景的sprite被裁切可能在很多情况下不会成为什么问题，但在我们使用了解决问题1中的方法后，这里的“被裁切问题”就变为了同问题3类似的“不能铺满整个屏幕问题”。解决方法是放大sprite scale:

sprite.transform.localScale \*= ( standard\_aspect / device\_aspect );

这样会使得sprite在横向上被裁切，宽高比不同必然的结果... 当然也可以选择只调整高度或宽度，只要能接受变形...

**3. 目标设备宽高比更大时，全屏sprite不能铺满整个屏幕的问题**

同问题2，解决方法同样是放大sprite scale:

sprite.transform.localScale \*= ( device\_aspect / standard\_aspect );

这样会使得sprite在纵向上被裁切。

问题2和3的解决方法相应脚本( *UIBackgroundAjustor.cs*)会在文章后面给出。

该脚本须挂载到sprite同一节点上，配合UIAnchor使用，可以选择是裁切方向。如UIAnchor停靠方式使用center，则sprite会被左右两边或上下裁切，若使用Top，则会左右裁切或下边裁切。

总之，全屏sprite会始终铺满整个屏幕，不会出现黑边。当device\_aspect大于standard\_aspect时，全屏sprite按照宽度适配，纵向裁切；当device\_aspect小于standard\_aspect时，按照高度适配，横向裁切。

**四、优化**

**1. UI页面的制作尺寸按 1024 X 600**

**　　**前面讲到主流分辨率的情况，其平均宽高比(除ipad2/3/4以外)大概为1.7，与主流的宽高比都不会偏差很大。即，在使用上面的多分辨率解决方法时，UI不会在纵向或横向上的间距过大，显得特别离谱。按照此宽高比，我们选择1024x600的尺寸来制作UI，并严格要求UI制作时，页面分为TopLeft/Top/TopRight/Left/Center/Right/BottomLeft/Bottom/BottomRight九个区域，以便挂载UIAnchor。

**2. 全屏背景的制作按 1024 X 768**

如果全屏背景图也按1024 x 600制作，在ipad2/3/4上就会有较大程度的放大。同时考虑到NGUI的打包atlas，使用2的幂次尺寸，高度600和768都将占用1024x1024的atlas。所以全屏背景在制作时，高度上做出一定的冗余尺寸，以使宽高比小于1.7时，高度上放大系数不会太大，避免图片严重失真。

加入冗余尺寸后的脚本( *UIBackgroundAjustor.cs*)如下：

![复制代码][copycode.gif]

[![复制代码][copycode.gif]][copycode.gif 1]

1 using UnityEngine;
     2 using System.Collections;
     3 
     4 /// <summary>
     5 /// 根据设备的宽高比，调整UISprite scale, 以保证全屏的背景图在不同分辨率(宽高比)下的自适应
     6 /// 将该脚本添加到UISprite同一节点上
     7 /// 须与UICameraAdjustor脚本配合使用
     8 /// </summary>
     9 
    10 [RequireComponent(typeof(UISprite))]
    11 public class UIBackgroundAdjustor : MonoBehaviour
    12 {
    13     float standard_width = 1024f;
    14     float standard_height = 600f;
    15     float device_width = 0f;
    16     float device_height = 0f;
    17 
    18     void Awake()
    19     {
    20         device_width = Screen.width;
    21         device_height = Screen.height;
    22 
    23         SetBackgroundSize();
    24     }
    25 
    26     private void SetBackgroundSize()
    27     {
    28         UISprite m_back_sprite = GetComponent<UISprite>();
    29 
    30         if (m_back_sprite != null && UISprite.Type.Simple == m_back_sprite.type)
    31         {
    32             m_back_sprite.MakePixelPerfect();
    33             float back_width = m_back_sprite.transform.localScale.x;
    34             float back_height = m_back_sprite.transform.localScale.y;
    35 
    36             float standard_aspect = standard_width / standard_height;
    37             float device_aspect = device_width / device_height;
    38             float extend_aspect = 0f;
    39             float scale = 0f;
    40 
    41             if (device_aspect > standard_aspect) //按宽度适配
    42             {
    43                 scale = device_aspect / standard_aspect;
    44 
    45                 extend_aspect = back_width / standard_width;
    46             }
    47             else //按高度适配
    48             {
    49                 scale = standard_aspect / device_aspect;
    50 
    51                 extend_aspect = back_height / standard_height;
    52             }
    53 
    54             if (extend_aspect >= scale) //冗余尺寸足以适配，无须放大
    55             {
    56             }
    57             else //冗余尺寸不足以适配，在此基础上放大
    58             {
    59                 scale /= extend_aspect;
    60                 m_back_sprite.transform.localScale *= scale;
    61             }
    62         }
    63     }
    64 }

![复制代码][copycode.gif]

作者：[码瘾少年·麒麟子 ][Link 2]  
出处：[http://www.cnblogs.com/geniusalex/][Link 2]  
蛮牛专栏：[麒麟子 ][Link 3]  
简介：09年入行，喜欢游戏和编程，对3D游戏和引擎尤其感兴趣。  
版权声明：本文版权归作者和博客园共有，欢迎转载。转载必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载：http://www.cnblogs.com/geniusalex/p/3667061.html

[Link 1]: http://djt.qq.com/article/view/399
[copycode.gif]: /images/20220126/7dd5b5e6503c40edb5426948acf5ff7b.png
[copycode.gif 1]: /images/20220126/1429bf5fbfc54a5e92f9d9deecaa3cb7.png
[Link 2]: http://www.cnblogs.com/geniusalex/
[Link 3]: http://www.manew.com/forum-47-363-1.html