2D fire
A simple fire effect. Set the spread to either fill the whole sprite or be more compact like a campfire or torch. Attach the shader to a ColorRect or a Sprite (with a base texture assigned).
Uniforms
- Noise Tex – Texture which defines the flames. You can use the built-in Noise Texture. Check the “Seamless” parameter in Noise Texture.
- Gradient Tex – The gradient that defines the coloring. Use the built-in Gradient Texture.
- Brighter Color, Middle Color and Darker Color – Set three colors to your fire.
- Spread – How wide or compact the fire should be.
If you change step()
to smoothstep()
the edges between the colors will be softer and a little less cartoony.
Shader code
/*
Original shader from Fubucci – https://www.febucci.com/2019/05/fire-shader/
Converted to Godot Shader Language by Godot Shaders - godotshaders.com/shader/2D-fire/
*/
shader_type canvas_item;
uniform sampler2D noise_tex;
uniform sampler2D gradient_tex;
uniform vec4 brighter_color : hint_color = vec4(1.0, 0.8, 0.0, 1.0);
uniform vec4 middle_color : hint_color = vec4(1.0, 0.56, 0.0, 1.0);
uniform vec4 darker_color : hint_color = vec4(0.64, 0.2, 0.05, 1.0);
uniform float spread : hint_range(0.0, 1.0) = 0.5;
void fragment()
{
float noise_value = texture(noise_tex, UV + vec2(0.0, TIME)).x;
// The .yx swizzle is when using the built in horizontal gradient texture. If you have a vertical gradient texture remove .yx
float gradient_value = texture(gradient_tex, UV.yx).x;
gradient_value -= smoothstep(spread, spread + 0.5, length(UV + vec2(-0.5, -0.5)) / spread);
float step1 = step(noise_value, gradient_value);
float step2 = step(noise_value, gradient_value - 0.2);
float step3 = step(noise_value, gradient_value - 0.4);
vec3 bd_color = mix(brighter_color.rgb, darker_color.rgb, step1 - step2);
vec4 color = vec4(bd_color, step1);
color.rgb = mix(color.rgb, middle_color.rgb, step2 - step3);
COLOR = color;
}
Great job, but i get a “line” in the middle of the animation, is there some setting i need to change to fix that?
https://ibb.co/ydTkLZ9
https://ibb.co/ssNRHPD
Edit: set Seamless to true on the noise texture
Yes, thank you! I’ll update the information to include seamless texture.
Looks pretty cool, man. Great style.