魔灵 发表于 2012-12-30 19:07

NGUI如何自适应屏幕教程

屏幕自适应NGUI可以比较方便的实现屏幕自适应,但是它的官方教程里面针对这个问题没有详细的教程,所以可能在实现的时候会走比较多的弯路。以下是我在开发过程中找到的一个比较方便的实现方法。主要组件1. UIAnchor这个是用来确定控件在屏幕中的位置,另外有一篇教程专门讲它的功能,所有不会再赘述2. UIStretch这个是用来做缩放的组件。老版本的NGUI是集成在UIAnchor上的。新版本的UIStretch提供了4种缩放方式:Horizontal:只缩放水平方向Vertical:只缩放垂直方向Bose:缩放两个方向BasedOnHeighthttp://enveesoft.dyndns.biz:8082/images/icons/plus.gif:基于高度等比缩放然后基于这些我自己实现了一个BasedOnWidthhttp://enveesoft.dyndns.biz:8082/images/icons/plus.gif:基于宽度等比缩放代码如下:
[*]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的Sizehttp://enveesoft.dyndns.biz:8082/images/icons/plus.gif调节到默认屏幕大小。比如UI是以960*640分辨率制作的,那么将Camera的Sizehttp://enveesoft.dyndns.biz:8082/images/icons/plus.gif调整到960。3. 在Panel上面添加一个UIStretch,模式选择BasedOnWidthhttp://enveesoft.dyndns.biz:8082/images/icons/plus.gif。完成之后你可以看到你的Panel的Scalehttp://enveesoft.dyndns.biz:8082/images/icons/plus.gif被修改到了当前屏幕的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控制了

介子_迷了眼 发表于 2013-1-30 11:59

我很懒,只想回复看看,楼主辛苦了!

feilangyue 发表于 2013-3-21 15:04

谢谢分享。支持论坛中大家的分享{:5_401:}{:5_401:}{:5_401:}{:5_401:}

迷途凡尘 发表于 2013-4-8 11:15


不错 不错 不错{:soso__3922851084632044791_6:}

陈巧023 发表于 2013-6-8 17:15


不错 不错 不错{:soso__3922851084632044791_6:}

versace 发表于 2013-9-16 17:24

自适应是可以了 但是NGUI的button不管用了哦 还有 自己做的按钮 加载进来 图片按钮 也不管用了

此方 发表于 2013-9-16 17:46

学习了!!!!

angel29hao 发表于 2017-2-12 19:24

顶顶多好

hxcspitfire 发表于 2017-2-12 18:50

真心顶

HackerEva 发表于 2017-2-12 19:18

说的非常好
页: [1]
查看完整版本: NGUI如何自适应屏幕教程