马三最近跳槽到了一家新公司做编码。 新公司的UI部分使用NGUI插件，而之前的公司一直使用Unity自带的UGUI，所以马三利用业余时间学习了如何使用NGUI插件。 ，并将知识点记录到博客中与大家分享。
在我们使用NGUI插件创建的UI中，我们可以发现UIRoot对象和Camera对象都有NGUI专用的脚本组件。 UIRoot对象有两个组件，UIRoot和UIPanel，子对象Camera有一个UICamera组件。 这三个是NGUI系统中比较核心的组件。 今天我们就来详细研究一下它们。
浅谈UIRoot、UIPanel、UICamera组件 UIRoot组件
UIRoot组件总是出现在NGUI的UI“树”的顶层，也就是“根”对象。 如下所示：
图1：UIRoot UIPanel显示
它的作用是缩放 UI。 艺术家制作的图片一般以像素为单位来衡量，比如1280 x 720等，而在Unity中单位是米。 如果一个100 x 100像素的UI组件放置在1000 x 1000分辨率的屏幕上，按理说这个UI元素应该是屏幕尺寸的1%，但是因为Unity中的单位是米，所以会从100 x 100 像素到 100 x 100 米，这会导致一个很小的 UI 变得非常非常大像素游戏开发引擎，UIRoot 会通过屏幕缩放 UI 控件，使 UI 控件在视觉上正常。
在UIRoot组件中，它提供了3种缩放方法（即UIRoot组件下的Type值），分别是：PixelPerfect、FixedSize、FixedSizeOnMobiles。
PixelPerfect指的是始终保持像素大小不变。 例如，100 x 100 像素的图片在 500 x 500 分辨率的屏幕上就是 100 x 100 像素。 在 1000 x 1000 像素的屏幕上它仍然是 100 像素。 x 100 像素，因为其源文件就是该大小，而 PixelPerfect 保持该大小。 这样UI画面就会始终保持最清晰，但这种模式的缺点是会导致高分辨率下UI显得很小，低分辨率下UI会显得很大。
FixSize模式与上述模式正好相反。 在FixedSize模式下，NGUI将不再保护图像的原始尺寸，而只会关心NGUI本身所需的缩放参数。 在这种模式下，必须设置 UIRoot 的 ManualHeight 值，然后 NGUI 会将所有控件按此值进行比例调整。 缩放。 例如：将ManualHeight的值设置为1000，那么一张100 x 100像素的图片在屏幕分辨率为1000时占据高度的1/10，那么当UI放置在分辨率为500 x500的屏幕上时，仍然占据高度的1/10，但是图像的尺寸自动缩放为50 x 50。这保证了UI和屏幕之间的分辨率比例是一定的。
FixSizeOnMobiles 是这两种解决方案的组合。 它将使得UI在PC、Mac和Linux系统上自动采用PixelPerfect，并在移动设备上自动采用FixedSize。
如果不选择FixedSize，则必须设置其他两种缩放模式下的MinimumHeight和MaximumHeight值。 例如：选择PixelPerfect模式，将MinimumHeight设置为7202d素材，将MaximumHeight设置为900，那么在分辨率为800 x 600的屏幕上，由于屏幕分辨率的高度小于UIRoot中的最小高度，UIRoot会遵循FixedSize mode 下面是ManualHeight为720的情况，同理，如果UI放置在分辨率为1920 x 1080的屏幕上，因为屏幕1080的分辨率高度大于设置的900，UIRoot会处理根据FixedSize模式下ManualHeight为900的情况来设置。 （NGUI3.7.0之后，缩放模式变为Flexible：相当于PixelPerfect，Constrained：相当于FixedSize，ConstarinedOnMobiles：相当于FixedSizeOnMobiles）。
UIPanel组件
如下图所示，UIPanel还具有很多属性。 其中Alpha属性顾名思义就是透明度，默认为1不透明。 它将控制其下方所有小部件的透明度。 （所有的UI控件都有Widgets，因为它们都是继承自Widgets）也就是说，它会导致其子对象中的所有UI控件一起改变透明度，并且可以用来淡入淡出整个UI。 隐藏等
图2：UIPanel显示
深度 深度属性是一个非常重要的属性。 在NGUI中，每个Panel都有一个Depth，每个Widget控件也有一个Depth。 Depth会决定渲染的顺序，直接影响UI之间的重叠关系。 Depth较高的控件会显示在视野的上层，Depth较高的Panel也会显示在视野的上层。 但Panel的Depth权重远高于Widget。 也就是说，大多数情况下，属于Depth低的Panel的控件，无论你如何增加控件的Depth，都会显示在Depth高的Panel中。 背后的控制。 当你有多个Panel时，比如你创建了多个面板界面，每个界面都有一个Panel，那么尽量保证这些Panel不要共享相同的Depth，因为这会导致NGUI渲染时失败。 如果用一次DrawCall完成，就会增加DrawCall的数量来保证渲染顺序不混乱，从而增加性能开销。 但是，当 NGUI 遇到具有共享 Depth 的 Panel 时，它会提醒您。
Clipping是指剪切窗口，它允许面板只显示某个区域。 这个功能在ScrollView滚动框或者滚动列表中非常有用。 Clipping 总共提供了 3 种模式：
Render Q可以理解为渲染顺序，默认是自动设置的。 当与粒子系统结合使用时，此选项会产生影响（将在下面的单独段落中进行解释）。 如果该Panel下的UI需要受光照影响（NGUI的UI默认不接受光照效果），则需要勾选Normals。 如果Panel下的所有UI控件都不会移动，可以勾选Static将其设置为静态，这样Panel下的所有控件都会忽略位置、旋转、缩放等操作，永远保持不动。 虽然这可以提高一些性能，但请谨慎使用。
本节我们主要了解Render Queue和粒子系统之间的一些联系。 有时，我们会发现粒子在界面上无法正确显示。 很多情况下，都是Render Queue的错。 上面我们了解到，在NGUI中，渲染层次关系是由Depth决定的，但最本质的还是由渲染Render Queue决定的，这是Shader中的常用参数。 在NGUI中，每个Panel还有一个RenderQ设置项。 RenderQ越高，在上层显示的位置就越高。 粒子系统的RenderQ一般为3000，所以如果我们想让粒子在两个Panel之间，只需要将其中一个Panel的RenderQ改为StartAt模式，将该值设置为3000以下的值，然后更改RenderQ即可另一个小组的。 将其设置为 3000 以上的值以允许粒子显示在两个面板之间。 当然，如果你只想让粒子显示在顶层，最简单的办法就是添加一个摄像机，为这个粒子设置一个单独的Layer游戏图片，让新添加的摄像机只渲染粒子所在的Layer像素游戏开发引擎，并且将此相机的 Clear Flag 设置为 Depth Only，然后将渲染深度值设置为最高。
单击 Show Draw Calls 按钮可以查看面板下所有的 DrawCall 消耗。
UICamera组件
下图是UICamera组件的截图。 UICamera组件的核心功能是让相机用该组件渲染的对象能够接收NGUI事件。 如果我们自己创建一个对象，想要为这个对象使用NGUI中的一些事件，比如OnPress()、OnDrag()等，我们需要在渲染该对象的相机上添加一个UICamera组件。
图 3：UICamera 显示
在UICamera中，我们不需要更改大部分设置。 它让我们的事件支持接受多点触摸、鼠标、键盘、触摸屏等事件。 但需要注意的是EventMask选项。 这个EventMask和相机中的CullingMask非常相似。 相机的CullingMask是选择渲染哪几层物体，EventMask是选择哪几层物体接受事件。 默认情况下，UICamera 只会接收我们创建 UI 时自动设置的 Layer。 但是如果我们在制作UI的过程中，由于某种原因修改了UI层之后，一定要记得修改UICamera的EventMask。 否则，我们会发现点击UI没有任何响应，因为它无法接收到本Layer对象的事件。
