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.
Any way to allow for alpha channels in any of the colors?
Very good shader, thank you for sharing!!
Can I use this in Godot 4?
Its not working in Godot 4 version π
Replace
with
in Godot 4. You still need to set the textures in the Editor.
Thanks zuwiwano, now it’s working!
/* 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/ Convert to Godot 4 */ shader_type canvas_item; uniform sampler2D noise_tex:repeat_enable; uniform sampler2D gradient_tex; uniform vec4 brighter_color : source_color = vec4(1.0, 0.8, 0.0, 1.0); uniform vec4 middle_color : source_color = vec4(1.0, 0.56, 0.0, 1.0); uniform vec4 darker_color : source_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; }