UI 和粒子层级关系问题,粒子在UI中显示超出的部分不显示

需求
1、粒子需要在两个UI中间显示
2、粒子在UI中显示超出的部分不显示

先了解下渲染顺序
级别最高的排序
1、 Camera
Camera是unity中最优先的渲染顺序控制。depth越大,渲染顺序越靠后。
2、Sorting Layer
在Tags & Layers设置中可见
在这里插入图片描述
3、Order In Layer
相对于Sorting Layer的子排序,用这个值做比较时只有都在同一层时才有效。
4、RenderQueue
Shader中对Tags设置的“Queue”。

当Sorting Layer和Order In Layer相同时
RenderQueue小的先进渲染管线。

当Sorting Layer和Order In Layer不相同时!
当两个材质使用了不同的RenderQueue,且这两个RenderQueue都在[02500]或[25015000]时,SortingLayer和OrderInLayer的排序生效。

当两个材质使用了不同的RenderQueue,且这两个RenderQueue分别在[02500]和[25015000]时,则一定会按照RenderQueue绘制,无视SortingLayer、OrderInLayer的排序

材质的RenderType
在这里插入图片描述

总结:
如果单纯的粒子在UI上边则直接修改sortingOrder 即可
如果粒子在UI之间,
方法1、创建一个cavas,把要遮盖粒子的UI放到里边,并且设置sortOrder为10,这样普通的UI为0 上层的UI为10 ,在0-10 之间设置粒子的sorting就行
方法2、设置材质的renderQueue ,设置UI上下层材质的renderQueue,在中间设置粒子的renderQueue

lua代码:
local material = rend.material
material.renderQueue = queue
rend.material = material

需求2 粒子在UI中显示超出的部分不显示
使用 Sprite Mask控件,指定裁切的粒子的图片,粒子挂在概节点下,并且Render 的 Masking 属性设置为 Visible inside Mask

在这里插入图片描述在这里插入图片描述
渲染顺序参考自:https://blog.csdn.net/Tonight_Alive/article/details/87915921

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要调整HTML图片的显示层级,可以使用CSS的z-index属性。该属性用于控制元素的层级关系,数值越大,元素越靠近顶层。以下是具体的步骤: 1. 在HTML,为需要调整显示层级的图片元素添加一个唯一的id属性,例如id="myImage"。 2. 在CSS样式表,为该图片元素设置position属性为relative或absolute,使其成为一个定位元素。 3. 使用z-index属性为该图片元素设置一个合适的层级数值,比如z-index: 1。数值可以根据需求进行调整,较大的数值表示较高的层级。 4. 如果需要调整多个图片的层级关系,可以为每个图片元素重复上述步骤,为它们分别设置不同的id和z-index值。 通过以上步骤,可以实现对HTML图片的显示层级进行调整。注意,z-index属性只对定位元素有效,因此在设置z-index之前需要确保图片元素已经被正确地定位。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Unity UGUI调整UI粒子特效的显示层级](https://blog.csdn.net/weixin_30606461/article/details/99598915)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [【MAPBOX基础功能】17、mapbox修改已上图图层间的显示层级](https://blog.csdn.net/weixin_44402694/article/details/125420937)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [修改POI ,xdocreport源码,满足word按照段落解析成html,并支持公式](https://download.csdn.net/download/weixin_41271234/19059971)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值