[Shader]NGUI与粒子系统

版权所有，转载须注明出处！ 喜欢火影、喜欢Java、喜欢unity3D、喜欢游戏开发的都可以加入木叶村Q群：379076227

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的代码，（其他几个的代码在本文最后的项目中有）

[C]  纯文本查看  复制代码

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.png (440.42 KB, 下载次数: 0)

下载附件  保存到相册

15 分钟前 上传

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

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

 

下载地址