NGUI屏幕自适应

http://blog.csdn.net/daiguangda/article/details/7888942

 

 

屏幕自适应

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

主要组件

1. UIAnchor

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

2. UIStretch

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

Horizontal：只缩放水平方向

Vertical：只缩放垂直方向

Bose：缩放两个方向

BasedOnHeight：基于高度等比缩放

而后基于这些我本身实现了一个

BasedOnWidth：基于宽度等比缩放

代码以下：

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

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控制了