Diagonal Mask / Border / Edge

Allows you to modify a sprite’s edges to achieve effects ranging from from soft diagonal edges to a full blown diamond.

Modified from https://godotshaders.com/shader/hex-mask-border-outline-shader/

Shader code
// 2D Diagonal Borders Masking Shader
// Modified from https://godotshaders.com/shader/hex-mask-border-outline-shader/
shader_type canvas_item;
const float M  = -1.0; // Angle of diagonal line
uniform float effect : hint_range( 0.0, 0.5 ) = 0.5; // how much 

void fragment() {
	// Pull in the texture
	COLOR = texture( TEXTURE, UV );
	// Need a copy for original alpha values
	vec4 color = texture( TEXTURE, UV );
	// Set everything to transparent
	COLOR.a = color.a * 0.0;
	// Map current point to first quadrant
	float x0 = min(UV.x, 1.0 - UV.x);
	float y0 = min(UV.y, 1.0 - UV.y);
	// Compute diagonal line through UV.x,UV.y depending on the effect
	float m = M;
	float m0 = -1.0 / m;
	float b0 = effect + (y0 - m0 * x0);
	// Find x,y = intersection of edge through UV.x,UV.y
	float x = ( 0.5 - b0 ) / ( m0 - m );
	float y = m0 * x + b0;
	// Are we inside the diagonal box?
	if ( x0 >= x && y0 >= 0.0 ) {
		float d = distance( vec2( x, y ), vec2( x0, y0 ) );
		COLOR.a = color.a * 1.0;
	}
}
Tags
border, Diagonal, edge, mask, Rounded
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

Hex Mask/Border/Outline

Tiled texture inside of mask

Animated TV-Static Border Shader

guest

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
lgmeister
lgmeister
1 month ago

Total shader noob here. How do I change it so it’s not diagonal. I’m trying to make a shader mask the top or bottom of a texture.