Fog of War
Hey Unreal Devs,
This week it gets cloudy. We will go into detail about one of the most important features of every real-time strategy game: the Fog of War. We’ll show you how our solution works and why it looks the way it does.
First of all, what is the Fog of War?
The Fog of War is referred to as the area that is covered by fog, which is all areas that the player has no vision over. The player has to explore the area to uncover it and find the enemy or points of interest like choke points.
There are three types of fog density in Smelogs Playground: No Fog, Explored (Semi Fog), and Fog.
This is how the Fog influences the visibility of units and buildings:
No Fog
All units and buildings are visible. This is the area your units and buildings have direct sight of.
Explored | Semi Fog
Enemy buildings and neutral objects are visible, but not units. This is the area you previously explored, but have no direct sight of.
Fog
In dense fog, enemy units, buildings, and neutral objects are not visible. This area is unexplored.
Special Exception
In Smelogs Playground, the Trap is a hidden building that is only visible when in the direct vision range of a Watchtower.
Visuals & Technical Details
Usually, Fog of War or vision areas are done with a post-process. This often results in a dark gray overlay. In Smelogs Playground, however, we wanted something more appealing that better represents Fog/Clouds. This is why our current solution works with a 3D mesh and a Fog of War density texture that is used for the opacity.
We use the RGB texture channels for the different fog layers:
Red 1.0 = No Fog | translucent (1.0)
Green 1.0 = Semi Fog | half translucent (0.5)
Blue 0.0 = Fog | no translucency (0.0)
We just update the Red and Green channels to display the different vision areas
Endnotes
We like the current visuals but since the very beginning, we dream of having a dynamic Fog of War that is driven by Unreal Engine’s Niagara system where clouds/fog move out the way. At some point, it would be great to upgrade it.