Embedded Files
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.
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.
Main sprite. Added fog of war mask.
1. Added a mask image to my "terrain" sprite. It is 128x128 pixels, on the edges it has 2px pixels.
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.
4. If it helps I can also add a shadowBlur effect.
Or shadowBlur + mask rotated (with 45 degrees angles as well).
This is how it looks in-game.
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 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.
Page updated
Google Sites
Report abuse