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;
	}
}
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.

Related shaders

Doom Screen Melt Effect

Sub-Pixel Accurate Pixel-Sprite Filtering

2D shader: Out of body ghost effect (Pixel Art)

Subscribe
Notify of
guest

5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Parallax.Rat
10 months ago

Very nice effect!

reid
7 months ago

simple and cool

David Leon
David Leon
2 months ago

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

QuietPenguinGaming
QuietPenguinGaming
2 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
2 months ago

Awesome effect!!