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;
}
Tags
2d, bonfire, candle, environment, flame
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from godotshaders

2D wind sway

Noise vertex displacement

Pixelate

Related shaders

Stylized fire (3D)

Fire effect

Fire Shader

guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
AnderssonPeter
AnderssonPeter
6 months ago

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

Last edited 6 months ago by AnderssonPeter