Lines Screen Transition

Exuin

Here is a simple lines screen transition. Change y_threshold to change how far along the lines are.

Shader code
shader_type canvas_item;

uniform float num_lines = 20.;
uniform float y_threshold: hint_range(0.0, 1.0) = 0.5;
uniform vec4 line_color_a: hint_color = vec4(1.);
uniform vec4 line_color_b: hint_color = vec4(0., 0., 0., 1.0);

void fragment() {
	vec2 tiled_uv = vec2(fract(UV.x * num_lines / 2.), UV.y);
	if (tiled_uv.x < 0.5){
		if(tiled_uv.y < y_threshold){
			COLOR = line_color_a;
		} else {
			COLOR = vec4(0.0);
		}
	} else {
		if (tiled_uv.y > 1. - y_threshold){
			COLOR = line_color_b;
		} else {
			COLOR = vec4(0.0);
		}
	}
}
Tags
lines, transition
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 Exuin

Canvas item249

Screentone – Black spaced pixels

Canvas item527

Square Pixelation

Canvas item27

Gaussian Blur

Related shaders

Canvas item7

Retro Screen Lines

Canvas item9195

Diamond-based Screen Transition

Canvas item185

Distortion Speed Lines

guest

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Joyless
Joyless
9 months ago

Thanks Exuin. Improved version that multiplies the line colour with the texture’s colour (CC0):

shader_type canvas_item;

uniform float num_lines = 20.0;
uniform float y_threshold: hint_range(0.0, 1.0) = 0.5;
uniform vec4 line_color_a: source_color = vec4(1.0);
uniform vec4 line_color_b: source_color = vec4(0.0, 0.0, 0.0, 1.0);

void fragment() {
	vec2 tiled_uv = vec2(fract(UV.x * num_lines / 2.0), UV.y);
	if (tiled_uv.x < 0.5) {
		if (tiled_uv.y < y_threshold) {
			COLOR *= line_color_a;
		} else {
			COLOR = vec4(0.0);
		}
	} else {
		if (tiled_uv.y > 1.0 - y_threshold) {
			COLOR *= line_color_b;
		} else {
			COLOR = vec4(0.0);
		}
	}
}
0
Reply