Very Simple Letterbox Shader

A simple shader that replicates a letterbox effect.

Shader code
/* Simple Godot Letterbox Shader - Kanjo (CC0) */
shader_type canvas_item;

uniform float squishedness = 0.0;

void fragment() {
	if (SCREEN_UV.y < squishedness * 0.5 || SCREEN_UV.y > 1.0 - (squishedness * 0.5)) COLOR = vec4(0, 0, 0, 1);
}

/* Better solution (credit to Beebe Ray in comments) */
shader_type canvas_item;

uniform float squishedness = 0.0;

void fragment() {
	COLOR = mix(
		vec4(vec3(0.0), 1.0),
		texture(SCREEN_TEXTURE, SCREEN_UV),
		step(squishedness * 0.5, SCREEN_UV.y) - step(1.0 - squishedness * 0.5, SCREEN_UV.y)
	);
}
Tags
cinematic, letterbox
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.

Related shaders

2D simple animated flag shader

3D simple animated flag shader

Simple 2d transition

guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Beebe Ray
Beebe Ray
1 month ago

One line instead.

COLOR = mix(
vec4(vec3(0.0), 1.0),
texture(SCREEN_TEXTURE, SCREEN_UV),
step(squishedness, SCREEN_UV.y) - step(1.0-squishedness, SCREEN_UV.y)
);
Last edited 1 month ago by Beebe Ray
snesmocha
snesmocha
27 days ago
Reply to  Beebe Ray

ah yes, the classic commenter does better xd