Implementing a Fog of War in WADE


I'd like to implement a Fog of War within my isometric game (it's an RTS). It should allow buildings, terrain, etc. to be visible through it, but units that are within the Fog should not be visible at all.

On a Unity forum thread, the suggested implementation was to put a 'fog layer' above all the isometric objects and change the opacity value for circular areas where the Fog of War should not be drawn (where the Player's units are).

Would this be possible to do in Wade? I could control whether units are shown within the Fog by setting their SceneObject visibility to false when they are outside the visible zones.

However, I don't have experience working with shaders. I've looked at the shader video tutorial, but I'm still not sure whether I can make a custom shader that A) only attempts to draw the fog that is visible, and B) allows me to change the opacity in circular/elliptical regions where I want to remove the Fog.

What could I do to implement something like this?


All 2 Comments

There are several ways of doing this, and most likely using a full-screen shader (maybe as a post process effect on the terrain layer) will give you the best looking effect. However that will take a lot of time to get right. Firstly you'll have to figure out which areas, in screen space, are supposed to have fog. Then you must pass this information to your shader via shader uniforms. And finally you need a shader that uses this information as a mask. It's doable, but not very easy.

In our game Zirma, back in the day (it was 5 years ago I believe and mobile performance was much more of an issue than it is today, so we needed something really fast), we used a much simpler approach: we had a special type of terrain tile, this one:

As you can see, it's got a slight blur around the edges (you can't see it here but it's semi-transparent), so it extends a bit past the normal tile boundaries. This allowed us to achieve a "foggy" effect on some tiles. We simply used wade.iso.setTile(...) to set this tile on all the areas of the terrain that we wanted to mask.

In our case, we wanted to hide the terrain completely. But you could do this using wade.iso.setTransition(...) instead, to overlay this special tile on top of normal terrain tiles (use a more transparent image in that case).

Also now we have WebGL and shaders (which we didn't have when we made Zirma), you could apply a custom shader to these sprites, to give them a dynamic, animated look rather than being just static. This is much simpler (albeit a bit less efficient) compared to the full-screen post-process shader approach.


I got a chance to try this out today, and your advice about using the tile transitions and a more-transparent tile image got me off to a good start on the fog.

After setting each tile to have a transition sprite, I set each transition sprite to a higher layer so it would cover the isometric objects as well. Since I can toggle sprite visibility, I can easily clear the fog whenever my isometric character moves through it.

Thank you for the help!

Post a reply
Add Attachment
Submit Reply
Login to Reply