2D Controlled Shine Highlight With Angle Adjustment
This shader is based on the 2D Shine Highlight shader. It has several differences, including the ability to change the angle of the shine rectangle and adjust its position via code. For example, I use a tween to interpolate the shine_progress shader_param.
Params
shine_color
: The color of the shine. Defaults to White, but can be any color.shine_progress
: The percentage of the shine animation / position. 1 is all the way to the right, 0 is al l the way to the left.shine_size
: the width of the shine rectangle.shine_angle
: This defaults to 45º and can be anything between 0.0 and 89.9. If you would like to use radians, just remove the `radians()` function from line 18.
Here is a code example of how I used this to make the cute lil orange guy in the screenshots. tween and sprite are onready var
s to their respective nodes. I have the tween set to repeat so this just keeps happening until I call tween.stop_all()
.
tween.interpolate_property(sprite.material, "shader_param/shine_progress",
1.0, 0.0, SHINE_TIME, Tween.TRANS_SINE, Tween.EASE_IN)
tween.interpolate_property(sprite.material, "shader_param/shine_size",
0.13, 0.01, SHINE_TIME * 0.75, Tween.TRANS_CUBIC, Tween.EASE_IN,
SHINE_TIME * .25)
tween.interpolate_property(sprite.material, "shader_param/shine_progress",
0.0, 1.0, SHINE_TIME, Tween.TRANS_SINE, Tween.EASE_OUT, SHINE_TIME)
tween.interpolate_property(sprite.material, "shader_param/shine_size",
null, 0.13, SHINE_TIME * 0.75, Tween.TRANS_CUBIC, Tween.EASE_OUT,
SHINE_TIME * .25 + SHINE_TIME)
tween.start()
Shader code
shader_type canvas_item;
uniform vec4 shine_color : hint_color = vec4(1.0);
uniform float shine_progress : hint_range(0.0, 1.0, 0.01) = 0.0;
uniform float shine_size : hint_range(0.01, 1.0, 0.01) = 0.1;
uniform float shine_angle : hint_range(0.0, 89.9, 0.1) = 45.0;
float scale(float value, float inMin, float inMax, float outMin, float outMax) {
return (value - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
}
void fragment() {
COLOR = texture(TEXTURE, UV);
float slope = tan(radians(shine_angle));
float progress = scale(shine_progress, 0.0, 1.0, -1.0 - shine_size - shine_size * slope, 1.0 * slope);
float shine = step(slope * UV.x - UV.y, progress + shine_size + shine_size * slope) - step(slope * UV.x - UV.y, progress);
COLOR.rgb = mix(COLOR.rgb, shine_color.rgb, shine * shine_color.a);
}
Do you have any tips on how to make this shader work on an atlas texture, I’m still learning how to use shaders and I’m having trouble because of that
For Godot 4:
In the shader code, change “hint_color” to “source_color” on line 4.
Code for the tween:
var tween = get_tree().create_tween().set_loops()
tween.tween_property($Sprite2D.material, “shader_parameter/shine_progress”, 1.0, 1.5).from_current()