NGUI 界面自适应

关于 NGUI 的界面自动适应不同的手机分辨率,网上已经够多的了。如果你点进了这个网页,推荐一下这一篇吧:

http://www.xuanyusong.com/archives/2536

下面是我自己的总结:

首先,为什么手机游戏不要使用 UIRoot.PixelPerfect?

这个选项会使图片按照原始的大小显示在手机上。会有什么问题呢? iPhone 3GS 分辨率是 480x320,iPhone 4 是 960x640。也就是说,宽高刚好1:2的关系。如果使用了 PixelPerfect ,你会发现,在 iPhone 3GS 上面的界面“看起来”比 iPhone 4 大一倍。太丑了。

其次,需要知道的是,一定要保证界面显示在手机上时,宽和高一定要等比缩放,否则会很丑。

既然需要等比缩放,那么必然会牵扯到一个问题,手机的分辨各不相同,怎么保证等比缩放?为了方便说明,假设设置设计分辨率是w/h=1/1。手机分辨率是w/h=1/1.2。

如果你选择“充满”w,那么,并且 h 方向上内容居中,那么,h 的两端就会填不满,造成“黑边”的情况。如果选择“充满”h,那么更糟糕,w方向上的内容有20%的内容无法显示在屏幕中,因为超出去了。

我们称填满后,会造成另一个方向上填不满的情况的那一个方向叫做”小边“,而填满之后会造成另一个方向内容超出屏幕的那一个方向叫做”大边“。那么在这个例子中,w就是小边,h就是大边。

内容被截断是无法接受的,所以通常的选择是,“充满”小边,使大边方向上的2端出现黑边,然后再想办法把黑边填充点内容,保证整个屏幕都有内容可以看。这个方案可以叫做《填充小的,居中大的,填充大的两端》

注意,不一定 w 是较小的那个,有的手机是 w,有的手机是 h。这取决于手机分辨率比例与设计分辨率之间的关系。所以我们需要在程序中加判断,决定哪一边是小边,哪一边是大边。

看上图,NGUI 只支持基于 Height 的缩放,也就是说,他只支持把 h 做为小边。这个是无法满足我们的需求的。以下是我的代码,是从最上面的链接里参考过来的,把这个脚本附加到 UIRoot 对象上就可以工作了:

 1 using UnityEngine;
 2 using System.Collections;
 3
 4 [RequireComponent(typeof(UIRoot))]
 5 public class AdaptableUI : MonoBehaviour
 6 {
 7     public int manualWidth = 960;
 8     public enum CallWhere
 9     {
10         Awake,// call only once
11         Start,// call only once
12         Update,// call when change
13     }
14     public CallWhere callWhere = CallWhere.Awake;
15
16     public enum AdaptType
17     {
18         BasedOnHeight,
19         BasedOnWidth,
20     }
21     [HideInInspector]
22     [System.NonSerialized]
23     public AdaptType adaptType = AdaptType.BasedOnHeight;
24
25     private int cachedScreenWidth;
26     private int cachedScreenHeight;
27     private int originalManualHeight;
28     private UIRoot uiroot;
29
30     void Awake()
31     {
32         cachedScreenWidth = 0;
33         cachedScreenHeight = 0;
34         uiroot = GetComponent<UIRoot>();
35
36         if (uiroot.scalingStyle != UIRoot.Scaling.FixedSize)
37         {
38             enabled = false;
39             return;
40         }
41
42         originalManualHeight = uiroot.manualHeight;
43
44         if (callWhere == CallWhere.Awake)
45             this.AdaptUI();
46     }
47
48     void Start()
49     {
50         if (callWhere == CallWhere.Start)
51             this.AdaptUI();
52     }
53
54     void Update()
55     {
56         if (callWhere == CallWhere.Update &&
57             (cachedScreenWidth != Screen.width ||
58             cachedScreenHeight != Screen.height))
59         {
60             cachedScreenWidth = Screen.width;
61             cachedScreenHeight = Screen.height;
62
63             AdaptUI();
64         }
65     }
66
67     void AdaptUI()
68     {
69         if (!enabled)
70             return;
71
72         float currentScale = (float)Screen.width / (float)Screen.height;
73         float manualScale = (float)manualWidth / (float)originalManualHeight;
74         if (currentScale < manualScale)
75         {
76             uiroot.manualHeight = (int)((float)manualWidth * (float)Screen.height / (float)Screen.width);
77             adaptType = AdaptType.BasedOnWidth;
78         }
79         else
80         {
81             uiroot.manualHeight = originalManualHeight;
82             adaptType = AdaptType.BasedOnHeight;
83         }
84     }
85 }

Call Where 如果是 Update,那么在 Windows 下就可以拉窗口大小实时地看表现。

黑边怎么填充?

还没有实践。

如果底图要求等比缩放,可以让底图大一些,超过设计分辨率的大小,让他居中显示。这种办法也只能满足分辨率比例在一定范围内。如果超过这个范围,仍然会出现黑边。

可以在代码中判断,如果比例实在太夸张了,则干脆将底图放大!直到充满为止。超出去一部分是没有关系的。

如果说底图不要求等比缩放(比如 Sliced 九宫格的那种),那么就更好办了,Anchors 设置为与 UIRoot 对齐就可以了。

需要对齐的界面元素怎么处理?

指的是,左上角的人物头像区域,左下角的摇杆,右下角的各种按钮,右边的任务自动寻路按钮等这些需要 “散布” 在屏幕边缘的界面元素。

还需要实践,目前想法是,与 Anchors 设置为与  UIRoot  对齐。不知道会不会和缩放的那一套机制冲突。

时间: 2024-10-14 09:52:29

NGUI 界面自适应的相关文章

NGUI屏幕自适应

NGUI确实是非常棒的一个做界面的插件,比起U3D自带的GUI要好很多,当然也有一些不好之处,毕竟什么都不可能那么完美. 最近在用Unity写游戏使用NGUI遇到了一个很多人都在遇到的问题,就是关于屏幕自适应,谷哥度娘里面写关于适应屏幕的帖子很多,但是大多都是一样抄来抄去,都是说是Panel里面加个UIStretch里面加个 if 分支,什么OnWidth什么的,还要把UIAnchor的side放置在Bottom等等步骤,过于麻烦,而且效果也一般. 不知道大家在用最新的Unity的时候在UISt

NGUI之自适应屏幕

 转载: 雨松MOMO 2014年05月04日 于 雨松MOMO程序研究院 发表 ,原文链接   现在用unity做项目 90%都是用NGUI,并且我个人觉得NGUI应该算是比较成熟的UI插件,虽然他也存在很多问题,但是至少这么多游戏都在用,它目前是能hold住的,嘿嘿. 这篇文章说说我现在是怎么自适应UI 和 3D 游戏的.. 1.获取屏幕的宽高 Screen.width  Screen.height 可以回去设备屏幕的宽高,但是它并不是NGUI的宽高.比如你想做一个全屏的UISprite .

NGUI 屏幕自适应

雨松MOMO 2014年05月04日 于 雨松MOMO程序研究院 发表  现在用unity做项目 90%都是用NGUI,并且我个人觉得NGUI应该算是比较成熟的UI插件,虽然他也存在很多问题,但是至少这么多游戏都在用,它目前是能hold住的,嘿嘿. 这篇文章说说我现在是怎么自适应UI 和 3D 游戏的.. 1.获取屏幕的宽高 Screen.width  Screen.height 可以回去设备屏幕的宽高,但是它并不是NGUI的宽高.比如你想做一个全屏的UISprite . 这样的代码是错误的.

NGUI界面动画

玩游戏的时候,点击一个按钮,可能会看到UI从某个位置飞进来,关闭之后又往该位置飞出!又或者一些更加复杂的运动轨迹. 我们的项目现在就是使用Animation/Animator来制作界面动画. 流程:由程序将界面导出package给美术,具体动画的编辑工作交给美术,然后美术编辑完之后给出对应界面的动画文件.(ps:最好是要确定好整个项目涉及的界面有哪些动画效果,具体界面的宽高都不变了之后再去制作界面动画,不然界面一改动大小.位置等都会影响动画效果!我们也是项目处于后期才开始制作这块的!),至于具体

Ubuntu - VMware 中 Ubuntu 系统界面自适应填充

VMware 窗口自适应 VMware Workstation - 查看 - 立即适应客户机 原文地址:https://www.cnblogs.com/ikoo4396/p/8149952.html

【HTML】iframe嵌套界面自适应,可高度自由收缩

最近在做网页时需要使iframe高度自适应,以提高用户体验,网上找了挺多都很复杂,最后找到了这个 HTML: <div class="main_page"> <iframe scrolling="no" id="main" name="main" frameborder="0" src="" style="min-height:600px;width:100%

unity UGUI 界面自适应 屏幕自适应 主要应用于解决不同手机分辨率不同,导致界面出问题

1. 2. 3. 4. 5. 6. 7.尺寸改变 以1920*1080作为基准. screen.width/1920*Panel.Width(这个是要改变的UI的尺寸)

Unity3D NGUI自适应屏幕分辨率(2014/4/17更新)

原地址:http://blog.csdn.net/asd237241291/article/details/8126619 原创文章如需转载请注明:转载自 脱莫柔Unity3D学习之旅 本文链接地址:Unity3D NGUI自适应屏幕分辨率 1.UIRoot:根据高度自适应屏幕分辨率. NGUI根目录的UIRoot组件自带了根据高度自适应分辨率的功能. Scaling Style属性可选择三种不同的缩放策略. PixelPerfect 完美像素:直接显示设定好的像素.当屏幕高度低于minimum

css自适应问题

1. 图片自适应 <img src="app-logo.png" srcset="app-logo.png 175w,app-logo-double.png 365w" sizes="(max-width: 640px) 365px,175px"/> srcset: 资源文件列表 sizes:(max-width: 640px) 365px,175px 宽度不超过640px使用365px大小的图片,其余情况使用175px大小的图片.