How to make a Fog of War on TILE-based map?

Questions & Answers
1

I’ve seen several videos that explained how to make a plane on top of a normal 3d world, apply a shader, and reveal around one central character, however my game is a turn-based strategy on a hexagon grid, so 1) there is no central character, and 2) a simple revealing circle is not what I need. I need to reveal individual tiles

Can anyone explain (or happen to know a good tutorial about) how to implement individual fogs of war for each tile in a hexagon shape and a simple on/off switch, with that nice blending effect to other hexes? I am perfectly comfortable with c# coding and scripts, but know virtually nothing about writing/reading custom shaders

For reference, here’s a screenshot of my game

2

How I would go about doing this is:

Put all “visible tiles” on their own layer, then make a separate camera with a black background and render that layer so the visible tiles are full white (so those tiles appear white). Then apply a blur shader. This will create that nice blending effect you’re looking for. Then, render that on top of the original camera with a “multiply” shader. This will make it so the white part is made see-through and the black will hide the not-yet-visible tiles.

You could simulate this in photoshop with your screenshot to see how you like the effect before you implement the shaders.

Edit - I tried something like this in photoshop just now and it came out nice. Use the “quick selection tool” and drag it across a couple tiles in the middle. Ctrl+Shift+I to invert selection, then fill black on a new layer. Apply a gaussian blur filter with setting of about 6. Optionally adjust opacity of layer down to 75%.

Edit 2 - moved comment to answer as suggested, thanks.

I’ve got a better solution for you. See attached image. Basically, make a quad with a texture of a blurred hexagon. Make sure you select “Transparency from Alpha” or “Grayscale” in the texture settings. Also, set the material shader to Transparent->VertexLit. Position the quad over the hex tile prefab, then make it a child of the prefab. Then, in code, you can set rendere.enabled = false to hide the quad and show the visible tile underneath if it’s supposed to be visible, otherwise leave renderer.enabled to true.

35109-hexblur.jpg
35109-hexblur.jpg877×512 46.5 KB

3

The basic principle:

  1. A black plane above the playing field. You would probably best create it by code so the vertices correspond to the underlying tiles.
  2. Each unit continually sends out one or more raycasts upwards (if more than one, make them spread out like a cone)
  3. Get the triangle each raycast hits and change the alpha color component of the three vertices to zero.