zoukankan      html  css  js  c++  java
  • 透过UIRoot深入理解NGUI提供的屏幕适配方案

    主要代码:UIRoot,UIOrthoCamera,UIRect.GetSides(UIPanel使用UIRect的)里的GetSides,代码量很少,但需要思考和测试验证。

    一、UIRoot的基本内容:
    1.提供2种适配方式:pixel perfect和fixsize(新版本改成Flexible和Constrained,但一样的)
      前者是一个50x50的图标,无论在1280x720还是500x500的分辨率(屏幕尺寸)的屏幕上,都占屏幕中50x50的像素数目,所以在500x500的分辨率下会显得很大(因为它屏占比变大了许多);
      后者是无论在什么分辨率下,只要分辨率的比例是一样的,图标的屏占比不变。
      一开始我以为是后者做了额外的东西,深入了解后发现其实是前者做了额外的东西,后者啥都没干,现在先来看后者的效果是怎么出来的:
        fixsize保持UIRoot的scale恒定,且UICamera的orthographicSize=1恒定,并且每个dc对应的mesh的位置,顶点世界坐标等都不变,
    屏幕尺寸变化时(比例不变),变的只有屏幕尺寸,所以它只是把相同的东西(mesh)渲染到不同的分辨率屏幕而已,就这样有了不变的屏占比。
        而如果分辨率比例变了,需要更新各个锚了UIPanel的物体的坐标,让他们新的水平边界,如果比例小于manulWidth/manulHeight,
    则物体往中间“挤”,如果大于则往外面拉。
      而pixel perfect则根据屏幕尺寸不断变化UIRoot的scale,触发了2件事情,一个是各个锚点的更新(主要是需要更新锚UIPanel的物体),
    一个是dc的重绘,所以各个mesh的位置,坐标等都发生了改变,为的就是维护图标的占的像素数目不变

    2.无论是哪种方案,锚在UIPanel的物体可以认为是锚在uicamera的视口矩形上,这个矩形是height=2(即中心到上下边界都是1)的矩形,width根据视口比例得到,
    所以当比例变的时候需要更新锚点,得到的mesh也会变。
    (注:height能保持2这么小且固定是因为uiroot上加了缩放,把mesh都缩到这个固定矩形里了,具体我后面会谈到)

    3.所以NGUI的适配做了2件事情:
      1).当分辨率比例变换时,更新锚点,让那些锚在视口的物体更新位置,移动物体的位置保证物体锚在视口的正确位置。
      2).当分辨率比例不变,只是尺寸变了,根据不同的适配方式对UIRoot设置不同scale,并且当scale变时更新锚点(因为最上层scale变时,下层的position变了,需要更新锚点)。
      UIRoot的处理是,先2后1,即先设置scale,缩放物体,然后更新锚点,让缩放后的物体锚到height=2的矩形里,所以无论scale是多少,
    只要物体是锚在UIPanel上,那物体都在视口内。

    4.但做适配的一般思路应该是,设置UICamera的orthographicsize,来确定相机的视口矩形(视口矩阵就是height=2*orthographicsize的矩形)
    以在更新锚点后,物体的位置和大小能正确显示在视口内,估计NGUI原来也是这样做的,可以参考UIOrthoCamera脚本,我把orthographicsize
    设死为720/2后,并且把UIRoot去掉,效果和fixsize一模一样,而设为screenheight/2,并加上发送UpdateAnchors事件后,效果和pixel perfect一样。
    这种思路是拿相机去套物体,细节是设好相机视口,然后把物体锚到视口矩形里。
      fixsize模式:
        分辨率相同比例但不同尺寸下:视口矩形保持不变,所以只是把相同的东西显示到不同尺寸的屏幕而已。
        分辨率比例不同:视口矩形变了,更新锚点,物体的位置变化,一般保持视口矩形的height,根据视口比例算出width
      pixel perfect模式:
        视口矩形直接用屏幕分辨率矩形,所以视口矩形随屏幕尺寸变而变,更新锚点,物体都“挤”在视口矩形中,所以图标占的像素数目是不变的。
    5.但NGUI的新版本使用另外的思路:保持视口矩形的height=2,缩小物体,然后更新锚点,把物体塞到这么小的视口矩形中,缩小物体是通过UIRoot.localScale做的。

  • 相关阅读:
    解决一起web 页面被劫持的案例
    django rest framwork教程之外键关系和超链接
    django restframwork 教程之authentication权限
    Puppet nginx+passenger模式配置
    Django restframwork教程之类视图(class-based views)
    使用emplace操作
    C++中的显示类型转换
    整数加法
    在不知道学生人数和每个学生课程数量的情况下对学生的平均成绩排序
    树的高度
  • 原文地址:https://www.cnblogs.com/Tearix/p/8301211.html
Copyright © 2011-2022 走看看