NGUI层级深度理解总结

NGUI的层级关系较为复杂，本文将网上搜集到的关于NGUI层级深度的信息进行整合，形成对NGUI层级深度理解的总结。

一、NGUI层级关系与非层级关系

NGUI层级关系

创建时默认的层级关系，包含UIRoot、Camera、anchor和panel。

非NGUI层级关系

以Camera为基础，在其中创建控件，同时Camera需要挂载UIcamera和UIpanel脚本。

二、关于NGUI深度、层次总结

在实际开发中，经过大量NGUI界面的开发实践，对其深度和层次的理解会更加深刻。以下是具体总结：

1. 同一个panel下，同一个atlas的不同sprite 显示仅受depth控制，这是最常用的方式。在这种情况下，无论精灵的z轴如何变化，depth值高的精灵必定显示在前面。这是因为相同atlas的精灵实际上共用同一个Z轴深度。
2. 不同panel下，同一个atlas的不同sprite 不受depth控制，而是受z轴控制。此时，只需对其中一个精灵的z轴进行微小调整（例如调整0.1），就可以控制sprite的显示顺序。
3. 不同panel下，不同atlas的精灵穿插 其显示顺序受z轴控制。
4. 同一个panel下，不同Atlas的sprite 受z轴控制，depth不起作用。

三、图集

在项目中开发较为复杂的界面时，常常会使用多个图集。以技能界面为例，通常的图集划分方式如下：

• 项目中常用的图片存放在共用图集中，这是第一个图集。
• 技能界面本身独有的元素，如与技能职业相关的背景，构成第二个图集。
• 技能图标单独归类到一个图集中。
• 字体也有对应的图集。

一般来说，一个界面最多需要4个图集。NGUI对图集之间的处理，默认是通过调整控件的Z值来区分。然而，这种方式存在弊端，它允许调整同一个图集中每个控件的Z值，容易导致图层相互遮挡的问题。特别是对于控件较多的界面，在一段时间后再进行界面修改时，会让人感到十分棘手。

为了解决这个问题，我的做法是在UIPanel中，为每一个Material添加一个layer变量。当处于同一图层时，通过depth来决定前后关系；当处于不同图层时，则依靠layer来决定前后关系。在绘制UIDrawCall时，根据layer对根节点进行一定偏移。通过这种方式，能够摆脱对Z值的依赖。如果大家在开发过程中也遇到图层相关问题，可以参考这种做法，这种处理图层关系的方法简单有效，在多个大型项目的UI开发中，尚未遇到无法解决的情况。