首页 > Unity3D频道 > 【UGUI研究院】 > UGUI研究院之UI的深度学习（二）
2014
10-23

UGUI研究院之UI的深度学习（二）

今天抽空研究了一下UGUI的深度，UGUI真是好的不得了。以前用NGUI的时候UI的深度就是一个指定的数值，数值越大越靠前，尤其在布复杂界面的时候，深度值不知道怎么填非常恶心。现在有了UGUI这问题即可迎刃而解呀～～如下图所示，B图片在A图片前面，在看看Hieraychy视图，因为A在B的上面，所以优先渲染A，然后是B。那么B就在A的上面了。。

UGUI研究院之UI的深度学习（二） - 雨松MOMO程序研究院 - 1

 

那么我现在想让A图在B图的上面，那么直接在Hierarchy视图里把B拖拽放在A上面即可。

UGUI研究院之UI的深度学习（二） - 雨松MOMO程序研究院 - 2

如果GameObject下面有多个精灵，那么原理是一样的， 优先看父节点在Hierarchys视图中的排序，决定父节点的渲染先后。然后在依次看子节点中的Hierarchy视图的排序。如果还有孙节点一次类推。。这样的话如果没有ABA叠层的情况那么图集永远是一个drawcall.所以在布界面的时候就要花点心思这样drawcall就能节省很多了呢。

如下图所示，在深入一下渲染绘制的顺序

UIMain 和 UINext 是同级目录，因为UINext 在UIMain下面 所以优先渲染UIMain这样UINext将在屏幕最前面。UISub原理一样，由此可得出。

精灵显示从前面的 到后面的排序   NextB > NextA >SubB>SubA>MainA>MainB 。。

UGUI研究院之UI的深度学习（二） - 雨松MOMO程序研究院 - 3

 

布界面的时候我们可以按照这个排序来让我们的drawCall 最小化。可是如果我想运行的时候在两个图之间插一个图该怎么办？脚本如下所示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
using UnityEngine;
using System.Collections;
 
public class UIMain : MonoBehaviour {
 
void Start ()
{
GameObject button = GameObject.Instantiate(Resources.Load<GameObject>("button"))as GameObject;
button.transform.parent = transform;
button.transform.localPosition = Vector3.zero;
button.transform.localScale = Vector3.one;
 
GameObject AObj = transform.Find("A").gameObject;
 
GameObject BObj = transform.Find("B").gameObject;
 
button.transform.SetSiblingIndex(AObj.transform.GetSiblingIndex());
 
}
 
}
 

transform.SetSiblingIndex 和 GetSiblingIndex就是设置与获取 GameObject在兄弟节点的位置。。

最后编辑：
作者：雨松MOMO
专注移动互联网，Unity3D游戏开发
站内专栏 QQ交谈 腾讯微博 新浪微博
捐 赠写博客不易，如果您想请我喝一杯星巴克的话？就进来看吧!

您可能还会对这些文章感兴趣！

《UGUI研究院之UI的深度学习（二）》有 54 条评论

  1. Heintje 说：
    2017 年 3 月 3 日下午 12:11

    UGUI的Hieraychy排序简直不能更糟，或许出发点是想做简化，但是实际运用中，这种僵硬的做法只带给人无尽的痛苦

    回复
  2. 莉娜·因巴斯 说：
    2016 年 12 月 15 日上午 2:54

    UGUI的制作思路简直反人类，没见过这么脑残的，为什么我需要关心各种在面板上的顺序？为什么我需要关系制作混合界面时的各种层级结构？为什么我不能完全通过一个节点来开关某个模块（弱智一样的Hieraychy排序导致着些都变成可笑的代码控制），至少在我的项目NGUI框架里，这些东西根本不需要关心

    回复
    • 莉娜·因巴斯 说：
      2016 年 12 月 15 日上午 2:58

      NGUI最完美个管理方案是每个界面独立一个Camera，通过一个Define脚本定义界面的CameraDepth（同步设置该界面的MainPanelDepth），这样你就会发现在制作过程中你再也不需要关心任何所谓层级问题，开关一个界面变得和开关一个GameObject一样简单，也不用像以前一样弱智的用代码不断刷新遍历更改各个界面的Depth，也别跟我说DC问题，平均一个界面20个DC在现在400元的手机都能跑满100DC满帧60帧

      回复
      • 莉娜·因巴斯 说：
        2016 年 12 月 15 日上午 3:00

        最后场景上哪怕有10个空Camera几乎都不会有0.01ms的开销，比大部分程序动不动就几K的GC泄漏性能优秀太多，平时保证0GC的代码要求这是最基本的

        回复
  3. 蓝拳洛基 说：
    2016 年 11 月 7 日下午 3:25

    不如NGUI好用。不同的Canvas设置非常恶心。

    回复
    • 蓝拳洛基 说：
      2016 年 12 月 20 日上午 1:02

      同意楼上。NGUI一个deapth控制渲染顺序非常科学，GPU编程的深度也就用一个值。实际我公司大型项目也就一个类就解决了所谓层级顺序。反观UGUI。呵呵。不同camera是一种设置。相同camera是另一种设置。确实很二。是一种明显的退步。

      回复
  4. 随风逐流 说：
    2016 年 7 月 28 日下午 5:53

    雨凇大大，想请教一下如何用UGUI 制作3D HUD？

    回复
  5. ugui苦逼学习者 说：
    2015 年 7 月 25 日下午 12:32

    晕，怎么发了两遍，请无视这一条……

    回复
  6. ugui苦逼学习者 说：
    2015 年 7 月 25 日下午 12:02

    文字a，图片b，如果排列方式是abababab那么就是8个drawcall如果游戏中制作列表，动态地添加小物件A，A包含图片和文字，那显然会产生这种排列，那drawcall不是很呵呵了？这个问题该怎么解决？

    回复
    • ugui苦逼学习者 说：
      2015 年 7 月 25 日下午 12:14

      而且制作的时候，如果界面内容太多，就会分类进行制作，比如A区域，B区域，一个区域一个功能，但这样又会产生混排的问题，哪怕界面就一个图集和一个字体，但实际上的drawCall远不止2个（现在21个了，还没加入列表，加了列表目测上40……），如果为了降低DC而更改UI结构，逻辑上又不好控。我都想把NGUI那套挪过来了……或者用程序重排预制，所有代码控制的界面元素交由一个界面元素数据集控制，但，好麻烦啊……

      回复
      • ugui苦逼学习者 说：
        2015 年 7 月 25 日下午 12:20

        我要是重排预制，如果要控制某个区域的整体显隐和移动旋转什么的，啊，某区域每个元素都得遍历一遍显隐移动旋转，而且因为原来层级被干掉了，所以现在移动旋转只能换算为世界坐标进行……难道我对transform的控制代码还得改写为对transform所有子孙的操作……这个思路简直让人绝望啊

        回复
    • 四面楚歌 说：
      2015 年 8 月 6 日下午 4:21

      遇到楼上一样的问题 ，混排需要让代码去控制prefab的排列

      回复
      • ugui苦逼学习者 说：
        2015 年 8 月 6 日下午 8:12

        遇到更诡异的问题了，UGUI层级问题，明明A图片在B图片上面，但就是会被B图片遮蔽。有时候游戏中干了什么操作，比如点击了某个按钮隐藏了部分UI或者干脆是点击了3D部分的内容，UI上某些图片闪烁（其实是他被他下面的图片的挡住了，再点一下又没挡住，简直诡异）我突然灰常怀念NGUI的Depth……虽然设置麻烦，但DC可控，而且没有UGUI这个诡异的bug……

        回复
  7. tl 说：
    2015 年 7 月 7 日上午 10:40

    为什么SubA在上面但 SubB > SubA? 是写错了吗?

    回复
  8. Garin 说：
    2015 年 7 月 6 日下午 5:58

    MOMO大神，如果我想要用代码来控制UGUI里面两个Button的深度，该如何实现啊？

    回复
  9. 那些年 说：
    2015 年 7 月 2 日上午 11:12

    MOMO ,关于UGUI 中 image的 material ，默认是没有材质的吗？ 没有材质怎么会画到场景里？ 我发现对象里是没有材质的。 并且我也找不到设置 image对应的atlas 所使用的material，这样我就无法更改 换shader。。

    回复
  10. 秦元培 说：
    2015 年 3 月 30 日下午 5:54

    为什么看了你的另外一篇说是要把控件挂到UI的相机下的文章后感觉层级好乱，现在这样多好啊，昨天群里有人给了这样一个图，我还不理解

    回复
  11. 永恒的尘埃 说：
    2015 年 1 月 6 日下午 2:27

    请问怎么在Unity2D项目里面把Spine制作的骨骼动画对象显示在Unity4.6的原生UGUI上面？

    回复
  12. zcloud01 说：
    2014 年 12 月 14 日下午 9:21

    老大，请问下，在ugui里如何去显示一个npc的头部提示信息。旧版以前可以用Texture感觉很方便

    回复
  13. 丫丫 说：
    2014 年 12 月 14 日下午 8:53

    布界面的时候我们可以按照这个排序来让我们的drawCall 最小化？这话有点不是很明白我们项目现在采用是UGUI，DrawCall 占用10多个，不是满意的据情况要减少DrawCall,可以控制渲染循序？咋么控制的

    回复
  14. 冰河烈风 说：
    2014 年 12 月 11 日下午 3:11

    请问下ugui里面事件怎么吞噬，比如两个按钮重在一起，点击时，让两个都执行click事件?还有不规则图形的点击，移动等，我当前是用的collider 2d添加上去做的检测，有没有更方便的办法来处理不规则图形的事件？

    回复
  15. Stephanie 说：
    2014 年 10 月 29 日下午 8:01

    界面结构虽然看起来是简单了，但是一般的都是美术同学来做，然后我们通过fastGUI等工具导成我们需要的界面，总角色这样做界面不是给美术太大的限制就是我们不好重写工具了。

    回复
  16. DannyCheung 说：
    2014 年 10 月 24 日上午 1:17

    这就是传统2D的思路哇 ：） 挺方便的～

    回复
  17. 阿余余余 说：
    2014 年 10 月 24 日上午 12:00

    ABA叠层是指AB使用的不是一个图集？

    回复
  18. c6u2 说：
    2014 年 10 月 23 日下午 9:28

    有点另类啊，其实还是觉得用Z轴调整渲染顺序最好，但是会有蛋疼的图集遮盖问题，如果能自己优化掉就好了

    回复
  19. Rico 说：
    2014 年 10 月 23 日下午 8:56

    我反而觉得这样不好，比如说制作者会按功能划分子节点。这样Hierarchys反馈为层次就不好了。特别是涉及批次合并的时候（不知道UGUI有没有这个概念）。NGUI的深度直接看是有点烦，但自己做个工具就好多了。

    回复

留下一个回复

你的email不会被公开。