• Register
Post news RSS Fog of war explain (Gameplay and Algo)

We are going to talk to you about the fog of war which is a new feature we’ve just added. Fog of war is used mostly in strategy games. It mimics the visibility zone of your units. It’s a darker/fog layer that hides unit and terrain. It disappears as your units approach the fog zone, depending on their vision range.

Posted by on

(French version)

Hello Villains!
We are going to talk to you about the fog of war which is a new feature we’ve just added.
Fog of war is used mostly in strategy games. It mimics the visibility zone of your units. It’s a darker/fog layer that hides unit and terrain. It disappears as your units approach the fog zone, depending on their vision range.

In most strategy games, fog of war adds a “poker” feeling into the game.
Each player doesn’t know what the other player is doing because it’s hidden by the fog of war like you don’t see cards of your opponent in a poker table.
You have to guess what he is doing from the little clue you can get by sending scout units like you would do by looking at the face of your opponent in a poker game. Knowing the play style of your adversary is also a lead. Based on this reduced information, you need to guess what you should do to thwart your adversary.
Reducing the information given to the player with the fog of war is actually more fun, as he has to guess things only from clues like a detective!

But as MachiaVillain is a solo game, we added a fog of war in order to benefit from different advantages (not always present in multiplayer game):
– Exploring. Like in an adventure game, the player will have to explore his environment. Of course, this is going to be interesting once we will have monsters/stuff hide in the forest.
– Players will have to make the interesting choice between building/growing and exploring. When do you need to explore to discover new resource?
– It reduces the quantity of information you need to process at the same time at the beginning. You will start with a small portion of the map visible, so you can concentrate your attention learning how to play and not be distracted by the environment. Of course, when you will get better at playing, you will probably start sending your minion exploring your surroundings, at the first to seek resources.
– Hides the type of mineral in rocks. You need to find the best digging strategy to discover precious mineral deposits.

Let’s now talk about how we do it technically in MachiaVillain:
The terrain view is partitioned in grid cells. We need to know which grid cell is visible from your minion.
A cell will have 3 states:
– in total Dark (undiscovered)
– hidden in shadow (discovered but not visible)
– visible (seen by at least one of your minions).

We have to find out which square is visible by your monster.
We can apply two important rules:
– Monster can’t see too far.
– Monster can’t see through a wall.

For the first rule, we can select all grid cell around the monster from a distance.
This will give us a disk of visibility around the monster.


The second rule is more complex. We have to find out what is blocking the view of your monster. Like a real life light ray, we will send a ray from the eyes of the monster. If the ray hit a something like a wall, it will stop. Each grid cell the ray passed on without being stopped by a wall, is a visible cell. This ray will also stop when it’s too far from the monster (monster view range).

To do this we use a field of view algorithms for 2D grid based worlds. You can get a comparison of different algorithms here : Comparative study of field of view algorithms for 2D grid based worlds
We choose a modified version of the BASIC algorithm because we have an outdoor map (not inside a dungeon).

How is it working?
We need to send rays all around the monster (we decide that the monster sees all around him for the Gameplay we want).
To throw a ray we have to know the starting position and the ending position. The starting position is the eyes of the monster.
All around = on a circle. So we are first drawing a circle around our monster. Each cell of this circle will be the target of a ray.
To draw this circle we use an algorithm that draws circles on a 2D grid very fast. We useAndres’ circle algorithm (“Discrete circles, rings and spheres”).
(we used the Bresenham’s circle algorithm at first, but it gave us “hole” in our ray grid, see this illustration )
Of course, the radius of this circle will be equal to the visibility range of your monster.


And then we throw a ray from the monster, targeting each cell of the circle.


For this work we use another 2D algorithm which is “Bresenham’s line algorithm” (I promise, the last one!)
In school you may remember that to get a line equation (y=ax+b), and draw it on paper, you need to do some kind of division or multiplication.
With the Bresenham algorithm you only do subtraction and addition, which is more simple even for a computer. And you draw the line one cell at a time, which is great, because if one of the cells of the line is a wall, we just stop drawing the line ICON_Happy

For one ray:


Everything put together (throw ray on circles cell + stop the ray when it a wall)


And voilà:


What is great with the fog of war algorithm, is that we can use it to also get when enemies are visible or not by your monster.
So we reuse the calculation already done for another purpose. If an enemy is sitting in a visible cell, it’s visible by the monster.
The old algorithm was sending 3D ray, checking polygon and was heavy. Now we have more feature for a lower computation cost!

We can go further with the fog of war (just ideas):
– Add more hidden creatures in the forest. So the exploration must be done by strong monsters. Or you will learn to run away ICON_Happy
– Add thieves. So you will have to think strategically where to store your goods, so you always have a monster near to see him coming, and to protect it.
– Patrol against thieves. You can get some of you monster patrolling to detect thieves.
– A monster with a better visibility (“eyes” monster). You can hire a monster with a better view range. So he will be better at exploring and patrolling.
– Let the player deactivate it.

I could go on and on about the fog of war, but that’s probably enough already ICON_Happy

PS: Pictures are drawn by hand to illustrate the explanation and are not 100% accurate with algorithm underneath.


Just saw the game and it looks interesting! The explanation of how the visibility works is also quite nice! Just a question, is the visibility function performance heavy? I don't mean for 1 monster, but for multiple.

Reply Good karma Bad karma+2 votes
WildFactor Author

Hello pkyrkos,
with the old system, which consists of sending a ray to all near monsters, it was very heavy with a big group of monster. And of course the computation grew exponentially.
With this new method, it grows linearly with the number of monsters.
And I do another optimisation, not explained here for simplicity reason, which consists of recalculating visibility only when a character move from one cell to another different one. (and when something changes in the current visibility, like a door closing/opening). So 1 or 2 calculation of the visibility for each monster every second. If you have 60 monsters at 60 FPS, it should be something like two visibility calculations per frame.
I didn't make a bench, but this algo looks like to be super light. (I had an increase in FPS). It's an old school 2D grid algo after all :)

Reply Good karma+2 votes

Hm, thanks for your answer! :D

Reply Good karma Bad karma+2 votes
Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.