NGUI与粒子系统

1、前言
在很久很久以前，流传着在NGUI中使用 unity 3D自带粒子系统的方法。
有一种称为RenderQ，另一种称为Render Texture。
然而，或许是随着历史的原因，有些已经逐渐被人们淡忘。使用方法随着应用的条件不同或残缺不全，或效果错误。
我，不相信命运，踏上了找寻遗失秘法的旅途。最后，终于在某一天，遇见了。。。

2、遇见故友
友：来来，刚好见到你，问问你，NGUi中怎么使用粒子？我：不是用代码设置下粒子的RenderQ就可以了吗？
友：那个太简单了，网上都能搜索到，有什么意思的？
我：那使用Render Texture来渲染出一个图片，然后用UITexture来引用也可以吧。
友：我也想到这样，但是不知道为什么摄像机看到的效果和UITexture用了这个Texture之后效果不对。
我：怎么个不对？
友：你看看调试效果和实际运行效果
 

我：这效果确实不太一样。不过也倒是有另一种美。
友：你给我滚出去
我：于是乎。我就走了。我边走边想。上面的效果图有什么 问题 ？首先，背景是蓝色的。我得先着手解决这个。

那不容易。这个一看就是摄像机的颜色。搞一搞。
 

我：你看，是不是这个效果。
友：是啊，怎么搞的。
我：把渲染粒子的摄像机的背景颜色改成完全不透明的，然后选择和当前颜色一样。
友：你给我滚出去。。
我：不能这样吗。。为啥不能呢。你看我这样搞。。额。。确实好像不能。。

 

我：我得再想想。那如果把摄像机的背景调透明呢。
 

粒子居然完全看不到了。。

3、再重新整理下思绪
显然，不管摄像机的背景是什么颜色，都不能直接把渲染出来的texture放到UITexture上面。
那么我们是否可以自己写个shader。专门用于这种场景。
话不多说，我立马写了“Unlit - Particle”、“Unlit - Particle 1”、“Unlit - Particle 2”、“Unlit - Particle 3”这4个Shader。
这里给出Unlit - Particle的代码，（其他几个的代码在本文最后的项目中有）

Shader "Unlit/Particle"
{
        Properties
        {
                _MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}
        }
         
        SubShader
        {
                LOD 100
 
                Tags
                {
                        "Queue" = "Transparent"
                        "IgnoreProjector" = "True"
                        "RenderType" = "Transparent"
                }
                 
                Cull Off
                Lighting Off
                ZWrite Off
                Fog { Mode Off }
                Offset -1, -1
    Blend One OneMinusSrcAlpha
 
                Pass
                {
                        CGPROGRAM
                        #pragma vertex vert
                        #pragma fragment frag
                                 
                        #include "UnityCG.cginc"
         
                        struct appdata_t
                        {
                                float4 vertex : POSITION;
                                float2 texcoord : TEXCOORD0;
                                fixed4 color : COLOR;
                        };
         
                        struct v2f
                        {
                                float4 vertex : SV_POSITION;
                                half2 texcoord : TEXCOORD0;
                                fixed4 color : COLOR;
                        };
         
                        sampler2D _MainTex;
                        float4 _MainTex_ST;
                                 
                        v2f vert (appdata_t v)
                        {
                                v2f o;
                                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                                o.texcoord = v.texcoord;
                                o.color = v.color;
                                return o;
                        }
                                 
                        fixed4 frag (v2f i) : COLOR
                        {
                           fixed4 col;
                                 col = tex2D(_MainTex, i.texcoord);
                                 col.a = col.rgb;
                           return col;
                        }
                        ENDCG
                }
        }
 
        SubShader
        {
                LOD 100
 
                Tags
                {
                        "Queue" = "Transparent"
                        "IgnoreProjector" = "True"
                        "RenderType" = "Transparent"
                }
                 
                Pass
                {
                        Cull Off
                        Lighting Off
                        ZWrite Off
                        Fog { Mode Off }
                        Offset -1, -1 
                        ColorMask RGB
      Blend One OneMinusSrcAlpha
                        ColorMaterial AmbientAndDiffuse
                         
                        SetTexture [_MainTex]
                        {
                                Combine Texture * Primary
                        }
                }
        }
}

最后测试图：

 

1

倒数第二列是放在UIPanel中的。最后一列则是放在Softclip的UIPanel中。
有时候可能会出现粒子有黑边的情况。这个情况是因为我们现在用的是渲染图的RGB来算Alpha。因此没办法完全还原真实图像。只能大家根据实际对shader进行调整。这个会根据粒子颜色的不同和背景的不同场景不同结果。
可以想象一下，就像你在Photoshop中，有一张RGB图片。然后你想根据他的灰度扣除图片。是没办法通过算法直接扣除的，只能是人眼的识别去调参数扣。

4、那么最后奉上本文的测试工程。
大家想要把这个应用到自己项目的话，只需要工程中的几个shader

下载地址

原文地址：http://blog.youkuaiyun.com/kakashi8841/article/details/44926739