Unity UGUI 代碼改變遮擋層級

 

UGUI在Screen Space - Overlay渲染模式下，由於不依賴攝像機渲染，使得其無法通過修改Z軸的方式修改物體間的層級關系，以下是解決方案：

 

我創建了一個空的工程，然后創建了一個Image，然后復制成了一樣大小的四份 為了便於分辨，設置為不同的顏色，改變他們的位置，使之相互交叉遮擋

根據運行結果看，每當點擊一個圖片，它在Hierarchy視圖中的順序會被改變，而且在場景中會被放置到最頂層

代碼很簡單，只有幾行，如下，每個圖片上都掛上去，就出現上圖的效果。

 

 

using UnityEngine;
using System.Collections;
using UnityEngine.EventSystems;
using System;
 
public class ChangeHierarchyOnCode : MonoBehaviour, IPointerClickHandler
{
    void IPointerClickHandler.OnPointerClick(PointerEventData eventData)
    {
        transform.SetAsLastSibling();
        // transform.SetAsFirstSibling();
        // transform.SetSiblingIndex(2);
    }
}

　　

然后代碼改成這樣：

 

using UnityEngine;
using System.Collections;
using UnityEngine.EventSystems;
using System;
 
public class ChangeHierarchyOnCode : MonoBehaviour, IPointerClickHandler
{
    void IPointerClickHandler.OnPointerClick(PointerEventData eventData)
    {
        // transform.SetAsLastSibling();
        transform.SetAsFirstSibling();
        // transform.SetSiblingIndex(2);
    }
}

　　

運行結果：

 

運行結果顯示，每當點擊了一張圖片，該圖片會被放置到最底層，以至於被其他物體遮擋，

 

代碼中注釋掉的transform.SetSiblingIndex(2);已經能夠猜出其功能，它會使被點擊的物體放置在指定的層級中，

該層級從0開始

越接近0的層級，被更多的物體遮擋，當層級為0時，其效果與transform.SetAsFirstSibling();相同

但是當層級小於0時，其效果與SetAsLastSibling一致

越大的層級，被更少物體遮擋，當層級為大於等於transform.parent.childCount - 1時，其效果與SetAsLastSibling一致

 

由此我們可以進行這樣的猜測（注意：只是猜測）：

每個Transform組件，內部保存了一個子物體列表，每當渲染時，從該列表最開始到最末尾依次渲染，於是，如果有遮擋，則后面渲染的物體遮擋住先前渲染的物體。

 

所以，transform.SetAsLastSibling/transform.SetAsFirstSibling/transform.SetSiblingIndex三個函數靈活使用，就可以在代碼中動態的修改圖片之間的遮擋關系