ngui 层级关系处理

鉴于 NGUI 的层级关系较为复杂，今天我们来探讨一下 NGUI 层级关系的处理方法。

项目界面图集使用情况

在项目中开发较为复杂的界面时，常常会用到多个图集。以技能界面为例，通常会有以下几种图集分类：

• 共用图集：项目中常用的图片会被放到共用图集中。
• 技能界面专属背景图集：技能界面本身独有的元素，例如与技能职业相关的背景，会单独算作一个图集。
• 技能图标图集：将技能图标单独归类到一个图集中。
• 字体图集：用于显示文字的字体图集。

一般来说，按照这样的分类方式，一个界面最多需要 4 个图集。

传统图集处理方式的问题

NGUI 图集之间的处理，默认是通过调整控件的 Z 值来区分层级的。然而，这种方式存在一定的局限性。虽然可以调整同一个图集中每个控件的 Z 值，但实际效果并不理想。在界面控件较多的情况下，经常会出现图层相互遮挡的问题。而且，当一段时间后需要回过头来修改界面时，由于 Z 值调整的复杂性，很容易让人感到崩溃。

改进的处理方法

我的做法是在 UIPanel 中，为每一个 Material 添加一个 layer 变量。具体规则如下：

• 当控件处于同一图层时，依靠 depth 来决定它们的前后关系。
• 当控件处于不同图层时，依靠 layer 来决定它们的前后关系。

在绘制 UIDrawCall 的时候，根据 layer 对根节点做一定偏移。通过这种方式，我们可以从复杂的 Z 值调整中解放出来。

总结与展望

如果大家在开发过程中也遇到了图层处理的问题，可以参考这种做法。采用这种方法来处理图层关系较为简单，在处理过的多个项目的复杂 UI 中，尚未出现无法解决的情况。

后续我会上传一张效果图，同时如果大家需要代码参考，后续我也会将具体实现代码一并发布。