UGUI流光特效(王者荣耀效果)
2017-08-08 15:06
239 查看
做了一个流光特效,网上也有很多,但是大多是用Mask贴图,由于两次采样影响性能,因此做了一个用代码计算Mask的流光特效
2、支持填充颜色的修改。
3、支持流动速度,流光区域修改
以上就是全部的shader代码了,至于C#代码,可以参考我之前的博客,也是至传递一些参数而已。
C#代码:
http://blog.csdn.net/whl33886/article/details/76832613
效果图的参数如下:
这个shader有几个特点:
1、支持UGUI裁剪,在ScrollView中可用。2、支持填充颜色的修改。
3、支持流动速度,流光区域修改
效果如下:
代码如下:
Shader "UI/Unlit/Flowlight" { Properties { [PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {} _Color("Tint", Color) = (1, 1, 1, 1) [MaterialToggle] PixelSnap("Pixel snap", float) = 0 /* Flowlight */ _FlowlightColor("Flowlight Color", Color) = (1, 0, 0, 1) _Lengthlitandlar("LangthofLittle and Large", range(0,0.5)) = 0.005 _MoveSpeed("MoveSpeed", float) = 5 _Power("Power", float) = 1 _LargeWidth("LargeWidth", range(0,0.005)) = 0.0035 _LittleWidth("LittleWidth", range(0,0.001)) = 0.002 /* --------- */ _WidthRate("WidthRate",float) = 0 _XOffset("XOffset",float) = 0 _HeightRate("HeightRate",float) = 0 _YOffset("YOffset",float) = 0 /* UI */ _StencilComp("Stencil Comparison", Float) = 8 _Stencil("Stencil ID", Float) = 0 _StencilOp("Stencil Operation", Float) = 0 _StencilWriteMask("Stencil Write Mask", Float) = 255 _StencilReadMask("Stencil Read Mask", Float) = 255 _ColorMask("Color Mask", Float) = 15 /* -- */ } SubShader { Tags { "Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent" "PreviewType" = "Plane" "CanUseSpriteAtlas" = "True" } Cull Off Lighting Off ZWrite Off Blend One OneMinusSrcAlpha ColorMask[_ColorMask] /* UI */ Stencil { Ref[_Stencil] Comp[_StencilComp] Pass[_StencilOp] ReadMask[_StencilReadMask] WriteMask[_StencilWriteMask] } /* -- */ Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma multi_compile _ PIXELSNAP_ON #include "UnityCG.cginc" struct appdata_t { float4 vertex : POSITION; float4 color : COLOR; float2 texcoord : TEXCOORD0; }; struct v2f { float4 vertex : SV_POSITION; fixed4 color : COLOR; half2 texcoord : TEXCOORD0; float4 worldPosition: TEXCOORD1; }; fixed4 _Color; /* Flowlight */ float _Power; float _LargeWidth; float _LittleWidth; float _Lengthlitandlar; float _MoveSpeed; fixed4 _FlowlightColor; /* --------- */ float _UVPosX; v2f vert(appdata_t IN) { v2f OUT; OUT.worldPosition = IN.vertex; OUT.vertex = UnityObjectToClipPos(IN.vertex); OUT.texcoord = IN.texcoord; OUT.color = IN.color * _Color; #ifdef PIXELSNAP_ON OUT.vertex = UnityPixelSnap(OUT.vertex); #endif return OUT; } sampler2D _MainTex; float4 _MainTex_ST; float _WidthRate; float _XOffset; float _HeightRate; float _YOffset; bool _UseClipRect; float4 _ClipRect; float _ClipSoftX; float _ClipSoftY; fixed4 frag(v2f IN) : SV_Target { fixed4 c = tex2D(_MainTex, IN.texcoord); /*使用裁剪*/ if (_UseClipRect) { float2 factor = float2(0.0, 0.0); float2 tempXY = (IN.worldPosition.xy - _ClipRect.xy) / float2(_ClipSoftX, _ClipSoftY)*step(_ClipRect.xy, IN.worldPosition.xy); factor = max(factor, tempXY); float2 tempZW = (_ClipRect.zw - IN.worldPosition.xy) / float2(_ClipSoftX, _ClipSoftY)*step(IN.worldPosition.xy, _ClipRect.zw); factor = min(factor, tempZW); c.a *= clamp(min(factor.x, factor.y), 0.0, 1.0); } /* --------- */ /* Flowlight */ //计算流动的标准uvX从-0.5到1.5范围 _UVPosX = _XOffset +(fmod(_Time.x*_MoveSpeed, 1) * 2 -0.5)* _WidthRate; //标准uvX倾斜 _UVPosX += (IN.texcoord.y- _HeightRate*0.5- _YOffset)*0.2; //以下是计算流光在区域内的强度,根据到标准点的距离的来确定强度,为了使变化更柔和非线性,使用距离平方或者sin函数也可以 float lar = pow(1 - _LargeWidth*_WidthRate, 2); float lit = pow(1 - _LittleWidth*_WidthRate, 2); //第一道流光,可以累加任意条,如下 fixed4 cadd = _FlowlightColor* saturate((1 - saturate(pow(_UVPosX - IN.texcoord.x,2))) - lar)*_Power /(1-lar); cadd += _FlowlightColor* saturate((1 - saturate(pow(_UVPosX - _Lengthlitandlar*_WidthRate - IN.texcoord.x, 2))) - lit)*_Power/ (1-lit); c.rgb += cadd.rgb; c.rgb *= c.a; /* --------- */ return c; } ENDCG } } }
以上就是全部的shader代码了,至于C#代码,可以参考我之前的博客,也是至传递一些参数而已。
C#代码:
http://blog.csdn.net/whl33886/article/details/76832613
效果图的参数如下:
相关文章推荐
- Unity3D-UGUI特效之Image的流光、扫光效果
- Unity3D-UGUI特效之Image的高斯模糊效果
- Unity3d-UGUI特效之Image的Skew变形、倾斜效果
- 【复习笔记】 cocos2d-x 2.x 渲染特效实现 八 流光效果
- 鼠标或者触屏滑动旋转角度查看人物效果(类似王者荣耀里选择人物查看)
- 使用陀螺仪实现王者荣耀首页效果(5毛特效版)
- javascript特效——烟花燃放的效果[xyytit]
- Android 那些事 – 欢迎页特效 (上推–推动门效果)
- META标签特效(页面过渡效果)
- Android特效专辑(十)——点击水波纹效果实现,逻辑清晰实现简单
- 校内互测 B. 王者荣耀 (二分答案+dp)
- 类的相关知识点--王者荣耀为例
- Android中级篇之Fresco-更灵活的设置加载特效[Java代码实现XML效果]
- Android滑动菜单特效实现,仿人人客户端侧滑效果,史上最简单的侧滑实现
- Acticle 13:javascript特效小分享:鼠标移入移出出现弹框效果
- 关于王者荣耀防沉迷以及各种实名认证
- JS特效实现图片自动播放并可控的效果
- UGUI 实现Button长按效果(RepeatButton)
- 分享10款效果惊艳的HTML5图片特效
- Windows界面编程第十篇 位图显示特效 百叶窗效果