Advertisement Jump to content
Sign in to follow this  
FantasyVII

smoth fog of war

This topic is 1752 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hello everyone,

 

so for the past few days i have been implementing fog of war mechanics to my game. and i made it work, which is nice. But i did not feel satisfied with the way it looked.

 

So here is my question. how can I have a smother fog of war that looks like this?

 

81b3509eb5db0dcc2875a43f5e9f3989.jpg

 

this is how i implemented. I made a 512x512 map with a 32x32 tile size. i filled the map with a black tile and i set all the cells in my map to unexplored. when a unit moves through the map, I set that cell to explored and I stop rendering the black tile in that particle cell of the map.

 

Edited by FantasyVII

Share this post


Link to post
Share on other sites
Advertisement

You need to linear interpolate from non-fogged to fogged. Either use some dynamic drawing or pre-defined tiles. If you use predefined tiles you will have the following setup:

701
6X2
543

The X is the currently drawn tile and 0..7 are the neighbor tiles. If X is fogged, the gradient is defined by the fog-state of the neighbor tiles. As you can see, you just need to check the tiles and combine them in a byte, something like this:

if(isFogged(x,y) {
  int fog_tile_overlay_index =
    isFogged(x,y+1) << 0 |
    isFogged(x+1,y+1) << 1 |
    isFogged(x+1,y+0) << 2 |
...
    isFogged(x-1,y+1) << 7 ;

  tile fog_tile = getTileByIndex(fog_tile_overlay_index);
}


Advanced:

To reduce the number of tiles, you can utilize symmetries by mirroring or rotating the tiles on the fly.

Share this post


Link to post
Share on other sites

an alternative is to render those black tiles into a white surface and put a gaussian blur on it, then multiply the full rendered tiled screen with the blurred surface. as a gimmick, instead of having just fully fogged or non-fogged tiles, you could actually use values inbetween, either by distance to that tile or time based once a tile is uncovered.

 

if you draw in software, that fog can be calculated in a one channel texture and gaussian blur is separable, with two passes it's fast enough for most cpus.

Share this post


Link to post
Share on other sites

You might also want to reconsider your fog as shadows, and implement a lighting system instead, since the example you provided uses the "fog of war" as sort of shadows.

Share this post


Link to post
Share on other sites

ok, thank you guys. that really helped.

 

I just have one more question. I want know how to implement the other type of fog of war. specifically this type:-

new_fog_of_war_thanks.jpg

 

oum9hk.jpg

 

 

How is this implemented? does it use some kind of pixel shader?

Edited by FantasyVII

Share this post


Link to post
Share on other sites

For a game that's mostly top-down, you could probably get away with an alpha blended texture on top of everything else that scrolls at a slightly different rate than the viewport.

Share this post


Link to post
Share on other sites

the first screenshot looks like simple range based lighting, the further it's away, the less bright it is. there are various ways to implement it, simplest is probably to just multiply some texture over the screen that has the circle with falloff.

 

2nd looks like 2d lighting with shadowmapping, applied on top of the 3d rendering to simulate the player's view. there is a neat article bout it here on gamedev:

http://archive.gamedev.net/archive/reference/programming/features/2dsoftshadow/page3.html

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!