Fog of war #66

Updated: Oct 9

Fog of war adds a sense of wonder and unknown to the gameplay. After visually studying some of the implementations from other games, I found a really easy way of implementing it.

Main sprite. Added fog of war mask.

My goal was to find a really dumb and simple implementation so I don't dwell into technicalities to much. There are two aspects to be taken into account: rendering and logic.


1. Added a mask image to my "terrain" sprite. It is 128x128 pixels, on the edges it has 2px pixels.


Quick mockup done in Fireworks

2. Render it with "destination-out" on the "fog-of-war" layer.



"destination-out" on canvas reveals the background which is the "grass" terrain.

3. Applying random or sequential rotation (0, 90, 180, 270 degrees) to the mask helps shaping the fog of war.


Applying rotation to the mask

How it looks in-game

4. If it helps I can also add a shadowBlur effect.

Left only shadowBlur without mask. Right shadowBlur + mask rotated (with 45 degrees angles as well).


If you care about logic as well, in my situation I can choose a shape (circle, square, diamond) and compute that on a [0,1] matrix grid and know exactly what cells were uncovered. Once a cell that contains an Entity object is uncovered, you can include it into the rendering queue.



Example of a diamond shape applied to a flat [0,1] grid

Let me know in the comments of ways to render and update a fog of war. Clearly mine represents a particular case, but I'm interested in all kinds of implementations that are out there.

© 2017-2020 Gali Interactive

Terms and conditions | Privacy Policy | Code of Conduct | Contact