首页 > Unity3D频道 > 【NGUI研究院之Unity插件】 > NGUI研究院之自适应屏幕(十)
2014
05-04

NGUI研究院之自适应屏幕(十)


           现在用unity做项目 90%都是用NGUI,并且我个人觉得NGUI应该算是比较成熟的UI插件,虽然他也存在很多问题,但是至少这么多游戏都在用,它目前是能hold住的,嘿嘿。 这篇文章说说我现在是怎么自适应UI 和 3D 游戏的。。

1.获取屏幕的宽高

Screen.width  Screen.height 可以回去设备屏幕的宽高,但是它并不是NGUI的宽高。比如你想做一个全屏的UISprite 。

这样的代码是错误的。

sprite.width = Screen.width ;

sprite.height =  Screen.height 

正确的方法应该是:

 我建议在项目中你可以封装两个只读的方法来获取NGUI 的宽和高。

2.自适应NGUI屏幕

在Hierarchy视图中选择UI Root (2D)然后在Inspector视图中、

Scaling Style :如果是手机游戏的就选择FixedSizeOnMobiles,它的意思就是开启UI整体缩放的支持。

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

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

NGUI研究院之自适应屏幕(十) - 雨松MOMO程序研究院 - 1

开始做UI的时候就需要定制游戏主版本的屏幕分辨率,我定的分辨率是960X640,所以我屏幕的实际高度是640 。那么在Manual Height的参数我就需要写640.  

如下图所示,我在960X640的屏幕上布置了我的简单界面。

NGUI研究院之自适应屏幕(十) - 雨松MOMO程序研究院 - 2

我举个典型的例子,这时候我把屏幕分辨率改成1024X768. 因为960X640 是3:2的屏幕,而1024X768是4:3的屏幕。所以屏幕就会变成那面这个样子。

NGUI研究院之自适应屏幕(十) - 雨松MOMO程序研究院 - 3

然后,我们就需要来修改Manual Height这个参数,如果是1024X760的分辨率,那么此时它的Maunal Height应该是720。

NGUI研究院之自适应屏幕(十) - 雨松MOMO程序研究院 - 4

在看看,如下图所示,界面整体布局居中显示了。但是布局的位置是没有发生任何改变的。

NGUI研究院之自适应屏幕(十) - 雨松MOMO程序研究院 - 5

我个人觉得根本就是没有完美自适应的方法。除非你可以接收屏幕上的某些元素被拉伸变形。。 如上图所示,在这里我们只需要把背景的白框拉伸成屏幕的宽高即可。

说了半天就是一个简单的数学算法,根据布置UI时的分辨率,加上现在屏幕的分辨率根据这两个参数,动态的计算出现在manualHeight的高度。

我在Unity圣典上已经看到有人写了这个算法。

http://game.ceeger.com/forum/read.php?tid=9230&ds=1

找一个合适的地方调用一下如下方法。 960 /640换成你布置屏幕时的宽高即可。

 UI整体布局 “居中” 并不是一个好的处理办法,这时候就需要策划人员的头脑风暴了,不过可以参考一下别的游戏自适应的方法。如果你的UI布局比较简单的话,比如战斗UI。一般都是4个角有东西,可以用Anchor把它固定在屏幕上。或者用新版本的NGUI提供的UIWidget也可以设置固定的位置。

3.3D方面的自适应

我们在说说3D方面的自适应,比如游戏里面的人物。。我举个例子,比如我们游戏是960X640屏幕,在屏幕的边缘放一个3D的角色,那么此时屏幕变成1024×768那么这个小人可能就跑到屏幕外面了。。解决这个问题就需要3D 摄像机的自适应。

如下图所示,我在960X640屏幕的边缘放了一个3D的立方体对象。

NGUI研究院之自适应屏幕(十) - 雨松MOMO程序研究院 - 6

然后我把屏幕设置成1024X768。如下图所示,可以看到这个立方体对象以后超出了屏幕。。。

NGUI研究院之自适应屏幕(十) - 雨松MOMO程序研究院 - 7

有一个非常俏巧妙的方法可以解决它。就是修改Camera的Field of View的参数,找一个合适的地方调用一下这个方法。这里我借助了刚刚自适应NGUI屏幕的参数。这里我用到了UIRoot的manualHeight ,所以UI需要你是用上面介绍的方法来自适应,640表示我制作时屏幕的高度,拥着两个数相除那么就可以得到Camera缩放的系数了。

 找一个合适的地方调用,60表示默认的参数,getCameraFOV这个方法的原理就是根据默认的FOV参数加上当前屏幕的系数以及布置屏幕时的系数,动态计算出一个新的FieldOfView。

 说到这里其实修改射线机的Z轴也可以达到自适应的效果,但是我觉得最好用fieldofView,因为游戏中你的摄像机可能位置会发生变化,总不能一直去改Z轴的属性吧,而FiewldOfView你只需要设置一次就可以了。嘿嘿。

4.拉伸变形

你可以让所有的摄像机在初始化的时候调用一下这个方法,它会完完整整的拉伸屏幕 ,大家可以试试,不过千万不要用,因为变形了太难看。。。。

 

 

雨松MOMO提醒您:亲,如果您觉得本文不错,快快将这篇文章分享出去吧 。另外请点击网站顶部彩色广告或者捐赠支持本站发展,谢谢!

--

最后编辑:
作者:雨松MOMO
专注移动互联网,Unity3D游戏开发
捐 赠如果您愿意花10块钱请我喝一杯咖啡的话,请用手机扫描二维码即可通过支付宝直接向我捐款哦。

  1. MoMo大神,UIROOT(3D)可以根据屏幕大小来移动摄像机,实现大小适应,再改下Anchors来适应位置,可以用3DUIRoot来替代2D的么?

  2. Mo大,请问关于你这篇文章自适应后两边会有后面摄像机的空白漏出来,你是怎么处理的?是用图片遮挡,还是调整Anchors和Aspect,让精灵图片适应屏幕宽度?第二种方式我认为应该要好些,只是有缺陷,不能整体控制。

    • Anchors 在比较简单的界面上可以, 比如战斗界面 放在四个角上。 而真正的界面是很复杂的,用anchors就变形了。。 所以 露出来的地方 我们的设计是 整体界面居下, 然后上下各有两个条 。这两个条的宽度和屏幕宽度一样。。

  3. momo,你好,请问你知道在NGUI中怎么把两个模型在一个摄像机中分开区域显示吗?我试了用两个panel调为soft clip,改变size给定显示区域,但是效果是它只能隔开精灵图片,不能隔开模型的显示,为什么呢,我用的是3D UI Camera

  4. momo最好说一下UIRoot的源码是怎么做的,虽然用代码实现了,但是我看了半天源码才知道,最开始也是早直接改Uiroot的localScale。看了源码才发现ngui也是这样做的。

  5. 你好,请问,2D UI自适应,我定的设计屏幕宽高是800×480(比如有个sprite大小为100×100像素),然后运行的时候实际屏幕宽高为1136×640(sprite仍然为100×100像素,也就是感觉没看出放大了),这个时候在UIRoot下的游戏对象(比如ScrollView、Button、Sprite、Label等)是怎么放大呢?(上面好像没有提及)

  6. 松大大,我在NGUI+EasyTouch结合的时候碰到了点问题。假设屏幕过宽出现左右两侧黑屏时,gesture.position 获取到的位置把整个黑屏都算进去了,导致运动位置不准确,而且当黑屏宽度越小这个误差会越小。我只是想让一个小球跟着触摸位置移动,获取的位置在出现黑屏时不准确一直让我很纠结。

  7. 宣哥,这个会不会出现拉伸的效果?有些背景图拉伸之后就变得不好看了,我想固定高度,然后长度摄像机能看多少就看多少,这个应该怎么解决啊?

  8. 其实16:9游戏本来就比4:3游戏多显示两边的区域。所以把Manual,Min,Max都改成同一数值就不会出差错了,或者直接用FixedSize。

  9. 其实16:9游戏本来就比4:3游戏多显示两边的区域。所以把Manual,Min,Max都改成同一数值就不会出差错了。

  10. 没必要这么复杂吧,NGUI自带有个UIAnchor。而且可以设置ResizeOnMobile,根本不需要自己操作NGUI的屏幕自适应。第二,3D的物体其实也可以放在UIRoot/…/下面的某个目录下,这样3D模型也可以跟随NGUI一起缩放了,很好用。