当前位置：首页 > news >正文

Unity_UI_NGUI_UI组件

news 2025/6/25 10:18:45

Unity_UI_NGUI

一、UI_NGUI_UI组件

1.Root组件(UIRoot)

UIRoot 组件是 NGUI UI 系统的根节点，负责整个 UI 的分辨率适配和缩放。它有三种主要的适配模式：

1. Flexible（灵活模式）

UI 以像素为基础，100 像素的物体无论在多少分辨率上都是 100 像素。
这意味着 100 像素在分辨率低的屏幕上可能显示正常，但在高分辨率上会显得很小。
适用场景：适用于可以手动拖窗口改变分辨率的设备，比如 PC 端。
主要参数：
- Minimum Height：屏幕高小于该值时，开始按比例缩放。
- Maximum Height：屏幕高大于该值时，开始按比例缩放。
- Shrink Portrait UI：竖屏时，按宽度来适配。
- Adjust by DPI：使用 DPI 做适配计算，建议勾选。

2. Constrained（约束模式）

屏幕按尺寸比例来适配，不管实际屏幕有多大，NGUI 都会通过合适的缩放来适配屏幕。
这样在高分辨率上显示的 UI 就会被放大保持原有大小，但可能会模糊，好处是各设备看到的 UI 和屏幕比例是一样的。
适用场景：适用于移动设备。因为移动设备都是全屏应用，不会频繁改变分辨率，只需适配不同分辨率的设备。
横屏建议勾选高 fit，竖屏建议勾选宽 fit，一般可以比较好地进行分辨率适应。
主要参数：
- Content Width：按照该宽度值适配屏幕，制作资源时的默认分辨率宽。
- Content Height：按照该高度值适配屏幕，制作资源时的默认分辨率高。
- 勾选 Width：屏幕比例变化时，按宽度来适配（宽度始终不变）。
- 勾选 Height：屏幕比例变化时，按高度来适配（高度始终不变）。
- 两个都勾选：不会被裁剪，但有黑边。当适配宽高比大于实际宽高比时，按宽度适配，反之按高度适配。
- 如果两个都不勾选：始终保证 UI 填充满屏幕，但可能会被裁剪。
注意事项：背景图一定要考虑极限宽高比，极限宽高比突出，最大宽高比如 19.9:9。

3. Constrained On Mobiles（移动端约束模式）

上两种模式的综合体。
在 PC 和 Mac 等桌面设备上用 Flexible 模式，在移动设备上用 Constrained 模式。
适用场景：适用于多平台发布的游戏和应用。

补充说明像素与分辨率

在UI开发中，理解像素（Pixel）、分辨率（Resolution）、DPI（每英寸像素数）等概念非常重要，这些直接影响UI的显示效果和适配策略。

像素（Pixel）：屏幕上最小的显示单元。UI元素的大小通常以像素为单位进行设计和布局。
分辨率（Resolution）：指屏幕水平方向和垂直方向的像素数量，例如1920×1080。分辨率越高，屏幕显示的内容越细腻。
DPI（Dots Per Inch）/PPI（Pixels Per Inch）：每英寸所包含的像素点数。DPI越高，单位面积内像素越多，显示越精细。
UI适配：指UI在不同分辨率、不同屏幕尺寸、不同DPI设备上都能保持良好显示和交互体验的能力。

常见误区

高分辨率=大显示面积？ 实际上，高分辨率只代表像素多，显示面积还取决于屏幕物理尺寸和DPI。
像素大小=物理大小？ 不同DPI下，同样像素数的UI元素在不同设备上物理大小可能完全不同。
UI设计稿直接等于最终显示？ 需要结合分辨率和适配策略，UIRoot等组件会根据实际设备进行缩放和调整。

UI适配建议

设计UI时要考虑主流分辨率和极端宽高比，避免UI在某些设备上过大或过小。
合理使用NGUI的Flexible、Constrained等模式，结合DPI和分辨率进行适配。
背景图等大面积元素建议按最大宽高比设计，避免拉伸或裁剪。

2.Panel组件(UIPanel)

UIPanel（面板）是NGUI中用于管理UI渲染顺序和裁剪的核心组件。其主要参数说明如下：

主要参数说明

Alpha
- 控制所有子UI元素的透明度。
Depth
- 控制该Panel的层级。层级高的Panel渲染时会把层级低的先渲染的遮挡住。
Clipping（裁剪）
- 控制Panel的内容显示范围，有四种模式：
  - None：不处理，正常显示。
  - Texture Mask：根据图片信息进行遮罩（如人物头像）。
  - Soft Clip：自定义范围裁剪（如拖动框）。
  - Constrain But Dont Clip：约束但不裁剪，不裁剪画面，只限制响应范围。
Sorting Layer（排序层）
- 控制该Panel所在的渲染层级，决定UI的显示顺序。

Advanced Options（渲染相关高级选项）

Render Q（渲染队列）：渲染顺序。
Sort Order（排序）：同层内的排序。
Normals：是否需要灯光着色器。
UV2：是否用于自定义着色器效果。
Shadow Mode：元素组件拖动时提升。
Cull：元素组件拖动时剔出。
Visible：检查元素组件是否离开屏幕。
Padding：边界内容。
Offset：抵消偏移位置。
Static：检查子元素是否会移动。
Panel Tool：是否显示面板工具。
Anchors（锚点设置）
- 用于分辨率自适应设置大小。

Panel组件总结与注意事项

1. 没有Panel父对象，UI控件看不到。
- 所有UI控件必须作为某个Panel的子对象，否则不会被渲染。
2. Panel一般用于管理面板，控制层级。
- Panel主要用于管理UI面板的渲染顺序和分组，便于UI的分层和遮挡控制。
3. 一个UI界面可以有多个Panel，一般一个Panel管理一个面板。
- 复杂界面可按功能或层级拆分为多个Panel，提升管理和适配灵活性。

3.EventSystem(UICamera)

EventSystem（事件系统）是 Unity UI 输入与交互的核心组件，负责管理鼠标、触摸、键盘等各种输入事件。其主要参数说明如下：

主要参数说明

Event Type（事件类型）
- 决定脚本如何对鼠标和触屏事件进行响应。
- UI 模式：处理事件的方式为相机组件的深度。
- World 模式：按距离主摄像机的远近来进行响应排序。
- 2D 和 3D 的区别：碰撞器是用 3D 碰撞器还是 2D 碰撞器。
Events go to
- 事件通过刚体还是碰撞盒传递。
Process Events In
- 事件是在 Update 中还是 LateUpdate 中处理（一般默认 Update）。
Event Mask
- 指定哪些游戏对象层级会接收事件。
Debug
- 开启后可调试模式，判断当前鼠标/事件交互的对象，可在 Scene 窗口看到信息。
Command Click
- Mac 电脑上是否用 Command 按键模拟右键操作。
Allow Multi Touch
- 是否支持多点触碰。
Auto Hide Cursor
- 游戏有控制器或其他输入设备时，是否自动隐藏光标。
Sticky Tooltip
- 是否使用 tooltip。
Long Press Tooltip
- 是否长按出现提示。
Tooltip Delay
- 停留多久出现 tip。
Raycast Range
- 射线长度，一般不修改。
EventSources（接收的事件来源）
- Mouse（鼠标）
- Touch（触摸）
- Keyboard（键盘）
- Controller（控制器）
Thresholds（行为阈值）
- 调整鼠标事件的点击、拖拽、轻拍等行为的判定阈值：
  - Mouse Drag（鼠标拖拽）
  - Mouse Click（鼠标点击）
  - Touch Drag（触摸拖拽）
  - Touch Tap（触摸点击）
Axes and keys（热键关系）
- 一般不修改。