[Shader]NGUI与粒子系统

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

1、前言
在很久很久以前，流传着在NGUI中使用unity3D自带粒子系统的方法。
有一种称为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] 纯文本查看 复制代码

?


01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

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

下载地址

时间： 2024-08-10 19:18:02

[Shader]NGUI与粒子系统的相关文章

Unity3D开发之NGUI结合粒子系统的遮挡问题

原地址:http://blog.csdn.net/lihandsome/article/details/22194025 我的是NGUI3.0.3版本,在加入粒子系统的时候发现一直都是在精灵的下面,所以必须要解决这个问题. 问题的出现是因为NGUI和粒子系统的渲染队列问题,那我们自己就可以新建一个属于粒子系统的Shader,然后直接复制原来系统自带的那个Shader的代码,修改代码里面的 [csharp] view plaincopy "Queue"="Transparent

[Shader]NGUI与灰化

1.灰化的需求 很多時候,我们做游戏会遇到一种情况.比如一个技能图标,可以点的时候是正常的颜色,不能点的时候是灰色的.又比如一个功能,开放的时候是正常颜色,没开放的时候是灰色的.更常见的就是,比如你的QQ好友,不在线头像也会变成灰色的. 那么,上述种种情况就出现了一种需求,把一个图片变成灰色的. 2.说说灰化与灰度 首先,你不能说让美术出两套图,一套彩色一套灰色的吧.这样会增加资源占用. 那么我们只能想办法通过程序来处理. 那么我们要先搞清楚,灰色的图片是怎样的. (彩色) (灰化后) 看到"战

NGUI字体贴图压缩以及相关Shader解读

一般游戏中,字体贴图是游戏贴图压缩的一个重点,特别是对于中文的游戏.考虑的字体贴图的特殊性,一般我们输出的字体贴图是不含颜色信息的,所以正常情况下,我们输出的字体贴图RGBA每一个通道都是一样的.这样一来,就存在非常大的浪费.所以我们能够在RGBA四个通道中能够保存不同的字体,这样,我们的贴图的大小能够降低4倍.假设我们想使用ETC压缩的话,我们可还以直接不使用Alpha通道,仅仅在RGB三个通道中存储不同的文字(这样,假设我们要进行ETC压缩的话,不须要对Alpha通道做分离处理了,可是得到的

Shader实例:NGUI制作网格样式血条

效果: 思路: 1.算出正确的uv去采样过滤图,上一篇文章说的很明白了.Shader实例:NGUI图集中的UISprite正确使用Shader的方法 2.用当前血量占总血量的百分比来设置shader中的变量,来控制血条的裁剪. 实际操作中,在shader中声明一个uniform float _Factor 然后在C#脚本中,对这个变量进行设置,结果发现,界面上不能实时响应这个值,进行正确的裁剪. 那么我只好牺牲color的一个分量,比如设置g分量,shader中用g分量的值来对血条进行裁剪.最终

Unity3D 灰度shader（改编自NGUI）

原创文章如需转载请注明:转载自 脱莫柔Unity3D学习之旅 QQ群:[119706192] 本文链接地址: 灰度shader 废话不多说,直接图解流程: 1.原图 2.改动shader 打开NGUI自带的shader:(Unlit - Transparent Colored) 将代码A: fixed4 frag (v2f i) : COLOR { fixed4 col = tex2D(_MainTex, i.texcoord) * i.color; return col; } 改为代码B: f

Shader实例:NGUI图集中的UISprite正确使用Shader的方法

效果: 变灰,过滤,流光 都是UI上常用效果. 比如: 1.按钮禁用时,变灰. 2.一张Icon要应付圆形背景框,又要应付矩形背景框.就要使用过滤的方式来裁剪. 避免了美术提供两张icon的麻烦,又节省了内存. 3.流光,呃……,策划就是要,你能怎么办. 实践: NGUI把要用到的图片做成了图集,它会记录每一张小图的信息. 包括:每一张小图在这张图集里面的位置,长,宽,padding,border.等等. 使用时只是采样这张小图所在区域,然后显示在UI的mesh上. 如果我们用这张小图的texc

NGUI出现Shader wants normals, but the mesh UIAtlas doesn't have them

NGUI出现Shader wants normals, but the mesh UIAtlas doesn't have them,没有网格法线,打开UI Root上 UIPanel组建上的 Normal选择对勾就可以了 版权声明:本文为博主原创文章,未经博主允许不得转载. NGUI出现Shader wants normals, but the mesh UIAtlas doesn't have them

[Shader]对NGUI的UISprite和UITexture进行裁剪

由于最近比较忙,所以很多我在其它地方发布的博文都没有同步到这里.我会在后面慢慢重新补回来.对各位关注我博客的读者也表示抱歉! 版权所有,转载须注明出处!喜欢火影.喜欢Java.喜欢unity3D.喜欢游戏开发的都可以加入木叶村Q群:379076227 0.随便聊 本人真正学习Shader的时间莫过于今年春节在家的两天时间,虽然短短两天.但是已经深深喜欢上Shader.深受其魅力吸引.但是平常主要做的还是服务端和客户端的开发,偏逻辑向.所以好久也没碰Shader了.但是昨天在一个群里有人讨论NGU

【Unity3D】【NGUI】如何给Clipping的Panel下的UITexture加shader

NGUI讨论群:333417608 NGUI版本:3.6.5 NGUI在较新的版本中,为了实现Clipping嵌套,为他自身的一些shader写了几个版本. Unlit - Transparent Colored.shader     无Clipping Unlit - Transparent Colored 1.shader     1层Clipping Unlit - Transparent Colored 2.shader     2层Clipping Unlit - Transparen