Sign up to be kept up-to-date with news and offers, 100% spam free!!

Fog of war

____________________
/English in grey/ 

/Français en italique bleu/
____________________ 

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.
Bonjour les Méchants !
Nous allons parler du fog of war (ou “brouillard de guerre”), un √©l√©ment de jeu¬†que l’on a rajout√© r√©cemment.

Le fog of war¬†est utilis√© principalement dans les jeux de strat√©gie. Il permet de repr√©senter¬†la zone visible par vos unit√©s. C’est un calque plus sombre qui masque le terrain et les unit√©s ennemies. Il dispara√ģt d√®s que votre unit√© approche de la zone de brouillard, en fonction de leur p√©rim√®tre de vision.

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!
Dans la plupart des jeux de strat√©gie, le fog of war ajoute un c√īt√© “poker” au jeu.
Chaque joueur ¬†ignore ce que l’autre fait car c’est cach√© par le fog of war, de la m√™me mani√®re qu’on ne voit pas les cartes de son adversaire au poker.
Il faut deviner ce qu’il fait √† partir des petits indices que vous pouvez r√©colter en envoyant vos √©claireurs comme on examine le visage de son adversaire au poker. Conna√ģtre le style de jeu de son adversaire est aussi une piste. Avec ces informations limit√©es, √† vous de deviner quelle attaque lancer.
Limiter les informations donn√©es au joueur avec le fog of war est en fait plus amusant, puisqu’il le force √† extrapoler √† partir d’indices comme un d√©tective !

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.
Mais comme MachiaVillain est un jeu solo, nous avons ajout√© un fog of war pour b√©n√©ficier d’autres avantages (pas toujours pr√©sents dans un jeu multijoueur):
– L’exploration. Comme dans un jeu d’aventure, le joueur ¬†devra explorer son environnement. Bien s√Ľr, cela deviendra partciuli√®rement int√©ressant quand on aura des monstres et autres surprises cach√©s dans le d√©cor.
– Les joueurs auront √† faire un choix int√©ressant entre construire/s’agrandir et explorer. Quand aurez-vous besoin d’explorer pour d√©couvrir de nouvelles ressources ?
– Le fog of war r√©duit la quantit√© d’information √† dig√©rer d’un coup au d√©but du jeu. Commencer avec une petite partie de la carte visible permet de se concentrer sur apprendre √† jouer sans √™tre distrait par l’environnement. Bien s√Ľr d√®s que vous commencerez √† ma√ģtriser le jeu, vous pourrez envoyer vos minions en exploration, au d√©part pour rechercher des ressources.
РCacher les minéraux présents dans la roche. Vous devrez trouver la meilleure stratégie pour creuser et découvrir les minerais précieux.

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).
Parlons des aspects techniques du fog of war dans MachiaVillain:
La vue du terrain est fragmentée en cellules disposées en grille. Nous devons savoir quelle cellule est visible par vos minions.
Une cellule a 3 états:
Рdans le noir complet (zone pas encore découverte)
– cach√© dans l’ombre (zone d√©j√† d√©couverte, mais pas actuellement visible)
– visible (dans le champ¬†de vision d’au moins un de vos 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.
Nous devons trouver quelle cellule est dans le champ de vision de votre monstre
On peut appliquer 2 règles importantes:
– Les monstres ne peuvent pas voir trop loin.
РLes monstres ne peuvent pas voir à travers un mur.

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.
Pour la première règle, on peut sélectionner toutes les cellules dans un certain périmètre autour du monstre. Cela nous donnera le champ de vision du monstre.

FogOfWarDisk

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).
La deuxi√®me r√®gle est plus complexe. Nous devons identifier ce qui bloque la vue du monstre. On lance une ligne √† partir du monstre, comme un rayon laser. Si le rayon rencontre un mur, il s’arr√™te. Chaque cellule travers√©e par un rayon non interrompu est une cellule visible. Ce rayon s’arr√™te √©videmment √† une certaine distance du monstre (p√©rim√®tre de visibilit√© du monstre).

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).
Pour cela, nous utilisons un algorithme de champ de vision pour les¬†environnements bas√©s sur des grilles 2D (pour les anglophones, vous pouvez voir une comparaison des diff√©rents algorithmes par ici:¬†Comparative study of field of view algorithms for 2D grid based worlds). Nous avons choisi une version modifi√©e de l’algorithme BASIC car nous avons une carte ext√©rieure (pas int√©rieure comme¬†un donjon).

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 use Andres’ 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.
Comment est-ce que cela marche ?
Nous devons envoyer des rayons tout autour du monstre (nous avons d√©cid√© que le monstre voit tout autour de lui). Pour envoyer un rayon, ¬†nous avons besoin de conna√ģtre sa position de d√©part (la t√™te du monstre) et son¬†extr√©mit√©. Tout autour = sur un cercle. Nous commen√ßons donc par tracer un cercle autour du monstre. Chaque cellule de ce cercle sera la cible d’un rayon. Pour dessiner ce cercle, nous utilisons un algorithme qui dessine tr√®s rapidement des cercles sur une grille 2D, l’algorithme de trac√© d’arc de cercle d’Andres.
(Nous avons commenc√© par utiliser l’algorithme de trac√© d’arc de cercle de Bresenham, mais ils laissait des “trous” dans notre grille de rayon, cf.¬†illustration)

FogOfWarCircle

And then we throw a ray from the monster, targeting each cell of the circle.
Et ensuite nous lançons un rayon partant du monstre vers chaque cellule du cercle.

FogOfWarRay

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:
Pour que cela marche, nous utilisons un autre algorithme, l’algorithme de trac√© de segment de Bresenham (promis, c’est le dernier !).
Vous vous rappelez peut √™tre que pour tracer¬†une droite d’apr√®s son √©quation (type y=ax+b), vous devez faire une multiplication ou une division. ¬†Avec l’algorithme de Bresenham, vous fa√ģtes seulement des additions et des soustractions ce qui est plus simple m√™me pour l’ordinateur. Et vous tracez la droite une cellule apr√®s l’autre, ce qui est tr√®s pratique puisque si une cellule sur la droite est un mur, on peut arr√™ter de dessiner la droite¬†ICON_Happy
Pour un rayon:

FogOfWarOneRay

Everything put together (throw ray on circles cell + stop the ray when it a wall)
Tout ensemble (rayon lancé, cellules du cercle, rayon interrompu par un mur)
FogOfWarRayXoll

And voilà:
Et voilà:

FogOfWarVisibility

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!
Ce qui est super¬†avec l’algorithme du fog of war, c’est qu’on peut aussi ¬†l’utiliser pour calculer si un ennemi est visible par un monstre ou pas. Donc nous pouvons r√©utiliser un calcul d√©j√† effectu√© pour un autre usage. Si un ennemi est situ√© sur une cellule visible, il est visible par le monstre.
L’ancien algorithme utilisait un rayon 3D, v√©rifiant des polygones, et √©tait du coup plus lourd. Maintenant nous avons une feature de plus pour un “co√Ľt de calcul” plus faible !

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.
On peut aller plus loin avec le fog of war (quelques idées):
– Ajouter plus de cr√©atures cach√©es dans la for√™t. L’exploration devra¬†√™tre faite par des monstres costauds… ou vous devrez apprendre √† fuir tr√®s vite¬†ICON_Happy
– Ajouter des voleurs.¬†Il vous faudra choisir strat√©giquement o√Ļ stocker vos richesses de mani√®re √† toujours avoir un monstre qui puisse rep√©rer un voleur et les prot√©ger.
РPatrouiller pour détecter les voleurs
– Un monstre avec une meilleure visibilit√©, qui sera adapt√© √† l’exploration et √† la patrouille.
РUn réseau de caméras permettant de surveiller les zones déjà visitées.
РPermettre au joueur de désactiver le fog of war.

I could go on and on about the fog of war, but that’s probably enough already ICON_Happy
Je pourrais continuer à parler du fog of war, mais ça fait déjà beaucoup ICON_Happy

PS: Pictures are drawn by hand to illustrate the explanation and are not 100% accurate with algorithm underneath.
PS: Les illustrations ont √©t√© faites √† la main pour illustrer les explications, et ne sont pas 100% raccord avec l’algorithme derri√®re.

2 Responses to Fog of war

  1. G√©nial! ūüėÄ Continuez comme √ßa, ce jeu va d√©j√† au del√† de mes attentes quand j’ai soutenu le projet sur Kickstarter

Leave a reply