Wave Bar Shader (#204)

* Add new wave shader

It doesnt work yet

* Added Correct Gradient resource to fill

---------

Co-authored-by: Thomas Wessel <turpleturtle12@gmail.com>

Author: LifeHckr

Scenes/BattleDirector/Assets/wave.gdshader

@@ -0,0 +1,72 @@
+shader_type canvas_item;
+
+uniform float fillLevel : hint_range(0.0, 1.0) = 0.5;
+uniform float waveIntensity : hint_range(0.0, 3.0) = 1.0;
+uniform sampler2D waveGradient;
+uniform vec4 backWaveTint : source_color = vec4(0.7, 0.7, 0.8, 1.0);
+
+void fragment() {
+	vec2 centeredUV = UV * 2.0 - 1.0;
+
+	vec4 outputColor = vec4(0.0, 0.0, 0.0, 1.0);
+
+	//Only do stuff if the bar is filled
+	if (fillLevel > 0.0) {
+
+		////**** Gradient Texture Sampling ****////
+
+		//Gets the centered pos of the fillLevel
+		float centeredFillLevel = mix(1.0, -1.0, fillLevel);
+
+		//Calculate where we should sample the gradient for this section of the water
+		float gradientPosition = fillLevel - (centeredUV.y - centeredFillLevel) / 2.0;
+
+		//Finally get the color from the gradient
+		vec4 sampledColorFromGradient = texture(waveGradient, vec2(gradientPosition, 0.5));
+
+		////**** Wave Sim ****////
+
+		float waveBase = smoothstep(0.1, 0.9, sin(centeredUV.x * 2.0 + PI * 0.5) - 0.3);
+
+		float centerWaveAmp = 0.05 * waveIntensity; //How much larger the center wave should be
+		float mainWaveAmp = 0.04 * waveIntensity; //Overall sin amplitude
+		float surfaceRippleAmp = 0.03 * waveIntensity; //How much the two waves should vary
+		float verticalMovement = 0.03 * waveIntensity; //How much it moves vertically
+
+		//Flatten stuff out if the bar is full
+		if (fillLevel > 0.9999) {
+			centerWaveAmp = 0.0;
+			mainWaveAmp = 0.0;
+			surfaceRippleAmp = 0.0;
+			verticalMovement = 0.0;
+		}
+
+		//How far from the the bottom the waves should appear
+		float waveHeight = mix(1.0, -1.0, fillLevel) + sin(TIME * PI * 0.5) * verticalMovement;
+
+		//Offset wave position and change direction
+		float frontWaveYOffset = sin((TIME * 2.0 + centeredUV.x * 3.0) * 2.0) * mainWaveAmp;
+		float backWaveYOffset  = sin((TIME * -2.0 + centeredUV.x * 3.0 + PI) * 2.0) * mainWaveAmp;
+
+		//Calc surface ripples
+		float surfaceAmplitudes = sin(TIME * 3.0) * surfaceRippleAmp * waveBase;
+
+		//Final Y positions of the waves
+		float frontWaveY = waveHeight - (surfaceAmplitudes + frontWaveYOffset);
+		float backWaveY  = waveHeight - (-surfaceAmplitudes + backWaveYOffset);
+
+		//Determine which wave is in front for this fragment
+		float isBelowFrontWave = step(frontWaveY, centeredUV.y);
+		float isBelowBackWave  = step(backWaveY, centeredUV.y);
+
+		float backOnlyVisibility = clamp(isBelowBackWave - isBelowFrontWave, 0.0, 1.0);
+
+		if (isBelowFrontWave > 0.5) {
+			outputColor = sampledColorFromGradient; //Just assign the color
+		} else if (backOnlyVisibility > 0.5) {
+			outputColor = vec4(sampledColorFromGradient.rgb * backWaveTint.rgb,sampledColorFromGradient.a * backWaveTint.a);
+		}
+	}
+
+	COLOR = outputColor;
+}

Scenes/BattleDirector/Assets/wave.gdshader.uid

@@ -0,0 +1 @@
+uid://difiiwiddwutp

Scenes/BattleDirector/NotePlacementBar.tscn

@@ -1,8 +1,9 @@
-[gd_scene load_steps=12 format=3 uid="uid://duhiilcv4tat3"]
+[gd_scene load_steps=15 format=3 uid="uid://duhiilcv4tat3"]
 
 [ext_resource type="Script" uid="uid://gj666xe815py" path="res://Scenes/BattleDirector/Scripts/NotePlacementBar.cs" id="1_456es"]
 [ext_resource type="Texture2D" uid="uid://cnyr5usjdv0ni" path="res://Scenes/BattleDirector/Assets/NoteQueue_Frame.png" id="2_3tw16"]
 [ext_resource type="Texture2D" uid="uid://gcst7q2acsqm" path="res://Scenes/BattleDirector/Assets/PlacementBar_Under.png" id="2_5a8x5"]
+[ext_resource type="Shader" uid="uid://difiiwiddwutp" path="res://Scenes/BattleDirector/Assets/wave.gdshader" id="2_kb2co"]
 [ext_resource type="Texture2D" uid="uid://c3chrsxrulapd" path="res://Classes/Notes/Assets/Note_PlayerBasic.png" id="3_6ylx6"]
 [ext_resource type="Texture2D" uid="uid://bi4tbiovlm2g1" path="res://Scenes/BattleDirector/Assets/PlacementBar_Over.png" id="3_kb2co"]
 [ext_resource type="Texture2D" uid="uid://caw70lr5e1yiq" path="res://Classes/Notes/Assets/Note_PlayerDouble.png" id="4_6w8ha"]
@@ -11,6 +12,16 @@
 offsets = PackedFloat32Array(0)
 colors = PackedColorArray(0, 0, 0, 1)
 
+[sub_resource type="GradientTexture2D" id="GradientTexture2D_kb2co"]
+gradient = SubResource("Gradient_xvck1")
+
+[sub_resource type="ShaderMaterial" id="ShaderMaterial_e2fap"]
+shader = ExtResource("2_kb2co")
+shader_parameter/fillLevel = 0.0
+shader_parameter/waveIntensity = 1.0
+shader_parameter/waveGradient = SubResource("GradientTexture2D_kb2co")
+shader_parameter/backWaveTint = Color(0.7, 0.7, 0.8, 1)
+
 [sub_resource type="GradientTexture2D" id="GradientTexture2D_0bqho"]
 gradient = SubResource("Gradient_xvck1")
 width = 32
@@ -52,6 +63,7 @@ anchor_bottom = 1.0
 grow_horizontal = 2
 grow_vertical = 2
 script = ExtResource("1_456es")
+_waveMaterial = SubResource("ShaderMaterial_e2fap")
 _notePlacementBar = NodePath("PlacementBar")
 _particles = NodePath("PlacementBar/Rock")
 _fullBarParticles = NodePath("PlacementBar/FullBarParticles")
@@ -77,6 +89,7 @@ virtual_keyboard_enabled = false
 middle_mouse_paste_enabled = false
 
 [node name="PlacementBar" type="TextureProgressBar" parent="."]
+material = SubResource("ShaderMaterial_e2fap")
 layout_mode = 0
 offset_left = 41.0
 offset_top = 33.0

Scenes/BattleDirector/Scripts/NotePlacementBar.cs

@@ -23,9 +23,13 @@ private double CurrentBarValue
         {
             _notePlacementBar.Value = value;
             _particles.Emitting = CurrentBarValue >= MaxValue; //This is so goated
+            _waveMaterial.SetShaderParameter("fillLevel", _notePlacementBar.Value / MaxValue);
         }
     }
 
+    [Export]
+    private ShaderMaterial _waveMaterial; //Sort of breaks the pixel art style, but its cool
+
     [Export]
     private TextureProgressBar _notePlacementBar;
     private Gradient _gradTex;