# Fog Of War - Is looping over every tile inefficient?

I'm trying to optimize my static FOW code for my 2D tile-based game and the bottleneck seems to be in the rendering of the fog (rather than the circle drawing algorithm or other aspect of the code).

It's a fairly simple implementation - there are two steps.

First, the game renders everything normally as if there is no fog. Then after the fact, the FOW code loops over every row and every column of tiles and if the tile is "hidden" behind fog, it draws black over the tile.

Everywhere on the web I see that this is the method most used - but to me it seems like it'd be much more efficient to set all of the tiles black, and only show through the tiles which are visible.

Although this sounds logical, in my case it turned out to be not very efficient either.

The Fog grid's tile size is different than the actual game's tile size, which provides some special challenges.

Are there any better methods for generating the Fog of War?

(The game's implementation is in Java, I can provide pseudocode if you'd like.)

Any help is appreciated.

EDIT: I've tried 2 circle-drawing algorithms, and there was little difference in performance (the original proved a little faster).

When I moved the fog code into the level drawing loop, I saw a notable performance increase, but it isn't a lasting solution because my fog grid size is larger than my map grid size.

EDIT 2: Here's the pseudocode - I don't feel comfortable posting the real code, as it isn't mine to post.

Level.render

for all x
for all y
if {x,y} is in view of camera
render tile

for all visible entities
if entity is in view of camera
render entity

call FOW.render()


FOW.render

for all x
for all y
if {x,y} is in view of camera
if tile is hidden by fog
render fog

• How much faster is your rendering if you do not render fog at all, i.e. everything is visible? How exactly are you doing the drawing: pixel shaders or...? Commented Feb 26, 2014 at 4:07
• Without rendering the fog, I'm getting about 75 fps. With fog, it drops to about 30 fps. I'm literally just drawing a black square over the section of the map: graphics.fillRect(x, y, width, height); No fancy shaders or anything. Commented Feb 26, 2014 at 4:15
• How are your game tiles being drawn? Is the fog being drawn in the same way? Can you post the relevant code? Commented Feb 26, 2014 at 4:28
• @EthanWorley I've added some pseudocode, the algorithm is fairly simple. Commented Feb 26, 2014 at 4:40
• Looking over your pseudocode, the most obvious optimization would be to perform the fog render inside the Level.render loop, however you mention that you've already tried this and dismissed it because your fog of war tiles are a different size to your world tiles. Is it possible to map the fog of war grid to, say, 4 world grid tiles? Are there differences in the way render tile and render fog operate? do they both use graphics.fillRect()? Commented Feb 26, 2014 at 5:52