使用shader写了个平面火焰的特效,可以在UI上使用,类似于live2d的效果。
有以下特点:
- 火焰流动
- 火焰左右摇摆
- 火焰大小变化,忽大忽小,忽明忽暗
由于上传图片大小限制,gif的帧数低,看起来效果不是很好看。
效果如下:
代码如下:
Shader "Unlit/MyFire"{
Properties {
_MainTex ("_MainTex", 2D) = "white" { }
_wave ("_wave", 2D) = "white" { }
}
SubShader {
Tags {
"Queue"="Transparent"
}
pass {
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
float4 _MainTex_ST;
sampler2D _MainTex;
sampler2D _wave;
struct appdata_t {
float4 vertex : POSITION;
float2 texcoord : TEXCOORD0;
};
struct v2f {
float4 pos : SV_POSITION;
float2 _uv_MainTex : TEXCOORD0;
float2 _uv_STD : TEXCOORD1;
};
v2f vert (appdata_t IN) {
v2f OUT;
OUT.pos = UnityObjectToClipPos(IN.vertex);
OUT._uv_STD = TRANSFORM_TEX(IN.texcoord,_MainTex);
return OUT;
}
float4 frag (v2f i) : COLOR {
float sintz = sin(_Time.z);
float sintw = sin(_Time.w);
//采样波浪,使火焰流动以及热膨胀膨胀,以下参数根据采样图片不同需要调整
float2 uv_wave = i._uv_STD+fixed2(sintw*0.003,-16)*(_Time.x);
uv_wave = uv_wave/fixed2(0.7,0.4);
float4 color_uv4 = tex2D(_wave,uv_wave);
uv_wave = -(color_uv4.r*fixed2(-0.08,0.12) + (color_uv4.g-0.1)*fixed2(0.2,0));
uv_wave.x *= i._uv_STD.y*1.5;
float2 uv_image2 = i._uv_STD + uv_wave;
//火焰左右摇动,幅度由uv的Y控制
uv_image2.x += sintw*0.05*i._uv_STD.y;
//火焰大小变化
uv_image2.y = uv_image2.y*(sintz*0.06+0.9);
fixed4 color_image2 = tex2D(_MainTex,uv_image2);
//火焰明暗变化
color_image2.rgb *=(1+ sintz*0.2);
return color_image2;
}
ENDCG
}
}
fallback "Standard"
}