Top FIRE Shader Graphs for Unity - 2D Fire Shader Graphs

Three different ways to make fire shader graphs in Unity.

I wanted to make a fire shader graph video, and couldn't pick my favorite technique. So I went with my top three. That has made it a much longer video than normal, but it's still packed full of great info.

The three fire shaders I'll show are: sprite based, cartoony, and realistic.

As (almost) always, I have a written version of this tutorial on my site. This time the written version is mostly focused being a reference to the video, rather than being a stand alone tutorial. It has plenty of high res screenshots of the shader graphs so can look at detail.
https://gamedevbill.com/top-fire-shad...

Heat Haze shader explanation    • Heat Haze Shader Graph - How to creat...  

Assets used
- Low Poly Ultimate Pack - https://assetstore.unity.com/packages...
- Infinity PBR Dragon - https://assetstore.unity.com/packages...
- Gaia 2 - https://assetstore.unity.com/packages...

Github available here: https://github.com/gamedevbill/Tutori...

**** Update for Shader Graph 10.x
This video was made with Shader Graph 8.2
If you are using Shader Graph 10.x there are a couple key differences:

The create shader options have moved within a sub-menu called "Universal Render Pipeline, and some are renamed. So "Create--Shader--PBR graph" becomes "Create--Shader--Universal Render Pipeline--Lit Shader Graph"
The per-input settings that were in the blackboard are now in the "Graph Inspector" within the "Node Settings". You must have the input selected to see its settings in that window.
Some other settings that were on-node are now also in that Graph Inspector, though you can generally ignore these.
If you want to generate a code shader from the graph, you do so on the graph asset inspector (not on the master node as you did in 8.2). Now select the graph asset, and hit "View Generated Shader" button in its inspector.
****

0:00 Intro
2:09 Sprite Fire
5:20 S. Haze
8:07 S. Layering
12:27 S. Time
15:10 Cartoon Fire
18:20 C. Color
20:46 C. Shape
23:50 C. Sideways
28:05 Realistic Fire
31:13 R. Shape
35:44 Fire in 3D

In the sprite based technique, I've created a simple four frame sprite as the foundation. The frames are not an animation, but are instead a set of cells to overlay on top of each other. In the shader, I'll blend them over each other, and animate them independently. To animate them, I use the heat haze shader effect (   • Heat Haze Shader Graph - How to creat...  ).

In the cartoony technique, I use a sprite to help shape the animation, but generate the fire procedurally. There are two key details. First is using two smoothstep nodes to define an inner and outer color layer (which I set to yellow and orange respectively). The second is that I use two Voronoi noise nodes to define the shape. By combining two nodes, I avoid the tell-tale circles you often see when using Voronoi. In this section I also talk about the adjustments I needed to make in this shape to make it look more like the cuphead fire I showed in this time-lapse video:    • Cuphead Fire Shader Graph - speed sha...  

In the realistic technique, I start with the cartoon fire shader graph. Then I brighten the color by chaning it to HDR, and adjust the shape. Included in shape adjustment is changing one of the Voronoi nodes to be Gradient Noise, and also feeding time into the Voronoi Angle Offset. Both of which I could have done on the cartoon shader effect if that sort of shape was desired.

Lastly I show how to add 2D fire to a 3D scene in an elegant way.

I go over lots of different settings adjustments, but keep in mind that you'll need to adjust things once the fire is in your scene to get the look you are after. For example, if you want something more chill, or more intense. As stated in the video, I like my fire to be like camping... intense. (you too could be this punny: https://amzn.to/3pzhEvm)

And don't forget to subscribe!!!