Simple circle transition

agurkas April 2, 2021

This is a simple shader for a circle transition. It expects screen width and screen height in pixels and knowing those it always produces a perfect circle in the center of a rect.

For the best result, have a script that sets the screen_width and screen_height uniforms in _ready() of a script to the rect_size of a ColorRect. This way the screen_width and screen_height will always be automatically set to correct size.

Shader code

shader_type canvas_item;
render_mode unshaded;

uniform float circle_size : hint_range(0.0, 1.05);
uniform float screen_width;
uniform float screen_height;

void fragment() {
	float ratio = screen_width / screen_height;
	float dist = distance(vec2(0.5, 0.5), vec2(mix(0.5, UV.x, ratio), UV.y));
	COLOR.a = step(circle_size, dist);
}

Related shaders

Canvas item10

Simple Circle Transition

Canvas item213

Simple 2d transition

Canvas item13

Simple Menu Transition

5 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

Snafuey

3 years ago

Kind of new to Godot started a year ago. Very Very new to shaders. I have only done one and I copied a tutorial so really I have done none. Looking at this I have some thoughts on how I could change it to target the player location instead of the center of the screen. I would love to hear what other people think on how to change it to achieve that.

agurkas

2 years ago

Reply to Snafuey

Changing it to use the position of the player is pretty easy. You have to know the position of the player in viewport coordinates. Then you can add

uniform vec2 pos;

and use that like this

float dist = distance(pos, vec2(mix(pos.x, UV.x, ratio), UV.y));

Now, to get the player position in viewport coordinates you would do something like this:

var screen_pos = _camera.unproject_position(_player.global_transform.origin)
var viewport_pos = Vector2(screen_pos.x / rect_size.x, screen_pos.y / rect_size.y)