调整SortingOrder解决UGUI中粒子层级问题

最新推荐文章于 2025-06-30 21:01:43 发布

转载最新推荐文章于 2025-06-30 21:01:43 发布 · 1.2k 阅读

文章标签：

#UGUI #SortingOrder

Unity3D 专栏收录该内容

8 篇文章

订阅专栏

探讨在Unity UGUI中，如何通过调整SortingOrder解决粒子与UI的层级穿插问题，确保特效与UI元素正确遮挡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

调整SortingOrder解决UGUI中粒子层级问题

https://blog.youkuaiyun.com/fansongy/article/details/60140188

Unity UGUI 代码改变遮挡层级

https://blog.youkuaiyun.com/qq_28768929/article/details/53286731

--------------------------------------------------------------------------------------

调整SortingOrder解决UGUI中粒子层级问题

为了做出更酷炫的的UI效果，通常要在UI中加入粒子效果。但与纯2D的UI动画或Spine不同，粒子在场景中制作，会存在与UI的穿插问题。本文探讨如何更改特效或UI的SortingOrder避免穿插。

前提条件

首先，Canvas的类型是一切的基础，我使用的Canvas是Screen-Space ，所有UI通过一个正交摄像机照出来。制作UI通常使用这种模式，本文不讨论其他情况。

核心原理

通过更改渲染的顺序来改变遮挡关系。一方面UGUI会根据Hierarchy中的控件顺序进行排序。因此对于Animation或Spine制作的UI动画，只要顺序正确，就可以保证遮挡关系正确。对于使用ParticleSystem制作的特效，它是使用Render进行渲染，因此需要找到一个能够同时影响Render和UI控件渲染层次的方法。这个方法就是更改SortLayer或SortingOrder。这两种方法原理一样，先排序，再渲染。这个排序通过SortingOrder更改，而排序和排序之前可以通过SortLayer来分隔。以我目前的经验，使用SortingOrder足够，还没有用到SortLayer。

案例

为了说的更清楚我制作了个简单的例子，效果如下图所示：

它在Hierarchy中的层级关系如下：

不难看出，界面层级关系很简单。大体上分为左区域、右区域、标题三部分，每部分中都包含底图。左右区域分别有两个按钮。最终效果是左侧的区域完全被特效覆盖，右侧区域底图被特效覆盖，按钮在特效上层，标题区域所有内容显示在特效上。其中所有UI使用标准UGUI材质，粒子特效使用系统自带Particles/Additive。

详解

如第二节核心原理所述，我需要规划出SortingOrder。为了达到这个效果，左侧区域使用默认的SortingOrder，也就是0。粒子使用1，即SortingOrder+1。右侧区域Button和整个Title使用SortingOrder+2。

粒子设置

在ParticleSystem中，找到Render更改它的SortingOrder为1：
---------------------

UI设置

UGUI中SortingOrder变量定义在Canvas中，因此需要是该类或其子类才能实现设置。这里需要为Button1和Title添加一个Canvas。因为Canvas也会附带更改它子节点的层级，所以Title下面的SortingOrder都会被改好。另外，如果要传递点击事件记得加入GraphicRaycaster。

警告

即使SortingOrder相同也无法将不同Canvas的DarwCall合并，所以要尽可能的减少Canvas。尽量不要在加入特效时通过动态添加Canvas，来更改UI的SortingOrder。这样做会使UI中的Canvas不可控，不利于后期DrawCall优化。最好根据自己项目提前做好UI分层，从设计上处理好SortingOrder。

Unity UGUI 代码改变遮挡层级

UGUI在Screen Space - Overlay渲染模式下，由于不依赖摄像机渲染，使得其无法通过修改Z轴的方式修改物体间的层级关系，以下是解决方案：

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一致