首页 > Unity3D频道 > 【UGUI研究院】 > UGUI研究院之Mask裁切UI粒子特效或者3D模型（十七）
2015
06-02

UGUI研究院之Mask裁切UI粒子特效或者3D模型（十七）

刚好前几天有人问我这个问题，再加上新项目也可能用，所以这两天就研究了一下。其实如果粒子特效 和3D模型 都用RenderTexture来做的话就不会有裁切的问题，但是粒子特效用RenderTexture来做会有显示的问题，所以还是得用摄像机。废话不多说了，进入正题。

原理就是把Mask的裁切区域传给粒子特效Shader，当超出这个区域那么直接让它完全透明即可。粒子特效的源生shader大家可以去unity官网下载，我在这里把需要修改的地方标注给大家。

//add 注释中的内容就是我做修改的地方。

然后是自己写了个类继承Mask。把Mask的区域传给shader。
using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class MyMask :Mask
{
protected override void Start ()
{
base.Start ();

int width = Screen.width;
int height = Screen.height;
int designWidth = 960;//开发时分辨率宽
int designHeight = 640;//开发时分辨率高
float s1 = (float)designWidth / (float)designHeight;
float s2 = (float)width / (float)height;

//目标分辨率小于 960X640的 需要计算缩放比例
float contentScale =1f;
if(s1 > s2) {
contentScale = s1/s2;
}
Canvas canvas = GameObject.Find(“Canvas”).GetComponent<Canvas>();
Vector2 pos;
if(RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas.transform as RectTransform, transform.position, canvas.camera, out pos)){
ParticleSystem [] particlesSystems = transform.GetComponentsInChildren<ParticleSystem>();
RectTransform rectTransform = transform as RectTransform;
float minX,minY,maxX,maxY;
minX = rectTransform.rect.x + pos.x;
minY = rectTransform.rect.y+ pos.y;
maxX = minX + rectTransform.rect.width ;
maxY = minY + rectTransform.rect.height;

//这里 100 是因为ugui默认的缩放比例是100 你也可以去改这个值，但是我觉得最好别改。
foreach(ParticleSystem particleSystem in particlesSystems)
{
particleSystem.renderer.sharedMaterial.SetFloat(“_MinX”,minX/100/contentScale);
particleSystem.renderer.sharedMaterial.SetFloat(“_MinY”,minY/100/contentScale);
particleSystem.renderer.sharedMaterial.SetFloat(“_MaxX”,maxX/100/contentScale);
particleSystem.renderer.sharedMaterial.SetFloat(“_MaxY”,maxY/100/contentScale);
}
}
}
}
上面这段代码写的不太好，有一个更好的办法来取Mask的裁切区域。

通过GetWorlCornets来确定裁切的区域

然后在把裁切的区域传到shader中。

为了做到不影响美术，所以美术开发特效的时候还是用以前的shader。程序在运行中对它进行更换，这样可以无缝进行切换。

如果运行时裁切区域发生变化， 可以重写OnRectTransformDimensionsChange()方法来重新给材质赋新的裁切区域

OK，如下图所示，把粒子特效直接挂在Mask下面， 就可以进行裁切了。。

UGUI研究院之Mask裁切UI粒子特效或者3D模型（十七） - 雨松MOMO程序研究院 - 1

在说一下3D模型， 理论上用上述的shader改一改就可以。 但是我还是建议3D模型用RenderTexture。比较好控制深度。

最后是工程的下载地址：http://pan.baidu.com/s/1pJFV5ph

希望大家可以多多测试一下，看看有没有问题。 或者你有更好的方法，欢迎在下面给我留言。谢谢啦～

后记：

1.感谢楼下 @姜华 提出了一个新方案

这个方法非常巧妙， 我也尝试的使用了一下。但是遇到了个问题，当我有两个裁切区域，发生重合的时候就会出问题。如果大家没有这样重合的需求。也可以参考他的方法。

2.asset store上有一个Unity Particle 2D 的插件，大家也可以试试。

 

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

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

《UGUI研究院之Mask裁切UI粒子特效或者3D模型（十七）》有 51 条评论

  1. 冬晓 说：
    2019 年 2 月 13 日下午 3:32

    Unity2017以后 ParticleSystem的Renderer中有了Masking属性（None、Visible Inside Mask、Visible Outside Mask），和SpriteMask组件结合和作出粒子遮罩的效果。参考链接：https://blog.csdn.net/Fenglele_Fans/article/details/81101511

    回复
  2. 张思懿 说：
    2018 年 1 月 10 日上午 10:16

    雨松大大，NGUI用这个shader发现，粒子特效是可以的，模型却不行，这是为啥啊
    Vector3 t = transform.TransformPoint(new Vector3(-cr.z + cr.x, 0)) – _uiroot.transform.position;
    ren.sharedMaterial.SetFloat(“_MinX”, t.x);

    Vector3 t1 = transform.TransformPoint(new Vector3(cr.z + cr.x, 0)) – _uiroot.transform.position;
    ren.sharedMaterial.SetFloat(“_MaxX”, t1.x);

    Vector3 t2 = transform.TransformPoint(new Vector3(0,-cr.w + cr.y)) – _uiroot.transform.position;
    ren.sharedMaterial.SetFloat(“_MinY”, t2.y);

    Vector3 t3= transform.TransformPoint(new Vector3(0,cr.w + cr.y)) – _uiroot.transform.position;
    ren.sharedMaterial.SetFloat(“_MaxY”, t3.y);

    这是计算位置的代码

    回复
  3. 施海松 说：
    2017 年 12 月 19 日下午 5:21

    粒子特效 3D模型 都用RenderTexture来做 这个是什么意思啊

    回复
  4. zero 说：
    2017 年 7 月 14 日上午 11:08

    雨松大神，你最后改的脚本，有完整的吗，没有看明白呢，能留一个demo嘛，谢谢了，最近急用

    回复
  5. 起帆 说：
    2017 年 1 月 4 日上午 10:50

    momo你好，请教下，这里是裁剪粒子，那面片呢？模仿上面的实现，获取出meshrender里面的mat，好像裁剪不了面片？求教

    回复
  6. 网虫虫 说：
    2016 年 12 月 8 日上午 11:13

    雨松大神，用mask遮罩，超出遮罩区域的的物体或UI仍然被每帧渲染，有什么办法解决吗？

    回复
  7. uihwfhiuhu 说：
    2016 年 7 月 26 日下午 10:26

    momo，你shader是在哪学的呀？还有就是ShaderForge这个东西好用吗？

    回复
  8. 玄冰狐 说：
    2016 年 6 月 18 日下午 2:43

    我使用unity3d 5.3.5版本打包，裁剪的位置有问题，向下偏移的几十个像素，是版本不兼容问题吗？

    回复
    • Starlzd 说：
      2016 年 8 月 3 日上午 11:44

      这个场景里面UiCamera有偏移导致的，代码里面RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas.transform as RectTransform, transform.position, canvas.camera, out pos)这个传的是transform.position，只有在UICamera位置为0的时候才可以，所以你把UICamera位置调到0显示就会对

      回复
  9. 扬尸弃骨 说：
    2016 年 5 月 26 日下午 2:20

    雨松大大，相机的OrthographicSize变化之后，裁剪的位置就不对了。大神，这个怎么处理？

    回复
  10. 姜华 说：
    2016 年 5 月 3 日下午 4:08

    拜读大神博客久矣。 一直仰慕！在下有一个方法可以更便捷的解决以上问题，也是我偶然翻查国外论坛找到的。创建两个Shader，一个给粒子用，一个给UI Mask 用,两个Shader的内容均采用Build-in Shader的Particle-Additive 和 UI-Default。利用Shader 的 Stencil 功能， 分别对两个Shader加入以下内容：//UI Mask Stencil{Ref 1Comp AlwaysPass Replace}//ParitcleStencil {Ref 1Comp equal}之后分别创建相应材质球，将其赋予UIImage 和 想被遮罩的 Particle 即可。 如果看不见效果，调整一下Particle的位置。 亲测可用。

    回复
  11. 姜华 说：
    2016 年 5 月 3 日下午 4:08

    拜读大神博客久矣。 一直仰慕！在下有一个方法可以更便捷的解决以上问题，也是我偶然翻查国外论坛找到的。创建两个Shader，一个给粒子用，一个给UI Mask 用,两个Shader的内容均采用Build-in Shader的Particle-Additive 和 UI-Default。利用Shader 的 Stencil 功能， 分别对两个Shader加入以下内容：//UI Mask Stencil { Ref 1 Comp Always Pass Replace }//Paritcle Stencil { Ref 1 Comp equal }之后分别创建相应材质球，将其赋予UIImage 和 想被遮罩的 Particle 即可。 如果看不见效果，调整一下Particle的位置。 亲测可用。

    回复
  12. 张洁勇 说：
    2016 年 4 月 26 日下午 1:49

    大神，我最近碰到一个问题就是说rendertexture在某些android机型上无法显示，你有碰到过这个问题吗？

    回复
  13. 小荔枝 说：
    2016 年 4 月 8 日下午 8:57

    Unity3D 5.2.2 我这样写，如何？
    【C#】
    RectTransform rectTransform = transform as RectTransform;
    Vector2 min = rectTransform.TransformPoint(rectTransform.rect.min);
    Vector2 max = rectTransform.TransformPoint(rectTransform.rect.max);
    float minX = min.x;
    float minY = min.y;
    float maxX = max.x;
    float maxY = max.y;
    ParticleSystem[] pss = transform.GetComponentsInChildren();
    foreach (ParticleSystem ps in pss)
    {
    Material mat = ps.GetComponent().sharedMaterial;
    mat.SetFloat(“_MinX”, minX);
    mat.SetFloat(“_MinY”, minY);
    mat.SetFloat(“_MaxX”, maxX);
    mat.SetFloat(“_MaxY”, maxY);
    }

    【Shader】
    fixed4 col = 2.0f * i.color * _TintColor * tex2D(_MainTex, i.texcoord);
    col.a *= (i.vpos.x >= _MinX && i.vpos.x = _MinY && i.vpos.y <= _MaxY) ? 1 : 0;
    return col;

    回复
  14. 坚定的蜗牛 说：
    2016 年 3 月 23 日下午 4:58

    雨松大大，我最近做ui界面播放粒子特效，效果不对啊，NGUI摄像机显示不对啊，特效是美术在maincamera下做的

    回复
  15. john 说：
    2016 年 2 月 28 日上午 10:15

    雨松大大 你好。最近在关注UI上显示3D模型的问题，用的是UGUI。很多都在说关于用RenderTexture, 也有的说直接在canvas 的render mode 选 screen space-camera。请问究竟这两个哪个好呢？

    回复
  16. 徐灵灵 说：
    2015 年 11 月 18 日下午 6:52

    雨松大大 你好，请问用ugui的mask能做新手引导那种的遮罩吗？就是中间会有一小部分不遮，可以提供点击。。感谢

    回复
  17. Dog 说：
    2015 年 9 月 1 日上午 10:08

    第 66行 修改为：o.vpos = mul(_Object2World, v.vertex).xyz;

    回复
  18. 风瑶子帝 说：
    2015 年 8 月 14 日上午 10:14

    momo, 我有个问题想请教一下UGUI Mask组件是怎样遮罩子结点的呢？

    回复
  19. 梦星魂 说：
    2015 年 7 月 6 日下午 2:30

    momo，好久不见。保重身体哦。关于你这篇文章我想问下，你的这个遮挡在手机上是否很耗性能。我了解的如果用NGUI，也可以通过UIPanel来完成你上面的遮挡，但是太贵。

    回复
  20. 梦星魂 说：
    2015 年 7 月 6 日下午 2:27

    momo，好久不见。保重身体哦。关于你这篇文章我想问下，你的这个遮挡在手机上是否很耗性能。我了解的如果用NGUI，也可以通过UIPanel来完成你上面的遮挡。

    回复
  21. au 说：
    2015 年 6 月 12 日下午 9:09

    大神，我发现新的ui做按钮点击很不方便，比如我的按钮样子是一个背景框加一个头像，那么如果我给背景框加button组件是没有用的，Graphic Raycaster捕捉到的是头像。有没有什么办法可以设置Graphic Raycaster只捕捉特定的ui元素。我看Graphic Raycaster有个Block Mask参数可以设定一个层，但是试了下发现不起作用。用Physics 2D Raycaster替代的话也很不方便，它是根据距离判断的，而ui是在同一距离的

    回复

给网虫虫的回复 取消回复

你的email不会被公开。