Diamond-based Screen Transition

mackatap

A transition shader drawn from this article by Timm[ie] Wong @DDRKirbyISQ. Permission was given by this individual for this post. The article explains more in depth and similar versions of this shader. Animating the shader parameter “progress” creates the transition effect. I have found that a tween using trans_cubic and ease_out looks pretty nice. Changing the final line from > to < will reverse the transition effect.

tween.interpolate_property(mymaterial, “shader_param/progress”, 1, 0, 1.5, Tween.TRANS_CUBIC, Tween.EASE_OUT) 

See more about this shader
Shader code
shader_type canvas_item;

// Ranges from 0 to 1 over the course of the transition.
// We use this to actually animate the shader.
uniform float progress : hint_range(0, 1);

// Size of each diamond, in pixels.
uniform float diamondPixelSize = 10f;

void fragment() {
	float xFraction = fract(FRAGCOORD.x / diamondPixelSize);
	float yFraction = fract(FRAGCOORD.y / diamondPixelSize);
	float xDistance = abs(xFraction - 0.5);
	float yDistance = abs(yFraction - 0.5);
	if (xDistance + yDistance + UV.x + UV.y > progress * 4f) {
		discard;
	}
}
Tags
blend, 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 mackatap

Spatial12

Fade by distance to character

Related shaders

Canvas item11

Lines Screen Transition

Canvas item8

Animated Diamond Pattern

Canvas item138

Screentone scene transition

Subscribe
Notify of
guest

7 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Pixelneed
Pixelneed
2 years ago

Does anyone know how to make it look pixelized?

0
Reply
ttyyyyy
ttyyyyy
1 year ago
Reply to  Pixelneed

you can just put it behind a low-res viewport

0
Reply
Shady
Shady
1 year ago

A slightly more optimized version (avoiding shader-unfriendly if statement):
See https://godotshaders.com/shader/optimize-your-shaders/

shader_type canvas_item;


// Ranges from 0 to 1 over the course of the transition.
// We use this to actually animate the shader.
uniform float progress : hint_range(0, 1);


// Size of each diamond, in pixels.
uniform float diamondPixelSize = 10f;


float when_lt(float x, float y) {
  return max(sign(y - x), 0.0);
}

void fragment() {
	float xFraction = fract(FRAGCOORD.x / diamondPixelSize);
	float yFraction = fract(FRAGCOORD.y / diamondPixelSize);
	float xDistance = abs(xFraction - 0.5);
	float yDistance = abs(yFraction - 0.5);
	COLOR.a *=  when_lt(xDistance + yDistance + UV.x + UV.y, progress * 4f);
}
3
Reply
Nzr
Nzr
1 year ago

how to make it square not diamond?

0
Reply
DriftWare.exe
DriftWare.exe
1 year ago

Heck yeah! Fancy screen transition! super easy to use and animate, too!

0
Reply
MatiasVME
MatiasVME
5 months ago

For Godot 4

transition.gdshader

shader_type canvas_item;




// Ranges from 0 to 1 over the course of the transition.
// We use this to actually animate the shader.
uniform float progress : hint_range(0, 1);




// Size of each diamond, in pixels.
uniform float diamondPixelSize = 10.0;




float when_lt(float x, float y) {
  return max(sign(y - x), 0.0);
}


void fragment() {
	float xFraction = fract(FRAGCOORD.x / diamondPixelSize);
	float yFraction = fract(FRAGCOORD.y / diamondPixelSize);
	float xDistance = abs(xFraction - 0.5);
	float yDistance = abs(yFraction - 0.5);
	COLOR.a *=  when_lt(xDistance + yDistance + UV.x + UV.y, progress * 4.0);
}

and de transition scene with a ColorRect

extends Node2D


func change_scene_to_file(path):
	%Background.material["shader_parameter/progress"] = 1.0
	
	var tween = create_tween()
	tween.tween_property(
		%Background.material, 
		"shader_parameter/progress", 
		1.0, 
		1
	).from(0.0).set_trans(Tween.TRANS_SINE)
	
	await tween.finished
	
	tween = create_tween()
	tween.tween_property(
		%Background.material, 
		"shader_parameter/progress", 
		0, 
		1
	).from(1.0).set_trans(Tween.TRANS_SINE)
	
	get_tree().change_scene_to_file(path)
3
Reply
sidpoke
sidpoke
2 months ago

Hi! I added parameters to allow changing the angle & anchor point of the transition.
Uses the Godot 4.0 version that has the optimizations in it.

Note: probably not 100% accurate but it works.

Have fun!

shader_type canvas_item;

// Ranges from 0 to 1 over the course of the transition.
// We use this to actually animate the shader.
uniform float progress : hint_range(0, 1);
uniform float multiplier : hint_range(1, 10) = 3;
uniform float angle : hint_range(0, 360) = 0.0;

// anchor point of the transition (best anchor point result is 0.5, 0.5)
uniform vec2 anchor = vec2(0.5, 0.5);
// use this to increase the distance from the anchor point
uniform float anchorOffset = 1.0;

// Size of each diamond, in pixels.
uniform float diamondPixelSize = 10.0;

float when_lt(float x, float y) {
  return max(sign(y - x), 0.0);
}

void fragment() {
    float xFraction = fract(FRAGCOORD.x / diamondPixelSize);
    float yFraction = fract(FRAGCOORD.y / diamondPixelSize);
    float xDistance = abs(xFraction - 0.5);
    float yDistance = abs(yFraction - 0.5);

    COLOR.a *= when_lt(xDistance + yDistance + cos(radians(angle)) * (UV.x - anchor.x) + sin(radians(angle)) * (UV.y - anchor.y), (-anchorOffset + progress * multiplier));
}
1
Reply