zoukankan      html  css  js  c++  java
  • NGUI屏幕自适应(转)

     

    屏幕自适应

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

    主要组件

    1. UIAnchor

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

    2. UIStretch

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

    Horizontal:只缩放水平方向

    Vertical:只缩放垂直方向

    Bose:缩放两个方向

    BasedOnHeight:基于高度等比缩放

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

    BasedOnWidth:基于宽度等比缩放

    代码如下:

    [csharp] view plaincopy
    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. }  

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

     在u3d编辑器中能开导缩放效果
    但发布到网页就没效果了

    检查一下你的UIStretch上面依赖的camera是不是你修改了size那个
    正常情况下,你的UIPanel挂上UIStretch之后的scale大概在1000左右,比较大,你可以看看你的UIPanel的位置和大小与camera的相对位置

  • 相关阅读:
    2018-2-13-安装-aria2
    ..USERstm32f10x.h(428): error: #67: expected a "}" ADC1_2_IRQn = 18, /*!
    zubax_gnss移植到STM32F407
    ChibiOS/RT移植到STM32F407
    arm-none-eabi/bin/ld: build/com.zubax.gnss.elf section `.text' will not fit in region `flash'
    Traceback (most recent call last): File "../zubax_chibios/tools/make_boot_descriptor.py", line 251
    Eclipse 交叉编译环境
    PX4/Pixhawk uORB
    FreeRTOS 任务创建和删除(静态)
    FreeRTOS 任务创建和删除(动态)
  • 原文地址:https://www.cnblogs.com/softimagewht/p/3201653.html
Copyright © 2011-2022 走看看