Isometric smooth fog

Question

I'm working on a simple 2d game with direct3d 9. It's a isometric game with diamond tiles and a staggered map. This is what I have:

As you see I have some kind of fog which is acomplished by having a fog matrix which is true (clear terrain) or false (obscure terran). But the result is very chunky. The fog moves as the player moves by tiles but not by pixels. Basically I check for every tile if there is fog, if so I just change the color of that tile:

D3DCOLOR tile_color = 0xffffffff;
if(scene->fog[i+mapx][j+mapy] == FOG_NONE) { tile_color = 0x666666FF; }
g_pSprite->Draw(texTilesNew,&rect,NULL, &D3DXVECTOR3(pantx,panty,0.0f), tile_color);

Where parameter tile_color is:

A Color structure. The color and alpha channels are modulated by this value. The Transparent value maintains the original source color and alpha data.

I also would like the fog to be smoother, for that I followed this "tutorial" but I haven't managed to work it it out becuase I think the tutorial implements a diferent kind of fog than I am.

http://www.appsizematters.com/2010/07/how-to-implement-a-fog-of-war-part-2-smooth/

Answer 1

All right, the question has become much more sophisticated, so I'll upgrade my comment to an answer.

There are lots of ways to do what you want to do. The more precise you want your lighting calculations, the more complex the program will be, so I'd advice you focus on keeping it simple, and dedicate more of your time to making the game fun instead of getting stuck with technical details.

But anyways, here are some methods I can think of to accomplish what you want:

1. Do the lighting as a post processing effect! You won't believe how common these simple approaches are used in AAA games. Add a black sprite spanning the entire game area, with a transparent hole in the middle. PNG and DXT support 8-bit alphas, so you can make it as smooth as you want. The main disadvantage is that the shape of the shadow is mostly static. You can do some interesting tricks by messing with the perspective matrix, but is hardly optimal.

2. If you can calculate the lighting separately for each tile, multiply the sprite color by the level of shadow at each tile, or overlay a black tile with the alpha value set to the level of shadow for each tile. The main disadvantage is that if the tiles are too large, or if the shadow range is too small, you will easily notice the variation between tiles. This is by the way, what they did in many Ultima games.

3. Instead of calculating lighting for each tile, calculate it for the borders, and let the graphics engine interpolate the lighting across each tile. To do this, set the color for each vertex of your sprite mesh, and set SetRenderState(D3DRS_SHADEMODE, D3DSHADE_GOURAUD). The main problem with this solution arises with very bright lights with very short propagations. You may notice some artefacts near the center.

4. A much more complex solution would be to calculate lighting per pixel. To do this, you can set the position of your player as constants to your pixel shader, where you perform the lighting calculation. This will be precise to the pixel level, but requires you to change your graphics pipeline to the programmable one (in case you're using the fixed pipeline). This is relatively complex. The main problem with this solution (and all the other ones above) is that they don't concern sub-tile shadows. In which case...

5. You can also implement the lighting manually. This is really complex and not for the faint of heart, but also very fun. There are tons of approaches to do this, so you can start asking Prof. Google something along the lines of "2d dynamic lighting".

Good luck with your game.

Answer 2

Here is a simple proposal: you could try modulate the fog intensity for each cell. Here is an example of applying a simple convolution filter:

float fog = 0.0;
for (int dj = -3; dj <= 3; dj++)
for (int di = -3; di <= 3; di++)
    if (scene->fog[i+di+mapx][j+dj+mapy] == FOG_NONE)
        fog += 0.0903142 / (0.5 + di * di + dj * dj);
if (fog > 0.0)
    tile_color = (int)(0xff - 0x99 * fog) * 0x01010100 + 0x000000FF;

Answer 3

Instead of storing booleans in your fog matrix, you could store floating-point values. This would represent the amount of fog on each tile, between 0 and 1. Then simply blend your color depending on the tile's amount of fog:

float fog_amount = scene->fog[i+mapx][j+mapy];
tile_color = tile_color * (1.0f - fog_amount) + 0x666666FF * fog_amount;

There are probably several ways to generate this fog matrix, but one way I can think of is:

• Create your matrix as you do now (with true = no fog = 0.0, and false = full fog = 1.0),
• And apply a bit of gaussian blur on it.

EDIT

I'm not sure that will be necessary (this is simply an artistic choice) but if you want the fog amount to change directly with the player's moves, you'll have to generate this fog matrix using directly distances from the player. E.g. if you want a simple fog circle, that's what you could do for one tile at (i,j) in your fog matrix:

float distance_to_player = distance(tile_pos[i][j], player_pos);
fog[i][j] = (distance_to_player - FOG_START) / (FOG_END - FOG_START);

EDIT 2

That's if you want to keep a "tiled" fog. Overlaying a translucent image as suggested by Panda Pajama in his comments might be a much simpler solution, but it will give you a different result. Once again, this is an artistic choice you have to make.