用过NGU的兄弟知道，NGUI是以一个depth的参数控制各个Rect的前后关系的。包括UISprite跟UILabel这些继承是UIWidget的组件，当然也包括UIWidget本身，UIPanel也有depth，但是UIPanel的depth跟UIWidget的是一样的吗？UIPanel是调整整个Panel与Panel之间的层级关系。而UIRect的depth是调整UIWidget之间的层级关系，虽然听起来差不多，但是感觉有点小区别呢。本篇暂定只解析UIWidget的depth。 那么UIRect的depth是如何影响UI的先后层级关系的呢？

        首先我们看UIRect的depth代码，

depth—set

这里要说一下UIPanel在这其中的作用，可以看到UIWidget的depth改变以后，之间调用了UIPanel的RemoveWidget跟AddWidget方法，重新将这个UIWidget进行一次删插操作。而这个删除跟插入操作不是一般的删除跟插入，还顺带做了一大堆的事情。

首先我们看看删除都做了什么，

RemoveWidget

看上去好像只是在如果这个wiget的pepth为drawcall的开始或者结束值相等的时候，将mRebuild赋值为true。看起来好像没有做什么对不对，但是我们再看这个mRebuild做了什么。

lateupdate

咋一看，好像也没做什么呀，只是调用了一个叫UIPanel中的FillAllDrawCall的方法而已。且看

FillAllDrawCall

需要注意的是，FillAllDrawCall是在UIPanel的LateUpdate中调用的，LateUpdate遍历了所有的UIPanel，当每个panel的mRebuild为ture时，这个penel就调用自身的FillAllDrawCall方法。由于无法截图更长，忽略了上面的一些代码，只截了这段创建DrawCall的代码。那么，这FillAllDrawCall里面做了什么，那 这个DrawCall到底是个什么东西呢，我们根据上面的这个截图可以看出来，每个UIWidget都保存了一个自身引用的UIDrawCall，当下一个UIWidget的所属的材质、贴图、Shader有一者不一样，则重新创建一个drawcall，否则刷新这个drawcall的开始depth跟结尾的depth。这个刷新方式，导致我们在创建UI界面的使用，也需要有些注意事项，这个后面再说。

而depth的作用就在这里了，由此可见，UIRect的层级关系是跟UIDrawCall这个东西有关的。那么UIDrawCall又是个什么玩意呢？我们不是在研究depth嘛，怎么牵扯到UIDrawCall上面了，别急，且跟我慢慢分析。

FillAllDrwaCall

FillAllDrawCall

这两段代码紧跟着我们上面的DrawCall.Create()的地方，大概就是前后关系，在UIWidget的WriteBuBuffers中会将Wigiget的顶点(verts)，UV，颜色等从UIGeonetry中写入到所属的drawCall中去，然后再DrawCall中的UpdateGeometry中进行修改刷新渲染。也就是说，最终的我的UI的效果跟层级表现是根据DrawCall的渲染表现来呈现的，那drawcall之间的层级关系又是如何确定的呢。且看

RebuildMaterial

前面说到了最后调用了UIDrawCall的UpGeometry，在这个方法里面我们可以发现，它在赋值了drawcall的Mesh的顶点跟UV一系列的赋值操作以后，将mesh赋值给了自己的MeshFiter(没错，就是用MeshFilter)，然后调用了上图的这个ReBuildMaterial方法，将drawCall的sortingLayer跟sotringOrder赋值给了render。由此真相大白，原来UISprite的背后是用DrawCall渲染的，而DrawCall是用mesh渲染的，层级的最终还是走的Unigy的Sortinglayer跟SortingOrder。

那么UIDrawCall的sortingLayer跟SortingOrder又是在哪里赋值的呢，我们之前说了，FillAllDrawCall是在Panel的LateUpdate方法中的。追根朔源我们可以发现，在LateUpdate中还有一个方法，

LateUpdate

可以看到，有个UpdateDrawCalls的方法根据UIPanel的设置不同而被调用。而正式这个方法，遍历了每个UIDrawCall并对其SortingLayer跟SortingOrder进行了赋值操作

UpdateDrawCalls

这里对每个UIDrawCall的RenderQueue，SortingLayer，SortgingOrder进行了赋值

需要注意的是，这里的SotringLayer属性，如果useSortingOrder为false的话，他是被设置为null的

UsedSortingOrder

看引用可知，它就是UIPanel的Inspector面板上面的SotringOrder的toggle，如果被勾选，则上面的SortingLayer生效，否则，无论你将SortingLayer改成什么，它都是会设置为Null，而设置为null的话，系统会自动设置为第一层的SortingLayer，默认是Default，但是也不一定，如果你在Default前面又新建了其他比如Base层，那么它就会默认设置成Base层，因为现在Base层已经是第一层了。

文章开始时我们也说过，关于UIDrawCall机制导致我们创建UI的时候需要注意一些事情。回头看UIDrwaCall的地方，我们可以发现由于遍历UIWiget的list进行创建drawcall，一旦上一个的材质，shader或者贴图有一者不同，那么它就会重新创建一个新的drawcall来保存当前widget的渲染内容，这样一来，如果我们创建UI的时候，一不注意，就会导致drawcall数量激增。激增会有什么后果呢，最直观的反应就在性能上，很可能导致我们的游戏卡顿，浪费大量内存在渲染UI上面。

那么如何避免呢，我们可以尽量保持同一个图集的Sprite在顺序的depth上面，这样就会将他们都放在同一个DrawCall中进行渲染。当然，也没有必要斤斤计较，因为搭建UI真的很累，手都能点到抽搐~_~。

搭建UI的时候，可以考虑depth分层机制，比如[0,20]是属于背景的，比如[21,40]是属于文字的，文字的depth尽量跟Sprite分开，因为我们通常只使用一两个文字，而且文字都在Sprite前面，能放一起当然最好不过。当然只是个参考，不建议加一个UI就加一层depth，这样要插入一个就很麻烦，层级很容易错乱。

可以看到我们的Panel下面有个Show Draw Call的按钮，点击就会看到

DrawCallTool

这是当前Panel中所有的DrawCall，可以看到我们场景中总共有两个DrawCall，这个panel占了一个。很清晰易懂，材质，以及包含哪些Widgets，RederQueue跟三角面数都贴出来了。Widgets可以看到我们这个DrawCall中包含了多少Widget元素，也就是包含多少UISprite跟UIlabel这些继承子UIWidget的组件，而drawCall的个数很很清晰，我们创建的时候，可以根据这个面板进行调整优化。

另外如果对Unity的SortingLayer，RenderQueue跟SortingOrder不熟的同学，可以查看我的上一篇文章哦！

地址：https://www.jianshu.com/p/7a033810706f    <论RenderQueue、SortingLayer、SortingOrder关系>