DEV Community: tommy

How to make a dissolve shader in Godot 4 (glowing burn edge + pixel-art teleport)

tommy — Thu, 22 Oct 2026 12:40:51 +0000

A dissolve is one of the cheapest ways to make a 2D game feel finished: enemies burn away on death, items fade out on pickup, a character teleports out. It looks fancy, but the whole thing is about 15 lines of fragment shader: a noise value, a threshold, and a thin band where you paint a glowing edge.

Here's how it works in Godot 4, with the actual shader I ship, plus a second version that stays crisp on pixel art.

1. The idea: noise vs. a threshold

Give every pixel a noise value between 0 and 1. Pick a threshold, amt. Any pixel whose noise is below the threshold disappears. Raise the threshold from 0 to 1 and the sprite eats itself away in organic blobs instead of fading uniformly.

That's it. Everything else is making the edge look hot.

2. Noise without a texture

You can use a NoiseTexture2D, but I prefer procedural noise in a shader include. Nothing to import, nothing to forget to assign, and it works at any resolution. This is a standard value noise plus fBm (several octaves added together):

// vfx_noise.gdshaderinc
float vfx_hash(vec2 p) {
    p = fract(p * vec2(123.34, 456.21));
    p += dot(p, p + 45.32);
    return fract(p.x * p.y);
}
float vfx_noise(vec2 p) {
    vec2 i = floor(p);
    vec2 f = fract(p);
    vec2 u = f * f * (3.0 - 2.0 * f); // smoothstep curve between cells
    return mix(mix(vfx_hash(i), vfx_hash(i + vec2(1.0, 0.0)), u.x),
            mix(vfx_hash(i + vec2(0.0, 1.0)), vfx_hash(i + vec2(1.0, 1.0)), u.x), u.y);
}
float vfx_fbm(vec2 p) {
    float v = 0.0;
    float a = 0.5;
    for (int k = 0; k < 5; k++) {
        v += a * vfx_noise(p);
        p = p * 2.03 + vec2(1.7, 9.2); // shift each octave so they don't line up
        a *= 0.5;
    }
    return v;
}

Single-octave noise gives you round, boring blobs. Five octaves give you the ragged, burnt-paper edge. Including it in a shader is one line: #include "res://addons/stylized_vfx/shaders/vfx_noise.gdshaderinc".

3. The dissolve shader

shader_type canvas_item;
#include "res://addons/stylized_vfx/shaders/vfx_noise.gdshaderinc"

// Put this material on any Sprite2D / TextureRect / Control.
uniform float dissolve_amount : hint_range(0.0, 1.0) = 0.4;
uniform bool auto_animate = true;
uniform float anim_speed = 0.3;
uniform float noise_scale = 6.0;
uniform float edge_width : hint_range(0.0, 0.2) = 0.06;
uniform vec4 edge_color : source_color = vec4(1.0, 0.55, 0.1, 1.0);
uniform vec4 edge_color_hot : source_color = vec4(1.0, 0.95, 0.6, 1.0);
uniform float edge_glow : hint_range(0.0, 5.0) = 2.0;

void fragment() {
    vec4 tex = COLOR; // COLOR already holds texture * modulate
    float amt = auto_animate ? (0.5 - 0.5 * cos(TIME * anim_speed * TAU)) * 1.08 - 0.04 : dissolve_amount;
    float n = vfx_fbm(UV * noise_scale);
    float d = n - mix(0.12, 0.88, amt);
    float keep = step(0.0, d);
    float e = 1.0 - smoothstep(0.0, edge_width, d);
    vec3 ec = mix(edge_color.rgb, edge_color_hot.rgb, smoothstep(0.5, 1.0, 1.0 - e));
    vec3 c = mix(tex.rgb, ec * edge_glow, e * keep * step(0.001, amt));
    COLOR = vec4(c, tex.a * keep);
}

Line by line, the parts that matter:

d = n - mix(0.12, 0.88, amt): this is the "distance" from the burn front. Negative means burnt, positive means still there. The mix(0.12, 0.88, ...) remap is the first gotcha: fBm values bunch up around 0.5 and almost never reach 0 or 1. If you threshold against raw amt, the first and last 10% of the slider do nothing. Remapping makes the whole 0 to 1 range useful.
keep = step(0.0, d): a hard cut. Multiplying alpha by it removes burnt pixels.
e = 1.0 - smoothstep(0.0, edge_width, d): 1 right at the burn front, fading to 0 a little way into the surviving pixels. That's the glowing band.
Two edge colours: ec blends from orange to near-white as you get closer to the front, so the very edge looks hottest, the way real embers do.
ec * edge_glow: multiplying past 1.0 makes the edge bloom if you have glow enabled in your WorldEnvironment (or just look over-bright if you don't, which still reads well).
step(0.001, amt): without this, a sprite at amt = 0 still shows a faint edge wherever the noise happens to be low. This hides the edge until the dissolve actually starts.

Swap edge_color to cyan and edge_color_hot to white and the same shader becomes a magic or sci-fi dissolve. Lower noise_scale for bigger chunks, raise it for fine ash.

4. Driving it from gameplay

auto_animate uses a cosine ping-pong so the effect loops in the editor, which is handy for tuning. In a game you want it off, and you tween dissolve_amount yourself, for example on an enemy's death:

func die() -> void:
    var mat := $Sprite2D.material as ShaderMaterial
    mat.set_shader_parameter("auto_animate", false)
    var tw := create_tween()
    tw.tween_property(mat, "shader_parameter/dissolve_amount", 1.0, 0.6).from(0.0)
    tw.tween_callback(queue_free)

Gotcha #2: shared materials. If ten enemies use the same ShaderMaterial, killing one dissolves all ten. Tick Local to Scene on the material (resource_local_to_scene = true in the .tscn) so every instance gets its own copy.

5. The pixel-art version

Run the shader above on a 32x32 sprite scaled up 3x and it looks wrong: the burn edge is smooth and sub-pixel while the sprite is chunky, and the motion is buttery while the rest of your game animates at 8 to 12 fps. For pixel art you need to fix both:

shader_type canvas_item;
#include "res://addons/pixel_vfx/shaders/px_common.gdshaderinc"
// Pixel dissolve / teleport for any sprite. Works per texel, so it stays crisp.
uniform float dissolve_amount : hint_range(0.0, 1.0) = 0.4;
uniform bool auto_animate = true;
uniform float anim_speed = 0.35;
uniform float fps = 12.0;
uniform float noise_scale = 0.45;
uniform bool teleport_mode = true; // dissolve top-down with a beam
uniform float edge_width : hint_range(0.0, 0.3) = 0.12;
uniform vec4 edge_color_1 : source_color = vec4(0.4, 0.9, 1.0, 1.0);
uniform vec4 edge_color_2 : source_color = vec4(1.0, 1.0, 1.0, 1.0);
uniform vec4 beam_color : source_color = vec4(0.4, 0.9, 1.0, 0.6);

void fragment() {
    vec4 tex = COLOR;
    vec2 cell = floor(UV / TEXTURE_PIXEL_SIZE);  // which texel are we in?
    float t = px_step_time(TIME, fps);           // floor(TIME * fps) / fps
    float amt = auto_animate ? (0.5 - 0.5 * cos(t * anim_speed * TAU)) * 1.2 - 0.1 : dissolve_amount;
    float n = px_noise(cell * noise_scale) * 0.7 + px_hash(cell) * 0.3;
    if (teleport_mode) n = mix(n, UV.y, 0.65);
    float d = n - amt;
    vec4 outc = tex;
    if (d < 0.0) {
        outc.a = 0.0;
        if (teleport_mode && amt > 0.05 && amt < 0.95 && px_hash(vec2(cell.x, floor(t * 8.0))) > 0.55) outc = beam_color;
    } else if (d < edge_width && amt > 0.0 && tex.a > 0.5) {
        outc.rgb = d < edge_width * 0.5 ? edge_color_2.rgb : edge_color_1.rgb;
    }
    COLOR = outc;
}

What changed and why:

cell = floor(UV / TEXTURE_PIXEL_SIZE): TEXTURE_PIXEL_SIZE is 1 / texture size, so this gives you integer texel coordinates. Sampling noise per cell instead of per screen pixel means every texel is either fully there or fully gone. No half-pixels, ever.
px_step_time: quantizes time to 12 fps so the dissolve "ticks" like a hand-animated sprite.
noise * 0.7 + hash * 0.3: smooth noise alone gives clumps; mixing in 30% per-texel random gives that crumbly, sparkly pixel break-up.
No smoothstep, two flat colours: the edge is two hard bands (white nearest the front, cyan behind). Pixel art wants a palette, not a gradient.
Teleport mode: mix(n, UV.y, 0.65) biases the noise with height, so the sprite dissolves top-down. Burnt columns randomly flash beam_color (re-rolled 8 times a second per column), which sells the "beamed out" look.
tex.a > 0.5: only paint edge colour on pixels that were opaque, so you don't draw a halo into the sprite's transparent border.

The slime on the far left is mid-teleport. Remember to set texture filtering to Nearest on the sprite (or in Project Settings > Rendering > Textures) or none of this stays crisp.

Wrap-up

Noise, a threshold, and a thin band above the threshold for the edge. Remap the threshold so the whole slider works, make the material local to scene, and for pixel art sample per texel and step time. Copy the snippets above and you have a dissolve for every sprite in your game.

If you'd rather drop in ready-made scenes, both shaders come from my packs:

Godot 4 Stylized VFX Pack Vol.1 ($2, MIT): the glowing dissolve plus fire, smoke, lightning, electric arc, sword slash, hit spark, magic portal, shield, rain and snow, all shader/particle code with no textures. The dissolve, fire and hit spark are also in the free Stylized VFX Lite.
Godot 4 Pixel Art VFX Pack Vol.1 ($2, MIT): the pixel teleport dissolve, hit flash, palette swap + outline, explosions, fire, lightning, heal auras and more.
Everything, including the new PS1 Shader Kit, is in the Godot 4 Mega Bundle ($14.99).

Disclosure: I sell the packs linked above (no affiliate links). The code was written with an AI coding assistant and tested by hand in Godot 4.5.1 (Compatibility renderer). All images are real in-engine captures.

How to get the PS1 look in Godot 4 (vertex snapping, affine warping, dither)

tommy — Sun, 18 Oct 2026 12:31:32 +0000

The PS1 look isn't one effect. It's four or five hardware limits stacked on top of each other. Fake each one in a shader and the style falls out by itself. Here's how each piece works in Godot 4, with the actual shader code I use, plus one mistake that made my floors look broken.

1. Vertex snapping: the "wobble"

The PS1 had no sub-pixel precision, so vertices snapped to whole screen pixels. As the camera moves, geometry jitters. You can fake this by snapping the clip-space position to a coarse grid in the vertex shader:

vec4 ps1_snap_clip(vec4 clip) {
    vec2 g = max(ps1_snap_grid * 0.5, vec2(1.0)); // e.g. (320, 240) * 0.5
    vec2 ndc = clip.xy / clip.w;                  // to normalized device coords
    ndc = floor(ndc * g + 0.5) / g;               // round to the grid
    clip.xy = ndc * clip.w;                       // back to clip space
    return clip;
}

void vertex() {
    vec4 clip = PROJECTION_MATRIX * (MODELVIEW_MATRIX * vec4(VERTEX, 1.0));
    POSITION = ps1_snap_clip(clip);
}

Divide by w first, snap, then multiply back. If you snap raw clip coords, distant objects barely wobble and near ones wobble too much.

2. Affine texture warping

The PS1 interpolated UVs linearly in screen space, with no perspective correction. That's why textures swim and bend. GPUs correct perspective for you, so you undo it: pass UV * w and w as a varying, then divide in the fragment shader.

varying vec3 v_affine;

void vertex() {
    // ...after POSITION is set:
    v_affine = vec3(UV * POSITION.w, POSITION.w);
}

void fragment() {
    vec2 affine_uv = v_affine.xy / v_affine.z;  // screen-linear = PS1-style
    vec2 uv = mix(UV, affine_uv, ps1_affine);   // 0 = modern, 1 = full PS1
}

The floor-smear lesson

My first version used full affine everywhere. Walls looked great, but the ground looked like smeared AI slop: pixels streaking into each other. The reason is that affine error grows with how much depth a triangle covers on screen. A floor made of two huge triangles running from your feet to the horizon is the worst case.

Three fixes, in order of impact:

Subdivide big planes. Smaller triangles mean less depth per triangle and less warp. (The real PS1 games did exactly this.)
Lower affine per material. I default floors to about 0.12 and leave walls at 0.5.
Fade it out where it hurts most: close to the camera, and on triangles whose depth changes fast across the screen:

vec2 ps1_affine_uv(vec2 uv, vec3 aff, float mult) {
    float a = clamp(ps1_affine * mult, 0.0, 1.0);
    a *= smoothstep(1.5, 5.0, aff.z);              // fade near the camera
    float dz = fwidth(aff.z) / max(aff.z, 0.0001); // steep depth across the screen?
    a *= 1.0 - smoothstep(0.02, 0.08, dz);
    return mix(uv, aff.xy / max(aff.z, 0.0001), a);
}

You keep the swimming on walls and props, and floors stay readable. Use filter_nearest_mipmap on the texture too, so distant floors don't shimmer into lines.

3. Low resolution, done properly

Don't fake low-res with a pixelate shader. Render the 3D world into a SubViewport at 320x240 and draw it upscaled with nearest filtering. Then snapping, dithering and texture pixels all line up on the same grid. That alignment is a big part of why it reads as authentic and not as a filter.

4. Colour depth + Bayer dither

The PS1 output 15-bit colour (5 bits per channel) and dithered to hide the banding. In a fullscreen canvas_item shader on the low-res image:

const float B4[16] = float[](0.,8.,2.,10., 12.,4.,14.,6., 3.,11.,1.,9., 15.,7.,13.,5.);

ivec2 p = ivec2(floor(UV * low_res));                   // low-res pixel coords
float t = (B4[(p.x & 3) + (p.y & 3) * 4] + 0.5) / 16.0; // threshold 0..1
float levels = exp2(color_bits) - 1.0;                  // 5 bits -> 31 levels
c += (t - 0.5) * dither_strength / levels;
c = floor(clamp(c, 0.0, 1.0) * levels + 0.5) / levels;

Tip: full-strength dither puts ugly grain on flat bright skies. I measure local contrast from four neighbouring pixels and cut the dither on flat, bright areas, keeping it in darks and gradients where it actually hides banding.

5. The finishing touches

Gouraud lighting: render_mode vertex_lighting; in a spatial shader. Lighting per vertex, not per pixel, very PS1.
Per-vertex fog: compute fog in vertex() from view distance and set the background to the same colour. That's how PS1 games hid their short draw distance.
Global shader parameters: put the snap grid, affine amount, fog and so on in Project Settings globals. Then one setting changes every material, and an "off" switch for before/after comparisons is trivial.

Wrap-up

Snap vertices, undo perspective correction (carefully), render low-res, quantize and dither. That's 90% of the look. Start with the snippets above, and remember to subdivide your floors.

If you'd rather skip the plumbing, I packaged all of this as the Godot 4 PS1 Shader Kit ($1.99, MIT). It has the lit and unshaded shaders, the 320x240 pixel camera, the dither post, N64 3-point filtering, PS1/N64/Saturn presets and two demo scenes. My other Godot packs are in the Godot 4 Mega Bundle ($14.99).

Disclosure: I sell the kit linked above (no affiliate links). The code was written with an AI coding assistant and tested by hand in Godot 4.5.1.

2 AI agent skills for indie game devs: Godot 4 code that actually runs, and a Steam page audit

tommy — Sat, 17 Oct 2026 11:52:30 +0000

If you use Cursor or Claude Code for game dev, you've seen it: the agent writes Godot 3 code that breaks in Godot 4. And your Steam page is the thing that decides your wishlists. I built a skill for each.

Godot 4 Gameplay Architect (€9)

Stops the agent from writing outdated GDScript. It has a table of 40+ Godot 3 to 4 renames and removals (yield vs await, KinematicBody2D vs CharacterBody2D, export syntax, signals and more), ready patterns for state machines, components, save systems and object pooling, and a pre-release checklist.
https://skillhq.dev/skills/tommy/godot4-gameplay-architect

Steam Page Doctor (€5)

Give your agent your Steam store page and it returns a scored audit (100-point weighted rubric), prioritised fixes, ready-to-paste short description and About This Game copy, a 20-tag plan, and a timeline for Coming Soon, Next Fest and launch. It never invents claims about your game.
https://skillhq.dev/skills/tommy/steam-page-doctor

Both install as SKILL.md skills in Claude Code, Cursor and Codex CLI. What's your agent's worst Godot habit?

Disclosure: I made these skills and they're paid.

4 agent skills I built for the bugs AI coding agents keep shipping

tommy — Sat, 17 Oct 2026 11:51:43 +0000

Cursor, Claude Code and Codex are fast, but they keep making the same expensive mistakes. I packaged fixes for four of them as installable SKILL.md agent skills.

1. Stripe Subscription Guard (€7)

The silent Stripe bug: the webhook returns 200 but the database never updates, so cancelled users keep access, or an upgrade creates a second subscription and charges twice. This skill gives the agent 10 rules plus a map of exactly which DB change each Stripe event must make. Works with any stack.
https://skillhq.dev/skills/tommy/stripe-subscription-guard

2. SaaS AuthZ Audit (€31)

The most common web flaw: user A can read user B's data. 14 concrete patterns with how to detect and fix each, Supabase and Firebase database rules, notes for 6 frameworks, a two-tenant test plan with ready-made regression tests, and a script that inventories every endpoint.
https://skillhq.dev/skills/tommy/saas-authz-audit

3. MCP Tool Hardening (€27)

For building MCP servers, or deciding whether to install someone else's. 12 rules, checks for hidden instructions and silent tool updates, remote-server auth guidance, 60+ attack test inputs, a 50-point scored audit and a standalone scanner.
https://skillhq.dev/skills/tommy/mcp-tool-hardening

4. Repo Docs Autopilot (€35)

Docs that don't lie: every claim must point to a file, command output or commit, and commands are actually run before they go in the README. Covers README, API reference, architecture diagrams, changelog from git history, AGENTS.md/CLAUDE.md, plus a check that fails CI when docs go stale.
https://skillhq.dev/skills/tommy/repo-docs-autopilot

Which of these mistakes has your agent made? Happy to answer questions in the comments.

Disclosure: I made these skills and they're paid.

I turned my Next.js + Supabase safety rules into installable agent skills (free + €2)

tommy — Sat, 17 Oct 2026 10:55:56 +0000

After my last post on the 7 mistakes AI coding agents make in Next.js + Supabase apps, a few people asked for the rules in a drop-in format. So I packaged them as SKILL.md agent skills that work in Claude Code, Cursor and Codex CLI.

Free: ShipSafe Lite

Four rules that stop the worst mistakes:

Keep the Supabase service role key server-side only
RLS on for every table, with real policies
Verify auth on the server with getUser(), never trust the client
Stay in scope: no surprise refactors or migrations

Get it: https://skillhq.dev/skills/tommy/shipsafe-nextjs-supabase-lite

Full: ShipSafe Rules (€2)

All 12 rules (secrets, RLS, auth, rate limits, errors and logging, Stripe webhooks, uploads and storage, AI endpoints, background jobs, PII in logs, a ship checklist), plus a pre-deploy audit prompt, Claude Code settings that block reading .env and destructive Supabase commands, and an AGENTS.md for Codex.

Get it: https://skillhq.dev/skills/tommy/shipsafe-nextjs-supabase

Feedback welcome: which mistake does your agent make most?

Disclosure: I made these and the full version is paid.

7 mistakes AI coding agents make in Next.js + Supabase apps (and the rules that stop them)

tommy — Sat, 17 Oct 2026 10:41:13 +0000

AI agents like Cursor and Claude Code write working code fast. They also ship the same handful of dangerous mistakes over and over, because "it runs" is not the same as "it's safe." Here are the seven I see most in Next.js + Supabase projects, plus the one-line rule you can drop into your agent's instructions to prevent each.

1. Using the service role key in client code

The agent hits a permissions error, grabs the service_role key, and the error goes away. So does your Row Level Security.
Rule: "Never import or reference the Supabase service role key outside server-only files. If a query fails on RLS, fix the policy, not the key."

2. Tables with RLS turned off

New tables get created, queries work in dev, and nobody enables RLS.
Rule: "Every new table must enable RLS and ship with explicit select/insert/update/delete policies in the same migration."

3. Trusting the client for auth checks

Hiding a button is not authorization.
Rule: "Check the session and ownership on the server in every Route Handler and Server Action that reads or writes user data."

4. Webhooks without signature checks or idempotency

Stripe-style webhooks get processed unverified, and retries grant access twice.
Rule: "Verify the webhook signature before parsing, and make handlers idempotent using the event ID."

5. Secrets leaking via NEXT_PUBLIC_

Anything prefixed NEXT_PUBLIC_ is shipped to the browser.
Rule: "Only public, non-secret values may use the NEXT_PUBLIC_ prefix."

6. Migrations that lock big tables

Adding an index or a NOT NULL column on a large table can lock it in production.
Rule: "Create indexes CONCURRENTLY, add columns nullable first, backfill, then add constraints. Include a rollback step."

7. N+1 queries hidden in loops

The agent fetches related rows one at a time inside a .map().
Rule: "Never query inside a loop. Batch with in() filters or joins, and paginate every list query."

How to actually make the agent follow these

Put them where the agent reads them every session:

Claude Code: CLAUDE.md in the repo root
Cursor: .cursor/rules/*.mdc
Codex and others: AGENTS.md

Keep each rule short and specific. Vague rules like "write secure code" get ignored; concrete ones like "never use the service role key in client code" stick.

For reviews, a second pass by a narrowly scoped "reviewer" agent (security, payments, migrations) catches far more than asking the same agent that wrote the code.

Disclosure: I sell two packs built around this approach. ShipSafe Rules is ready-made CLAUDE.md, AGENTS.md and Cursor rules for Next.js + Supabase. The Senior Engineer Agent Pack is five reviewer subagents for security, payments, migrations, performance and tests. Everything above works without them. Copy the rules and use them.