Unity 使用Shader+C#脚本的方式简单实现 UGUI的UI溶解特效

示例项目链接:https://download.csdn.net/download/lq1340817945/18250384

溶解前UI:
在这里插入图片描述

溶解部分后UI:
在这里插入图片描述

对应的shader

Shader "default/定点溶解UI"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}

		[Vector2(1)] _DissolveCenterUV("Dissolve Center UV", Vector) = (0,1,0)
		_WorldSpaceScale("World Space Dissolve Factor", float) = 0.1

		_DissTex("Dissolve Texture", 2D) = "white"{}

		_EdgeWidth("Edge Wdith", float) = 0
		[HDR]_DlvEdgeColor("Dissolve Edge Color", Color) = (0.0, 0.0, 0.0, 0)
		_Smoothness("Smoothness", Range(0.001, 1)) = 0.2

		[ScaleOffset] _DissTex_Scroll("Scroll", Vector) = (0, 0, 0, 0)

		_Clip("Clip", float) = 0
    }
    SubShader
    {
		Tags { "Queue" = "Geometry" "IgnoreProjector" = "True" "RenderType" = "Transparent" "PreviewType" = "Plane" }

        Pass
        {
			Blend SrcAlpha OneMinusSrcAlpha

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float4 vertex : SV_POSITION;

				float4 uv : TEXCOORD0;
            };

            sampler2D _MainTex;
			sampler2D _DissTex;
            float4 _MainTex_ST;
			float4 _DissTex_ST;
			float2 _DissolveCenterUV;
			half _Clip;
			half _WorldSpaceScale;
			half _Smoothness;
			float4 _DlvEdgeColor;
			float _EdgeWidth;

			float2 _DissTex_Scroll;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv.xy = TRANSFORM_TEX(v.uv, _MainTex);
				o.uv.zw = TRANSFORM_TEX(v.uv, _DissTex) + frac(_DissTex_Scroll.xy * _Time.x);

                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv.xy);
				fixed dissove = tex2D(_DissTex, i.uv.zw).r;

				float dist = distance(_DissolveCenterUV, i.uv.xy);

				dissove = dissove + dist * _WorldSpaceScale;

				float dissolve_alpha = step(_Clip, dissove);
				clip(dissolve_alpha - 0.5);

				float edge_area = saturate(1 - saturate((dissove - _Clip - _EdgeWidth) / _Smoothness));
				edge_area *= _DlvEdgeColor.a;
				col.rgb = col.rgb * (1 - edge_area) + _DlvEdgeColor.rgb * edge_area;

                return col;
            }
            ENDCG
        }
    }
}

如果不想下载示例项目,自己使用C#脚本调整shader的_Clip值

private Material m = _Image.material;
m.SetFloat("_Clip", Mathf.Lerp(from, to, t));

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Unity Shader Graph是Unity引擎中的一种可视化编程工具,它可以用于创建自定义的着色器效果。溶解特效是一种常见的特效,在游戏和动画中经常使用。 要使用Unity Shader Graph实现溶解特效,我们需要做以下几个步骤: 1. 创建Shader Graph:打开Unity编辑器,创建一个新的Shader Graph。可以通过右键点击Assets面板中的空白区域,选择Create->Shader->PBR Graph来创建一个新的Shader Graph。 2. 添加输入节点:在Shader Graph编辑器中,我们需要添加溶解特效所需的输入节点。这些节点可能包括Texture2D用于溶解图案、Float用于控制溶解的进度等。 3. 控制溶解过程:在Shader Graph中,我们可以使用节点连接和编辑来控制溶解特效的过程。例如,我们可以使用Lerp节点将溶解图案与原始纹理进行混合,实现溶解的效果。 4. 添加溶解动画:通过使用Time节点,我们可以在Shader Graph中添加时间变量,以使溶解过程可以动态进行,从而实现溶解特效的动画效果。通过控制Time节点的输入值,我们可以控制溶解特效的速度、方向等。 5. 调整其他属性:除了溶解图案和动画外,还可以通过Shader Graph调整其他属性,如颜色、透明度、光照等,以使溶解特效具有更多的变化和个性化。 6. 导入及应用Shader:将编写好的Shader Graph保存,然后将其导入Unity项目中。之后,我们可以将其应用到需要溶解特效的材质上,以实现溶解特效效果。 总之,通过使用Unity Shader Graph,我们可以通过可视化编辑界面来快速创建和调整溶解特效。这种方法非常直观和灵活,使得艺术家和开发人员可以快速实现他们想要的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lq1340817945

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值