Cocos2d-x的UI树（3）

在UI树构造完成后，一项重要任务是确定UI元素的绘制顺序。本节课将详细介绍如何通过UI树获取UI元素的绘制顺序，以及得到绘制所需的从本地坐标系到世界坐标系变换的变换矩阵。

课程笔记 — UI元素的绘制顺序

在Cocos2d - x中，_localZOrder 作为UI元素的逻辑深度，_orderOfArrival 代表开发者将UI元素加入UI树的顺序。自Cocos2d - x 3.x 版本之后，又引入了 _globalZOrder，这三个因素共同决定UI元素的绘制顺序。

节点子节点的分类与排序

在UI树中，每个节点可能有0个、1个或多个子节点。这些子节点可分为左边的子节点和右边的子节点。其中，左边的子节点是 _localZOrder 小于0的UI元素，右边的子节点是 _localZOrder 大于或等于0的UI元素。

在决定绘制顺序之前，需先对节点的子节点进行排序。排序规则为：首先按照 _localZOrder 从小到大排序；若 _localZOrder 相同，则按照 _orderOfArrival 从小到大排序。

UI树的遍历方式

对UI树的遍历采用中序遍历，即按照左根右的顺序遍历UI树。

示例

例如，有一个根节点，其 _localZOrder 为0，左子节点的 _localZOrder 为 - 1，右子节点的 _localZOrder 为2；左子节点的左子节点 _localZOrder 为 - 3，左子节点的右子节点 _localZOrder 为3；右子节点的左子节点 _localZOrder 为 - 4，右子节点的右子节点 _localZOrder 为4。那么，用 _localZOrder 表示各个节点的绘制顺序为： - 3， - 1，3，0， - 4，2，4。

_globalZOrder 的作用

上述绘制顺序无法对不同父节点的两个子节点进行排序。因此，在3.x 版本之后引入了 _globalZOrder。_globalZOrder 的默认值为0。如果UI元素的 _globalZOrder 不为0，则按照 _globalZOrder 进行排序；否则，按照上述基于 _localZOrder 和 _orderOfArrival 的排序规则进行排序。

UI元素的模型矩阵

这里需要借助本系列第一讲 《Cocos2d - X的UI树（第一讲）》 的知识。在该讲中，我们介绍了几种矩阵，其中一些矩阵用于计算Node的世界坐标系。而在绘制时，需要使用Node的世界坐标系，但开发者提供的是本地坐标系。所以，需要将Node的本地坐标系和变换矩阵提供给shader，让shader计算出Node的世界坐标。