Pixel Melt

Shader code
shader_type canvas_item;

// Animate from 0 to 1
uniform float progress: hint_range(0.0, 1.0) = 0.0;

// How jagged each band of melting pixels are
uniform float meltiness: hint_range(0.0, 16.0) = 1.0;

float psuedo_rand(float x) {
	return mod(x * 2048103.0 + cos(x * 1912.0), 1.0);
}

void fragment() {
	vec2 uv = UV;
	
	// Move pixels near the top faster
	uv.y -= progress / UV.y;
	
	// Created jagged edges for each pixel on the x-axis 
	uv.y -= progress * meltiness * psuedo_rand(UV.x - mod(UV.x, TEXTURE_PIXEL_SIZE.x));
	
	COLOR = texture(TEXTURE, uv);
	
	// "delete" pixels out of range
	if (uv.y <= 0.0) {
		COLOR.a = 0.0;
	}
}
Live Preview
Tags
Melt, ooze, pixel, transition
The shader code and all code snippets in this post are under MIT license and can be used freely. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from ericalfaro

Related shaders

guest

5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Parallax.Rat
1 year ago

Very nice effect!

reid
1 year ago

simple and cool

David Leon
David Leon
11 months ago

Hmm, not working. I put it in a color rect. Help plz?

QuietPenguinGaming
QuietPenguinGaming
11 months ago
Reply to  David Leon

You’ll want to use a gdscript to trigger it. If you put something like this on a button:

———————

extends Button

@export var spriteToImpact : TextureRect

func _pressed():
var shaderMaterial = spriteToImpact.material

var tween = create_tween()
tween.tween_property(shaderMaterial, “shader_parameter/progress”, 1, 1)

await tween.finished

——————–

Basically you need to manually set ‘progress’ somehow 🙂

QuietPenguinGaming
QuietPenguinGaming
11 months ago

Awesome effect!!