• NGUI之UIRoot——屏幕的自适应分辨率的计算


    //原来写在其他博客上的东西,搬迁
    预备知识:
    • 要明确的三个概念
      • 设计分辨率:在编辑器上开发UI使用的分辨率。我们所有的UI都是在这个分辨率下设计制作的。
      • 显示区域分辨率:设备上所显示的UI区域在编辑器中的分辨率。
      • 屏幕分辨率:设备实际的分辨率。
    • 已知设计分辨率,屏幕分辨率,区域分辨率的计算方法
      • 设置变量
        • 设计分辨率 ContentWidth * ContentHeight,以下简写为 CW * CH
        • 屏幕分辨率 width * height,以下简写 W * H
        • 区域分辨率 TargetWidth * TargetHeight,以下简写 TW * TH (这两个是未知量)
        • 所求区域分辨率用 Target 表示
      • 求解
        • 模式一:保持各个UI在屏幕中所占的百分比(保持宽高比)

     

    不留黑边

    留黑边

    CW / CH < W / H

    CW / TH = W / H

    Target = CW * TH

    TW / CH = W / H

    Target = TW * CH

    CW / CH > W / H

    TW / CH = W / H

    Target = TW * CH

    CW / TH = W / H

    Target = CW * TH

    黄色的公式:以宽度为基准自适应 (所用公式记为:公式一)

    绿色的公式:以高度为基准自适应 (所用公式记为:公式二)

     

    • 模式二:保持各个UI的像素大小不变(保持宽高比)
    Target = W * H
    • 模式三:保证UI元素在单方向上的比例不变,即自由拉伸保持宽高比)
    Target = CW * CH(此时 CW 和 CH 是随着屏幕分辨率变化的)

    UIRoot

     

    • Flexible 即,上文所说的模式二。但有个地方要额外注意下:
      • 这种模式下有两个参数,MinHeight 和 MaxHeight。
      • 当屏幕分辨率在 MinHeight 和 MaxHeight 之间时,此时按照模式二正常显示;
      • 当屏幕分辨率小于 MinHeight 或者大于 MaxHeight 时,会对整体UI进行缩放,缩放比例为(H / MinHeight) 或者(H / MaxHeight)
    • Constrained 即, 上文所说的模式一。
      • 这种模式下有四个参数,ContentWidth 与 ContentHeight 以及对应的 Fit
      • ContentWidth 与 ContentHeight 填我们的设计分辨率
      • Fit 有四种选择模式,不同的模式有不同的自适应方案。为了便于理解,从NGUI网站上找到了一张示意图&自己总结了一下计算所需的公式:

      

     

    Fit Width

    No

    Yes

    No

    Yes

    Fit Height

    No

    No

    Yes

    Yes

    显示&对应计算公式

    保证设备不显示黑边

    保证左右无黑边

    (公式一)

    保证上下无黑边

    (公式二)

    保证设计分辨率内所有UI全部显示

     

      • 额外的计算:计算某个UI(比如图片)在设备上的分辨率
        • 图片分辨率大小 PW * PH
        • 图片在设备上显示的分辨率大小 TPW * TPH(未知量)
        • 计算:需要一个方程组
          • (PW * PH) / (TW * TH) = (TPW * TPH) / (W * H)
          • PW / PH = TPW / TPH
  • 相关阅读:
    第02组 Beta冲刺(4/4)
    第02组 Beta冲刺(2/4)
    第02组 Beta冲刺(3/4)
    第02组 Beta冲刺(1/4)
    第02组 Alpha事后诸葛亮
    第02组 Alpha冲刺(4/4)
    第02组 Alpha冲刺(3/4)
    第02组 Alpha冲刺(2/4)
    第02组 Alpha冲刺(1/4)
    第02组 Beta版本演示
  • 原文地址:https://www.cnblogs.com/singledigit/p/5853817.html
Copyright © 2020-2023  润新知