feat(Card): add effect shaders on focus

Author: ShadowApex

assets/shaders/god_rays.gdshader

@@ -0,0 +1,108 @@
+/*
+Shader from Godot Shaders - the free shader library.
+godotshaders.com/shader/god-rays
+
+Feel free to use, improve and change this shader according to your needs
+and consider sharing the modified result on godotshaders.com.
+*/
+
+shader_type canvas_item;
+
+uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap;
+uniform float angle = -0.3;
+uniform float position = -0.2;
+uniform float spread : hint_range(0.0, 1.0) = 0.5;
+uniform float cutoff : hint_range(-1.0, 1.0) = 0.1;
+uniform float falloff : hint_range(0.0, 1.0) = 0.2;
+uniform float edge_fade : hint_range(0.0, 1.0) = 0.15;
+
+uniform float speed = 1.0;
+uniform float ray1_density = 8.0;
+uniform float ray2_density = 30.0;
+uniform float ray2_intensity : hint_range(0.0, 1.0) = 0.3;
+
+uniform vec4 color : source_color = vec4(1.0, 0.9, 0.65, 0.8);
+
+uniform bool hdr = false;
+uniform float seed = 5.0;
+
+// Random and noise functions from Book of Shader's chapter on Noise.
+float random(vec2 _uv) {
+    return fract(sin(dot(_uv.xy,
+                         vec2(12.9898, 78.233))) *
+        43758.5453123);
+}
+
+float noise (in vec2 uv) {
+    vec2 i = floor(uv);
+    vec2 f = fract(uv);
+
+    // Four corners in 2D of a tile
+    float a = random(i);
+    float b = random(i + vec2(1.0, 0.0));
+    float c = random(i + vec2(0.0, 1.0));
+    float d = random(i + vec2(1.0, 1.0));
+
+
+    // Smooth Interpolation
+
+    // Cubic Hermine Curve. Same as SmoothStep()
+    vec2 u = f * f * (3.0-2.0 * f);
+
+    // Mix 4 coorners percentages
+    return mix(a, b, u.x) +
+            (c - a)* u.y * (1.0 - u.x) +
+            (d - b) * u.x * u.y;
+}
+
+mat2 rotate(float _angle){
+    return mat2(vec2(cos(_angle), -sin(_angle)),
+                vec2(sin(_angle), cos(_angle)));
+}
+
+vec4 screen(vec4 base, vec4 blend){
+	return 1.0 - (1.0 - base) * (1.0 - blend);
+}
+
+void fragment()
+{
+
+	// Rotate, skew and move the UVs
+	vec2 transformed_uv = ( rotate(angle) * (UV - position) )  / ( (UV.y + spread) - (UV.y * spread) );
+
+	// Animate the ray according the the new transformed UVs
+	vec2 ray1 = vec2(transformed_uv.x * ray1_density + sin(TIME * 0.1 * speed) * (ray1_density * 0.2) + seed, 1.0);
+	vec2 ray2 = vec2(transformed_uv.x * ray2_density + sin(TIME * 0.2 * speed) * (ray1_density * 0.2) + seed, 1.0);
+
+	// Cut off the ray's edges
+	float cut = step(cutoff, transformed_uv.x) * step(cutoff, 1.0 - transformed_uv.x);
+	ray1 *= cut;
+	ray2 *= cut;
+
+	// Apply the noise pattern (i.e. create the rays)
+	float rays;
+
+	if (hdr){
+		// This is not really HDR, but check this to not clamp the two merged rays making
+		// their values go over 1.0. Can make for some nice effect
+		rays = noise(ray1) + (noise(ray2) * ray2_intensity);
+	}
+	else{
+		 rays = clamp(noise(ray1) + (noise(ray2) * ray2_intensity), 0., 1.);
+	}
+
+	// Fade out edges
+	rays *= smoothstep(0.0, falloff, (1.0 - UV.y)); // Bottom
+	rays *= smoothstep(0.0 + cutoff, edge_fade + cutoff, transformed_uv.x); // Left
+	rays *= smoothstep(0.0 + cutoff, edge_fade + cutoff, 1.0 - transformed_uv.x); // Right
+
+	// Color to the rays
+	vec3 shine = vec3(rays) * color.rgb;
+
+	// Try different blending modes for a nicer effect. "Screen" is included in the code,
+	// but take a look at https://godotshaders.com/snippet/blending-modes/ for more.
+	// With "Screen" blend mode:
+	shine = screen(texture(SCREEN_TEXTURE, SCREEN_UV), vec4(color)).rgb;
+
+	COLOR = vec4(shine, rays * color.a);
+}

assets/shaders/highlight_shine.gdshader

@@ -0,0 +1,69 @@
+shader_type canvas_item;
+render_mode blend_premul_alpha;
+
+uniform float Line_Smoothness : hint_range(0, 0.1) = 0.045;
+uniform float Line_Width : hint_range(0, 0.2) = 0.09;
+uniform float Brightness = 3.0;
+uniform float Rotation_deg : hint_range(-90, 90) = 30;
+uniform float Distortion : hint_range(1, 2) = 1.8;
+uniform float Speed = 0.7;
+uniform float Position : hint_range(0, 1) = 0;
+uniform float Position_Min = 0.25;
+uniform float Position_Max = 0.5;
+uniform float Alpha : hint_range(0, 1) = 1;
+
+vec2 rotate_uv(vec2 uv, vec2 center, float rotation, bool use_degrees){
+		float _angle = rotation;
+		if(use_degrees){
+			_angle = rotation * (3.1415926/180.0);
+		}
+		mat2 _rotation = mat2(
+			vec2(cos(_angle), -sin(_angle)),
+			vec2(sin(_angle), cos(_angle))
+		);
+		vec2 _delta = uv - center;
+		_delta = _rotation * _delta;
+		return _delta + center;
+	}
+
+void fragment() {
+
+	vec2 center_uv = UV - vec2(0.5, 0.5);
+	float gradient_to_edge = max(abs(center_uv.x), abs(center_uv.y));
+	gradient_to_edge = gradient_to_edge * Distortion;
+	gradient_to_edge = 1.0 - gradient_to_edge;
+	vec2 rotaded_uv = rotate_uv(UV, vec2(0.5, 0.5), Rotation_deg, true);
+
+	float remapped_position;
+	{
+		float output_range = Position_Max - Position_Min;
+		remapped_position = Position_Min + output_range * Position;
+	}
+
+	float remapped_time = TIME * Speed + remapped_position;
+	remapped_time = fract(remapped_time);
+	{
+		float output_range = 2.0 - (-2.0);
+		remapped_time = -2.0 + output_range * remapped_time;
+	}
+
+	vec2 offset_uv = vec2(rotaded_uv.xy) + vec2(remapped_time, 0.0);
+	float line = vec3(offset_uv, 0.0).x;
+	line = abs(line);
+	line = gradient_to_edge * line;
+	line = sqrt(line);
+
+	float line_smoothness = clamp(Line_Smoothness, 0.001, 1.0);
+	float offset_plus = Line_Width + line_smoothness;
+	float offset_minus = Line_Width - line_smoothness;
+
+	float remapped_line;
+	{
+		float input_range = offset_minus - offset_plus;
+		remapped_line = (line - offset_plus) / input_range;
+	}
+	remapped_line = remapped_line * Brightness;
+	remapped_line = min(remapped_line, Alpha);
+	COLOR.rgb = vec3(COLOR.xyz) * vec3(remapped_line);
+	COLOR.a = remapped_line;
+}

core/ui/components/card.gd

@@ -43,6 +43,8 @@ var logger := Log.get_logger("GameCard")
 @onready var name_label := $%NameLabel
 @onready var progress := $%ProgressBar as ProgressBar
 @onready var tap_timer := $%TapTimer as Timer
+@onready var shine_rect := $%ShineShader as ColorRect
+@onready var god_rays_rect := $%GodRaysShader as ColorRect
 
 
 # Called when the node enters the scene tree for the first time.
@@ -98,10 +100,62 @@ func set_library_item(item: LibraryItem, free_on_remove: bool = true) -> void:
 
 func _on_focus() -> void:
 	highlighted.emit()
+	_shader_godrays_fade_in()
+	_shader_shine_fade_in()
+
+
+func _shader_godrays_fade_in() -> void:
+	var tween := create_tween()
+	var shader := god_rays_rect.material as ShaderMaterial
+	var final_color := Color(0.961, 0.937, 1.0, 0.2)
+	var start_color := Color(0.961, 0.937, 1.0, 0.0)
+	shader.set_shader_parameter("color", start_color)
+	god_rays_rect.visible = true
+	var on_tween := func(value: Color):
+		shader.set_shader_parameter("color", value)
+	tween.tween_method(on_tween, start_color, final_color, 0.5)
+
+
+func _shader_shine_fade_in() -> void:
+	var tween := create_tween()
+	var shader := shine_rect.material as ShaderMaterial
+	var final_alpha := 0.02
+	var start_alpha := 0.0
+	shader.set_shader_parameter("Alpha", start_alpha)
+	shine_rect.visible = true
+	var on_tween := func(value: float):
+		shader.set_shader_parameter("Alpha", value)
+	tween.tween_method(on_tween, start_alpha, final_alpha, 0.8)
 
 
 func _on_unfocus() -> void:
 	unhighlighted.emit()
+	_shader_godrays_fade_out()
+	_shader_shine_fade_out()
+
+
+func _shader_godrays_fade_out() -> void:
+	var tween := create_tween()
+	var shader := god_rays_rect.material as ShaderMaterial
+	var start_color := Color(0.961, 0.937, 1.0, 0.2)
+	var final_color := Color(0.961, 0.937, 1.0, 0.0)
+	shader.set_shader_parameter("color", start_color)
+	var on_tween := func(value: Color):
+		shader.set_shader_parameter("color", value)
+	tween.tween_method(on_tween, start_color, final_color, 0.5)
+	tween.tween_property(god_rays_rect, "visible", false, 0.0)
+
+
+func _shader_shine_fade_out() -> void:
+	var tween := create_tween()
+	var shader := shine_rect.material as ShaderMaterial
+	var start_alpha := 0.02
+	var final_alpha := 0.0
+	shader.set_shader_parameter("Alpha", start_alpha)
+	var on_tween := func(value: float):
+		shader.set_shader_parameter("Alpha", value)
+	tween.tween_method(on_tween, start_alpha, final_alpha, 0.1)
+	tween.tween_property(shine_rect, "visible", false, 0.0)
 
 
 func _gui_input(event: InputEvent) -> void:

core/ui/components/card.tscn

@@ -1,9 +1,11 @@
-[gd_scene load_steps=9 format=3 uid="uid://bkhrcemal7uxo"]
+[gd_scene load_steps=13 format=3 uid="uid://bkhrcemal7uxo"]
 
 [ext_resource type="Script" path="res://core/ui/components/card.gd" id="1_aiin0"]
 [ext_resource type="Texture2D" uid="uid://blc0qyvt1qhci" path="res://assets/images/placeholder-grid-portrait.png" id="2_2hlyj"]
 [ext_resource type="PackedScene" uid="uid://c5sfkhrfbao71" path="res://core/systems/effects/play_audio_effect.tscn" id="2_701dj"]
 [ext_resource type="PackedScene" uid="uid://bui0u88oe8jr" path="res://core/systems/effects/raise_effect.tscn" id="3_gyi80"]
+[ext_resource type="Shader" path="res://assets/shaders/highlight_shine.gdshader" id="5_0n631"]
+[ext_resource type="Shader" path="res://assets/shaders/god_rays.gdshader" id="7_8n7dp"]
 
 [sub_resource type="StyleBoxFlat" id="StyleBoxFlat_ygsnb"]
 corner_radius_top_left = 26
@@ -21,6 +23,37 @@ corner_radius_top_right = 5
 corner_radius_bottom_right = 5
 corner_radius_bottom_left = 5
 
+[sub_resource type="ShaderMaterial" id="ShaderMaterial_1bdvx"]
+resource_local_to_scene = true
+shader = ExtResource("5_0n631")
+shader_parameter/Line_Smoothness = 0.045
+shader_parameter/Line_Width = 0.075
+shader_parameter/Brightness = 0.81
+shader_parameter/Rotation_deg = 35.0
+shader_parameter/Distortion = 1.67
+shader_parameter/Speed = 0.31
+shader_parameter/Position = 0.0
+shader_parameter/Position_Min = 0.25
+shader_parameter/Position_Max = 0.5
+shader_parameter/Alpha = 0.02
+
+[sub_resource type="ShaderMaterial" id="ShaderMaterial_1nde2"]
+resource_local_to_scene = true
+shader = ExtResource("7_8n7dp")
+shader_parameter/angle = 0.0
+shader_parameter/position = 0.0
+shader_parameter/spread = 1.0
+shader_parameter/cutoff = -1.0
+shader_parameter/falloff = 1.0
+shader_parameter/edge_fade = 0.904
+shader_parameter/speed = 20.0
+shader_parameter/ray1_density = 8.0
+shader_parameter/ray2_density = 30.0
+shader_parameter/ray2_intensity = 0.3
+shader_parameter/color = Color(0.960784, 0.937255, 1, 0.117647)
+shader_parameter/hdr = false
+shader_parameter/seed = 5.96
+
 [sub_resource type="StyleBoxFlat" id="StyleBoxFlat_st1t5"]
 resource_local_to_scene = true
 bg_color = Color(0, 0, 0, 0)
@@ -63,8 +96,8 @@ on_signal = "highlighted"
 [node name="PanelContainer" type="PanelContainer" parent="."]
 clip_children = 1
 layout_mode = 0
-offset_right = 40.0
-offset_bottom = 40.0
+offset_right = 200.0
+offset_bottom = 300.0
 mouse_filter = 1
 theme_override_styles/panel = SubResource("StyleBoxFlat_ygsnb")
 
@@ -94,6 +127,7 @@ layout_mode = 2
 theme_override_styles/panel = SubResource("StyleBoxFlat_gtppc")
 
 [node name="MarginContainer" type="MarginContainer" parent="PanelContainer/TextureRect/NameMargin/NamePanel"]
+visible = false
 layout_mode = 2
 theme_override_constants/margin_left = 10
 theme_override_constants/margin_right = 10
@@ -120,6 +154,18 @@ theme_override_styles/fill = SubResource("StyleBoxFlat_up8ek")
 value = 50.0
 rounded = true
 
+[node name="ShineShader" type="ColorRect" parent="PanelContainer"]
+unique_name_in_owner = true
+visible = false
+material = SubResource("ShaderMaterial_1bdvx")
+layout_mode = 2
+
+[node name="GodRaysShader" type="ColorRect" parent="PanelContainer"]
+unique_name_in_owner = true
+visible = false
+material = SubResource("ShaderMaterial_1nde2")
+layout_mode = 2
+
 [node name="MarginContainer" type="MarginContainer" parent="."]
 show_behind_parent = true
 custom_minimum_size = Vector2(200, 300)