• 【Unity3D插件】NGUI屏幕自适应 .


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

     如果原作者不同意转载,请留言我会尽快删除!

    屏幕自适应

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

    主要组件

    1. UIAnchor

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

    2. UIStretch

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

    Horizontal:只缩放水平方向

    Vertical:只缩放垂直方向

    Bose:缩放两个方向

    BasedOnHeight:基于高度等比缩放

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

    BasedOnWidth:基于宽度等比缩放

    代码如下:

     

    1. else if(style == Style.BasedOnWidth)  
    2. {  
    3.     localScale.x = relativeSize.x * screenWidth;  
    4.     localScale.y = relativeSize.y * screenWidth;  
    5.     localScale.z = localScale.x;  
    6. }  
    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控制了

  • 相关阅读:
    vue使用elementui合并table
    使用layui框架导出table表为excel
    vue使用elementui框架,导出table表格为excel格式
    前台传数据给后台的几种方式
    uni.app图片同比例缩放
    我的博客
    【C语言】取16进制的每一位
    SharePoint Solution 是如何部署的呢 ???
    无效的数据被用来用作更新列表项 Invalid data has been used to update the list item. The field you are trying to update may be read only.
    SharePoint 判断用户在文件夹上是否有权限的方法
  • 原文地址:https://www.cnblogs.com/alongu3d/p/3017347.html
Copyright © 2020-2023  润新知