Hole Texture Transition

BitLife GD

A simple texture transition for your games. Use the shader in a Color Rect and add the texture of your preference. You can animate it with animation player or other methods.

Texture recommendations: 
   -Transparent texture, except for the silhouette.
   -Don’t let the silhouette touch the edge of the texture.

Feel free to optimize this shader! 🙂

Based in: https://godotshaders.com/shader/simple-circle-transition-2/

Shader code
shader_type canvas_item;
render_mode unshaded;

uniform sampler2D hole_texture;
uniform float screen_width;
uniform float screen_height;
uniform float scale :hint_range(0.0, 100.0, 0.01);

void fragment() {
	float ratio = screen_width / screen_height;
	vec2 custom_uv = (UV - vec2(0.5)) * scale + vec2(0.5);
	vec4 textura = texture(hole_texture,custom_uv);
	float dist = distance(vec2(0.5, 0.5), vec2(mix(0.5, UV.x, ratio), UV.y));
	if (scale < 95.0){
		COLOR.a = step(textura.a, dist);
	}
}
Tags
Transition Texture
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

Canvas item339

Texture population using Texture

Canvas item18

Simple Menu Transition

Canvas item323

Glitch Transition

Subscribe
Notify of
guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Joyless
Joyless
29 days ago

I improved the shader. You can set a custom hole color among other changes.

shader_type canvas_item;
render_mode unshaded;

uniform sampler2D hole_texture;
uniform vec4 hole_color : source_color = vec4(0.0);
uniform float ratio = 1.0;
uniform float scale : hint_range(0.0, 100.0);

void fragment() {
// Skip if hole is very small
if (scale < 100.0) {
// Adjust UV by aspect ratio
vec2 aspect_corrected_uv = UV;
aspect_corrected_uv.x = ((UV.x – 0.5) * ratio) + 0.5; 

// Scale UV, keeping center at (0.5, 0.5)
vec2 custom_uv = ((aspect_corrected_uv – vec2(0.5)) * scale) + vec2(0.5);
// Sample hole texture at UV coordinates
vec4 texture_a = texture(hole_texture, custom_uv);

// Calculate distance from center
vec2 aspect_fixed_center = vec2(0.5 * ratio, 0.5);
vec2 aspect_fixed_uv = vec2(UV.x * ratio, UV.y);
float dist = distance(aspect_fixed_uv, aspect_fixed_center) / ratio;

// Cut out hole
if (texture_a.a >= dist) {
COLOR = hole_color;
}
}
}

Last edited 29 days ago by Joyless
0
Reply
Joyless
Joyless
29 days ago
Reply to  Joyless

I also added a custom cutoff_scale.

shader_type canvas_item;
render_mode unshaded;


uniform sampler2D hole_texture;
uniform vec4 hole_color : source_color = vec4(0.0);
uniform float ratio = 1.0;
uniform float scale : hint_range(0.0, 100.0) = 0.0;
uniform float cutoff_scale : hint_range(0.0, 100.0) = 95.0;


void fragment() {
	// Skip if hole is very small
	if (scale < cutoff_scale) {
		// Adjust UV by aspect ratio
		vec2 aspect_corrected_uv = UV;
		aspect_corrected_uv.x = ((UV.x - 0.5) * ratio) + 0.5; 
		
		// Scale UV, keeping center at (0.5, 0.5)
		vec2 custom_uv = ((aspect_corrected_uv - vec2(0.5)) * scale) + vec2(0.5);
		// Sample hole texture at UV coordinates
		vec4 texture_a = texture(hole_texture, custom_uv);
		
		// Calculate distance from center
		vec2 aspect_fixed_center = vec2(0.5 * ratio, 0.5);
		vec2 aspect_fixed_uv = vec2(UV.x * ratio, UV.y);
		float dist = distance(aspect_fixed_uv, aspect_fixed_center) / ratio;
		
		// Cut out hole
		if (texture_a.a >= dist) {
			COLOR = hole_color;
		}
	}
}
0
Reply