NGUI之自适应屏幕
转载: 雨松MOMO 2014年05月04日 于 雨松MOMO程序研究院 发表 ,原文链接
现在用unity做项目 90%都是用NGUI,并且我个人觉得NGUI应该算是比较成熟的UI插件,虽然他也存在很多问题,但是至少这么多游戏都在用,它目前是能hold住的,嘿嘿。 这篇文章说说我现在是怎么自适应UI 和 3D 游戏的。。
1.获取屏幕的宽高
Screen.width Screen.height 可以回去设备屏幕的宽高,但是它并不是NGUI的宽高。比如你想做一个全屏的UISprite 。
这样的代码是错误的。
sprite.width = Screen.width ;
sprite.height = Screen.height
正确的方法应该是:
C#
UIRoot root = GameObject.FindObjectOfType<UIRoot>();
if (root != null)
{
float s = (float)root.activeHeight / Screen.height;
int height = Mathf.CeilToInt(Screen.height * s);
int width = Mathf.CeilToInt(Screen.width * s);
Debug.Log("height = " + height);
Debug.Log("width = " + width);
}
我建议在项目中你可以封装两个只读的方法来获取NGUI 的宽和高。
2.自适应NGUI屏幕
在Hierarchy视图中选择UI Root (2D)然后在Inspector视图中、
Scaling Style :如果是手机游戏的就选择FixedSizeOnMobiles,它的意思就是开启UI整体缩放的支持。
Manual Height:这个属性就比较重要的,因为我们的自适应屏幕,原理就是根据Screen.width 和Screen.height来动态的计算它的实际高度,动态的修改这个值。
Min/Max inum Height:这就是支持的最大高度,和最小高度一般都是 640 到 1536。
开始做UI的时候就需要定制游戏主版本的屏幕分辨率,我定的分辨率是960X640,所以我屏幕的实际高度是640 。那么在Manual Height的参数我就需要写640.
如下图所示,我在960X640的屏幕上布置了我的简单界面。
我举个典型的例子,这时候我把屏幕分辨率改成1024X768. 因为960X640 是3:2的屏幕,而1024X768是4:3的屏幕。所以屏幕就会变成那面这个样子。
然后,我们就需要来修改Manual Height这个参数,如果是1024X760的分辨率,那么此时它的Maunal Height应该是720。
在看看,如下图所示,界面整体布局居中显示了。但是布局的位置是没有发生任何改变的。
我个人觉得根本就是没有完美自适应的方法。除非你可以接收屏幕上的某些元素被拉伸变形。。 如上图所示,在这里我们只需要把背景的白框拉伸成屏幕的宽高即可。
说了半天就是一个简单的数学算法,根据布置UI时的分辨率,加上现在屏幕的分辨率根据这两个参数,动态的计算出现在manualHeight的高度。
我在Unity圣典上已经看到有人写了这个算法。
http://game.ceeger.com/forum/read.php?tid=9230&ds=1
找一个合适的地方调用一下如下方法。 960 /640换成你布置屏幕时的宽高即可。
static private void AdaptiveUI() { int ManualWidth = ; int ManualHeight = ; UIRoot uiRoot = GameObject.FindObjectOfType<UIRoot>(); 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; } }
C#
UI整体布局 “居中” 并不是一个好的处理办法,这时候就需要策划人员的头脑风暴了,不过可以参考一下别的游戏自适应的方法。如果你的UI布局比较简单的话,比如战斗UI。一般都是4个角有东西,可以用Anchor把它固定在屏幕上。或者用新版本的NGUI提供的UIWidget也可以设置固定的位置。
3.3D方面的自适应
我们在说说3D方面的自适应,比如游戏里面的人物。。我举个例子,比如我们游戏是960X640屏幕,在屏幕的边缘放一个3D的角色,那么此时屏幕变成1024×768那么这个小人可能就跑到屏幕外面了。。解决这个问题就需要3D 摄像机的自适应。
如下图所示,我在960X640屏幕的边缘放了一个3D的立方体对象。
然后我把屏幕设置成1024X768。如下图所示,可以看到这个立方体对象以后超出了屏幕。。。
有一个非常俏巧妙的方法可以解决它。就是修改Camera的Field of View的参数,找一个合适的地方调用一下这个方法。这里我借助了刚刚自适应NGUI屏幕的参数。这里我用到了UIRoot的manualHeight ,所以UI需要你是用上面介绍的方法来自适应,640表示我制作时屏幕的高度,拥着两个数相除那么就可以得到Camera缩放的系数了。
static public float getCameraFOV(float currentFOV) { UIRoot root = GameObject.FindObjectOfType<UIRoot>(); float scale =Convert.ToSingle(root.manualHeight / 640f); return currentFOV * scale; }
C#
找一个合适的地方调用,60表示默认的参数,getCameraFOV这个方法的原理就是根据默认的FOV参数加上当前屏幕的系数以及布置屏幕时的系数,动态计算出一个新的FieldOfView。
C#
Camera.main.fieldOfView = getCameraFOV();
说到这里其实修改射线机的Z轴也可以达到自适应的效果,但是我觉得最好用fieldofView,因为游戏中你的摄像机可能位置会发生变化,总不能一直去改Z轴的属性吧,而FiewldOfView你只需要设置一次就可以了。嘿嘿。
4.拉伸变形
你可以让所有的摄像机在初始化的时候调用一下这个方法,它会完完整整的拉伸屏幕 ,大家可以试试,不过千万不要用,因为变形了太难看。。。。
C#
foreach(Camera camera in Camera.allCameras) { camera.aspect = 640f/960f; }
NGUI之自适应屏幕的更多相关文章
- 【转】NGUI研究院之自适应屏幕(十)
http://www.xuanyusong.com/archives/2536 现在用unity做项目 90%都是用NGUI,并且我个人觉得NGUI应该算是比较成熟的UI插件,虽然他也存在很多问题,但 ...
- Unity3D NGUI自适应屏幕分辨率(2014/4/17更新)
原地址:http://blog.csdn.net/asd237241291/article/details/8126619 原创文章如需转载请注明:转载自 脱莫柔Unity3D学习之旅 本文链接地址: ...
- 怎么可以让div自适应屏幕的高度?(已解决)
主要解决问题的方法是用JS脚本. 先看布局, 一个div是首部,另一个div是主体,主体包含左侧菜单和右侧内容. 我想把主体div的高度自适应屏幕剩余区域,怎么做? 首先,获取可见区域的高度,docu ...
- js自适应屏幕高度
//自适应屏幕高度 $(window).resize(function() { hightChange(); }); function hightChange(){ ; $();// iframe i ...
- 【jQuery】百分比自适应屏幕轮播图特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css实现自适应屏幕高度;
css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...
- Atitit html5 Canvas 如何自适应屏幕大小
Atitit html5 Canvas 如何自适应屏幕大小 可以用JS监控屏幕大小,然后调整Canvas的大小.在代码中加入JS 1 2 3 4 5 6 7 $(window).resize ...
- android自适应屏幕方向和大小
一:不同的layout Android手机 屏幕 大小不一,有480x320, 640x360, 800x480.怎样才能让App自动 适应不同的屏幕 呢? 其实很简单,只需要在res目录下 ...
- #region 自适应屏幕分辨率
#region 自适应屏幕分辨率 [StructLayout(LayoutKind.Sequential, CharSet = CharSet.Auto)] public ...
随机推荐
- sql server 子找父和父找子
父找子 with RTD1 as( select Id,pid from Sys_XCode ), RTD2 as( select * from RTD1 where id=1 union all s ...
- 自动装配Bean
Spring提供了几种技巧,可以减少XML的配置数量: 自动装配(autowiring):可以减少<property>(setter注入)和<constructor-arg>( ...
- iOS开发资源整理【01】
一.网站 Code4App 开发者常用库分享网站 GitHub git是一个优秀的分布式版本控制系统 stackoverflow 技术在线问答网站 CocoaChi ...
- 向mysql workbench中导入.sql文件
mysql workbench用的不多,前段时间装了一下,然后用了一下,感觉操作比dbdesigner4要更人性化一点.其中二个方面做了改进,让我觉得很爽. 第一,就是端口可以修改了,以前就是定死33 ...
- AngularJs的UI组件ui-Bootstrap分享(三)——Accordion
Accordion手风琴控件使用uib-accordion和uib-accordion-group指令. <script> angular.module('myApp', ['ui.boo ...
- this面试题
// 考题1 /*function Fn() { console.log(this);//window } Fn(); new Fn();//Fn实例 Fn.apply(Fn); //将this指向F ...
- 探索javascript----有关数组的常用方法
与字符串的转换: str.split(","):将一个字符串以为英文逗号分割,返回一个数组: arr.join(","):返回用指定分隔符间隔的含所有数组元素的 ...
- UIkit框架之UISegmentedControl
1.继承链:UIcontrol:UIview:uiresponder:NSObject 2.初始化 (1)- (instancetype)initWithItems:(NSArray *)items ...
- linux命令:which
1.命令介绍: which用来在指定的路径搜索某个系统命令的位置,并返回第一个搜索结果. 2.命令格式: which [选项] 系统命令 3.命令参数: -n 指定文件名长度,指定的长度必须大于或等 ...
- colormap
http://cn.mathworks.com/help/matlab/ref/colormap.html