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

  1. shine_color : The color of the shine.  Defaults to White, but can be any color.
  2. 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.
  3. shine_size : the width of the shine rectangle.
  4. 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 vars 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);
}
Tags
collectable, glint, highlight, item, shine
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from ACB_Gamez

Perspective Warp/Skew Shader

Related shaders

3D Item Highlighter (with Angle Adjustment!)

Radial Shine Highlight

2D Shine Highlight

Subscribe
Notify of
guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Lucas
Lucas
1 year ago

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

lvcivs
11 months ago

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()

Last edited 11 months ago by lvcivs