Diamond-based Screen Transition
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)
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;
}
}
Does anyone know how to make it look pixelized?
you can just put it behind a low-res viewport
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); }how to make it square not diamond?
Heck yeah! Fancy screen transition! super easy to use and animate, too!