Unity 收藏本版 已有9人收藏 +发表新主题
查看: 42119|回复: 5
打印 上一主题 下一主题

[分享] NGUI屏幕自适应

[复制链接]

[分享] NGUI屏幕自适应

朋克耀仔 发表于 2013-11-11 23:57:55 浏览:  42119 回复:  5 只看该作者 复制链接
先发一下别人使用的方法

屏幕自适应

NGUI可以比较方便的实现屏幕自适应,但是它的官方教程里面针对这个问题没有详细的教程,所以可能在实现的时候会走比较多的弯路。以下是我在开发过程中找到的一个比较方便的实现方法。

主要组件

1. UIAnchor

这个是用来确定控件在屏幕中的位置,另外有一篇教程专门讲它的功能,所有不会再赘述

2. UIStretch

这个是用来做缩放的组件。老版本的NGUI是集成在UIAnchor上的。新版本的UIStretch提供了4种缩放方式:

Horizontal:只缩放水平方向

Vertical:只缩放垂直方向

Bose:缩放两个方向

BasedOnHeight:基于高度等比缩放

然后基于这些我自己实现了一个

BasedOnWidth:基于宽度等比缩放

代码如下:


[csharp] view plaincopy



  • else if(style == Style.BasedOnWidth)  
  • {  
  •     localScale.x = relativeSize.x * screenWidth;  
  •     localScale.y = relativeSize.y * screenWidth;  
  •     localScale.z = localScale.x;  
  • }  


这段代码添加在Update方法里面。为了能将UIStretch挂在UIPanel上面不出问题,所有将Z轴也缩放了。

自适应流程

1. 创建一个新的UI,将Anchor里面的UIAnchor调整的合适的位置,注意最好将Anchor设置为Bottom。

2. 将Camera的Size调节到默认屏幕大小。比如UI是以960*640分辨率制作的,那么将Camera的Size调整到960。

3. 在Panel上面添加一个UIStretch,模式选择BasedOnWidth。完成之后你可以看到你的Panel的Scale被修改到了当前屏幕的X方向分辨率大小。

4. 将UI控件添加到Panel上,调整位置,在Panel下的所有控件都会以X方向为标准做等比缩放来适应屏幕大小。

5. 添加一张作为背景的图,将UISprite的anchor设置为Bottom,添加之后你可以看到这个sprite可以在不同的分辨率下自适应了。

6. 以上一步添加的背景图作为参照物来摆放页面上的控件,这样不仅仅是大小,位置也同样会按照相同的模式进行等比缩放

7. 可以在第3步创建的Panel下面添加子Panel,子Panel不需要UIStretch(一般用来做Draggable Panel,否则没必要,会增加额外的Draw Call)

8. 如果某一些控件需要定位在屏幕上下左右中的某一角,可以单独给他添加一个UIAnchor,这个时候UIStretch只会缩放这个控件的大小,它的位置由他自己的UIAnchor控制了



下面是我常用的方法和分析

我一般什么也不做,把root脚本改成FixedOnMobile


然后设置manual的值为你窗口的高度就可以了
之后在不同的设备上,会自动根据高度缩放
所有我们需要三个anchor分别放在left,right和middle就可以了
左侧元素放在left下,右侧放right下就可以了
设备分辨率不同时也不会差太多
对于那种奇葩的分辨率不必支持也没事(心里话)
PS:还有一个选项是PixelPerfact,就是根据你设置的最小和最大高度,如果设备高度在两个值之间,ui组件不会产生缩放,保持原样,大于max是放大,小于min时缩小,试试就明白了

本文转自:http://blog.csdn.net/u010386327/article/details/9226997
分享至:
| 人收藏
回复

使用道具 举报

该用户从未签到

沙发
777 发表于 2014-4-5 20:57:46 只看该作者
谢谢哦
回复 支持 反对

使用道具 举报

该用户从未签到

板凳
52cwalk 发表于 2014-5-14 14:59:06 只看该作者
非常的好
回复 支持 反对

使用道具 举报

该用户从未签到

地板
chenhu2long 发表于 2014-7-18 17:08:13 只看该作者
现在新版本的NGUI出来了,这个还能用吗?
回复 支持 反对

使用道具 举报

该用户从未签到

5#
langzi001_ar 发表于 2015-5-23 00:44:12 只看该作者
zuile  zhi 这种实现 还以为是metaio的相关内容
回复 支持 反对

使用道具 举报

该用户从未签到

6#
lingc198 发表于 2015-5-28 09:28:19 只看该作者
给力涨姿势哈
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Copyright © 2013-2017 ARinChina-增强现实中国技术论坛   All Rights Reserved.