zoukankan      html  css  js  c++  java
  • 【Unity3D插件】NGUI屏幕自适应(转)

    屏幕自适应

    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;
    }

    这段代码添加在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控制了

     

    如果还有什么问题,欢迎大家拍砖,喷碳酸盐水

    以上为转载内容,转自:http://blog.csdn.net/daiguangda/article/details/7888942

    我在实现时做了一点点改动,都是针对自适应流程:

    原2.camera的size仍为1

    原3.模式选择both,Relative Size的x设为1/960,y设为1/640(横屏)

    这样一则不用更改控件的大小,二则可以完全适配,没有黑边,但会有些缩放。

  • 相关阅读:
    TextBox 只有下划线
    can't find web control library(web控件库)
    DropDownListSalesAC”有一个无效 SelectedValue,因为它不在项目列表中。
    IDE、SATA、SCSI、SAS、FC、SSD 硬盘类型
    如何打印1px表格
    CSS控制打印 分页
    Virtual Server could not open its emulated Ethernet switch driver. To fix this problem, reenable the Virtual Server Emulated Et
    Xml中SelectSingleNode方法中的xpath用法
    热带水果莫入冰箱?水果存放冰箱大法
    探索Asp.net的Postback机制
  • 原文地址:https://www.cnblogs.com/zhiweifire/p/3248465.html
Copyright © 2011-2022 走看看