Create Realtime Fog Cards in Unreal Engine 5

For the fog, we will need an animation but luckily, this is easy and free to find. The ones I used can be found here:https://www.premiumbeat.com/blog/free-4k-fog-overlays/

We also need to break the fog footage down into frames, which will be our fog cards. I usedClideo, but Premiere Pro could also be used.

For this tutorial, I’ll be using the tundra scene we made in the last tutorial, so you can either add this fog to your own scene, or use it for your tundra environment. Either way, the process is exactly the same!

Set Up

1. In the content browser, create a new folder - we’ll call it “Fog”. In here, right click, and go to Media, and select Img Media Source. This is where we’ll import our fog cards. Locate your fog frames, and select them to import them. Make sure you check “Fill Gaps in Sequence”, then press save.
2. Now, right click again, and go to Media, and select Media Player. Name this “Fog Media Player”. Open this, and you will see the option to select the Fog cards we imported in the previous step. Double click on this to play, and select “Loop”, as shown in the image below. Press Save.

3. Now, in the same Fog folder, right click, and create a new material. Name this “Fog_MasterMaterial”. The folder should now look like this:

Open the material, and drag and drop the Fog_MediaPlayerVideo into the graph. This is where we’ll set up the material for our animated fog cards.

a. First, click on the MasterMaterial node and go to Blending Options, and under details, go to Material, and then Blend Mode. Select blending mode as Translucent, and tick “Two Sided” to on.
b. Hold M and left click, and repeat this three times to create 3 Multiply nodes.
c. Hold 1 and left click, and create four nodes. Right click, and convert these to Parameters. Name each of them:
1. Intensity
2. Opacity
3. Depth
4. Fade
d. Set the value of each of these to 10. Then, plug them in so the graph looks like this:

Save and exit.

4. Now, right click on the Fog_MasterMaterial and create a Material Instance. This is a feature that allows you to make customisations of a “master” material - exactly like the one we just made! Open this up, and on the right you’ll see all the parameters we just made. Tick all of these to “on”, and hit save.

With that, our set up is complete!

Creating the fog

1. Back in the content browser, right click, and select Blueprint Class. Select Actor, and name the new Blueprint “BP_Fog”. This is where we’ll set everything up.

   A Blueprint is Unreal Engine’s node-based visual coding system. It can be used for programming, animation and level design, to name a few. In this case, we’re using it for technical art.

2. In the blueprint, open the event graph. Go to Components, and click “Add”, and select Plane. Then, under Variables, click the +. Name the new Variable “Media Player”, then select the drop down and navigate to Media Player, shown below:

3. Drag and drop this into the graph, and select “Get Media Player”. Then, drag off this, and on release, type “Open Source”. In the node that appears, click on the drop down under Media Source and select your Fog Source. Then, select the Media Player node and under Media Player, select the Fog Media Player.
4. Finally, connect the Event BeginPlay mode and plug it into the Open Source node. It should look like this:

Now, go to the viewport in the Blueprint Editor and select the Plane. Under Details, go to Materials and set the Material as the FogMasterMaterial Instance. Hit Compile and then Save.

5. Back in your level, hit play, then stop. This will activate the materials’ animation. Drag the Fog Blueprint into the editor, and voila! You have fog! The fog will begin moving on Play.