next »

[sevn]

In a technical sense, what methods are used when developing fog of war effects into a game? I'm looking to research about all the different types of methods game developers over the years have used. Keywords, links, general direction would be amazingly helpful since I cant seem to find the right words to search in google.

[Jason Bakker]

Hey sevn! I detailed roughly how I got a fog of war effect working in my devlog recently:

Okay, basically the idea behind the fog at the moment is that each "square" of collision has a light value associated to it. So, off the bat, the collision grid around the base's light values look roughly like:

Code:

0 0 0 0 0 0 0 0 0
0 0 0 1 1 1 0 0 0
0 0 1 1 1 1 1 0 0 
0 1 1 1 1 1 1 1 0 
0 1 1 1 1 1 1 1 0 
0 1 1 1 1 1 1 1 0
0 0 1 1 1 1 1 0 0 
0 0 0 1 1 1 0 0 0
0 0 0 0 0 0 0 0 0

What I have for each collision square visually is a square made up of four inward facing triangles, shaped like so:

Code:

1______2
 |\  /|
 | \/ | 
 | /\ |
 |/__\|
4      3

(but of course, all the same shape/scale)

And then, each corner of the square (annotated above) gets its "vertex alpha" (its opacity value) to be the average of the four squares that it's touching.

Code:

   0      0
 | /\ | | /\ |
 |/__\| |/__\|
 _____=.5_____
 |\  /| |\  /|
   1      1

So in the case above, the corner of each of the four squares that is touching the center all get their opacity set to .5.

The last thing you need to do to get it looking nice is to average the corner values into the center vertex.

Code:

.5______.25
  |\  /|
  | \/ | 
  | /\ |
  |/__\|
 1      0

center == (.5 + .25 + 1 + 0) / 4 == 0.4375

And tada! All nishe

On the technical side, on the iPhone I needed to do some OpenGL calls to draw the tris.

Code:

	glEnableClientState(GL_VERTEX_ARRAY);
	glEnableClientState(GL_COLOR_ARRAY);
	
	glBlendFunc(CC_BLEND_SRC, CC_BLEND_DST);
	
	glVertexPointer(3, GL_FLOAT, 0, s_fogSquareVerts);
	
	zeFogSquare* pCurrFogSquare = NULL;
	
	for(NSInteger y = 0; y < m_numDown; y++)
	{
		for(NSInteger x = 0; x < m_numAccross; x++)
		{
			pCurrFogSquare = &m_pFogSquares[(y * m_numAccross) + x];
			
			glPushMatrix();
			glTranslatef(pCurrFogSquare->m_position[0], pCurrFogSquare->m_position[1], pCurrFogSquare->m_position[2]);
			glColorPointer(4, GL_UNSIGNED_BYTE, 0, pCurrFogSquare->m_color);
			
			glDrawArrays(GL_TRIANGLE_FAN, 0, 6);
			glPopMatrix();
		}
	}
	
	glDisableClientState(GL_VERTEX_ARRAY);
	glDisableClientState(GL_COLOR_ARRAY);

You can see the result of it in our youtube video:

.

There's a few other methods of implementing fog of war, such as using "edge" images for a more tailored look, but in action this one seems to be having the best results thus far

[BorisTheBrave]

Marching squares + a couple of premade tiles seems the most common way, thinking back on games I've seen.

Jason Bakker's way works too. You can use a texture map rather than an alpha gradient for finer control on how the fog fades.