UG2L1-1——Root组件

必备概念——分辨率概念

1.分辨率

屏幕宽高两个方向的像素点
比如1920 * 1080,即宽1920个像素,高1080个像素

2.像素

像素,像素即px,是画面中最小的点(单位色块)

3.屏幕尺寸

屏幕对角线长度

4.屏幕比例

PC显示器:1920:1080 = 16:9

苹果手机

iPhone7,8:1334 * 750 = 16:9、iPhone7,8 Plus:1920 * 1080 = 16:9
iPhoneX:2436 * 1125 = 19.5:9、iPhone12: 2532 * 1170 = 19.5:9

目前市面上设备分辨率比例传统的有:

4:3(ipad)、16:10、16:9(老手机 、电脑显示器)、18:9(去掉刘海屏幕)、19.5:9( 新款手机)、19.9:9

5.dpi

像素密度:单位面积上有多少个像素点,一般指一英寸有多少个像素点

Root

Root是用于分辨率自适应的根对象
可以设置基本分辨率,相当于设置UI显示区域
并且管理所有UI控件的分辨率自适应

可以简单理解 它管理一个 UI画布 所有的UI都是显示在这个画布上的
它会管理 UI画布 和 不同屏幕分辨率的 适应关系

参数相关

  1. Flexible 适用于可以手动拖窗口改变分辨率的设备 比如pc端
  2. Constrained 适用于移动设备
    因为移动设备都是全屏应用 不会频繁改变分辨率 只用适配不同分辨率的设备
    横屏勾选 高 fit 竖屏 勾选 宽 fit 一般就可以比较好的进行分辨率适应了
    需要注意的是 背景图 一定要考虑 极限 宽高比来出 最大宽高比 19.9:9
  3. Constrained On Mobiles 是上面两者的综合体 适用于多平台发布的游戏和应用

Flexible - 灵活模式

在该模式下,UI都是以像素为基础,100像素的物体无论在多少分辨率上都是100像素
这就意味着,100像素在分辨率低的屏幕上可能显示正常,但是在高分辨率上就会显得很小

一般用于PC端

image

  • Minimum Height
    屏幕高小于该值时
    开始按比例缩放
  • Maximum Height
    屏幕高大于改值时
    开始按比例缩放
  • Shrink Portrait UI
    竖屏时,按宽度来适配
  • Adjust by DPI
    使用dpi做适配计算
    建议勾选

Constrained - 约束

该模式下,屏幕按尺寸比例来适配,不管实际屏幕有多大
NGUI都会通过合适的缩放来适配屏幕。
这样在高分辨率上显示的UI就会被放大保持原有大小,但有可能会模糊,好处是各设备看到的UI和屏幕比例是一样的

一般用于手机端

image

  • Content Width
    按照该宽度值适配屏幕
    制作资源时的默认分辨率宽

  • Content Height
    按照该高度值适配屏幕
    制作资源时的默认分辨率高

  • Fit表示以那个值做适配

    • 勾选Width
      屏幕比例变化时,按照宽度来适配(宽度始终不变)
      竖屏游戏建议
    • 勾选Height
      屏幕比例变化时,按照高度来适配(高度始终不变)
      横屏游戏建议
    • 两个都勾选
      不会被裁剪,但是有黑边
      当适配宽高比大于实际宽高比时,就会按照宽度适配,
      反之按照高度适配
      特殊情况
    • 如果两个都不勾选
      始终保证屏幕被UI填充满
      不会有黑边,可能会被裁剪

Constrained On Mobiles - 在移动设备上约束

上面两种模式的综合体
在PC和Mac等桌面设备上用Flexible模式
在移动设备上用Constrained模式

image