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

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

_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树进行遍历。

举个例子:一个根节点的_localZOrder为0,左子节点为-1,右子节点为2,左子节点的左子节点为-3,左子节点的右子节点为3,右子节点的左子节点为-4,右子节点的右子节点为4。那么用_localZOrder来表示各个节点,绘制顺序为:-3,-1,3,0,-4,2,4。

以上的绘制顺序不能将不同父节点的两个子节点进行排序,所以3.x之后设计了_globalZOrder。默认为0,如果UI元素的_globalZOrder为非0,则按照_globalZOrder排序,否则,就按照上述排序。

UI元素的模型矩阵

这里需要借用这个系列第一讲的知识《Cocos2d-X的UI树(第一讲)》,在Cocos2d-X的UI树的第一讲中我们介绍了几种矩阵,有一些矩阵是用来计算Node的世界坐标系使用的,而绘制的时候所需要的就是Node的世界坐标系,但是开发者提供的是本地坐标系,所以需要将Node的本地坐标系、变化矩阵提供给shader,让shader计算出Node的世界坐标。