Godot Shader特效:流光效果

效果图

Godot Shader特效:流光效果_第1张图片

实现原理

使用一个渐变图来引导流光的走向
Godot Shader特效:流光效果_第2张图片

代码如下

shader_type canvas_item;
uniform sampler2D light_vector;
uniform float width = 0.08;

void fragment(){
	vec4 color = texture(TEXTURE,UV);
		if(color.a != 0.0){
			float v = texture(light_vector,UV).r;
		float diff = v - cos(TIME*0.5);
		if(abs(diff) < width){
			color = vec4(0.3,0.3,0.0,0.3)*(1.0 - abs(diff)/width) + color;
		}
	}
	COLOR = color;
}

小结
渐变图的渐变走向决定了流光的运动方向。可以把代码中所需的参数定义为uniform变量,此处略。


后记
用内置函数简化一下代码

shader_type canvas_item;
uniform sampler2D light_vector;
uniform float width = 0.08;
uniform  vec4 flowlight = vec4(0.3,0.3,0.0,0.3);//定义一个uniform变量

void fragment(){
	vec4 color = texture(TEXTURE,UV);
		if(color.a != 0.0){
			float v = texture(light_vector,UV).r;
			float diff = v - cos(TIME*0.5);
			if(abs(diff) < width){
			color = color + mix(flowlight,vec4(0.0),abs(diff)/width);//使用flowlight
		}
	}
	COLOR = color;
}

Godot Shader特效:流光效果_第3张图片
效果并没有什么变化,可能更柔和一点点?

你可能感兴趣的:(游戏特效笔记,Godot)