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.


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()


for all x
    for all y
        if {x,y} is in view of camera
            if tile is hidden by fog
                 render fog
  • 1
    \$\begingroup\$ 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...? \$\endgroup\$ Feb 26, 2014 at 4:07
  • \$\begingroup\$ 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. \$\endgroup\$ Feb 26, 2014 at 4:15
  • \$\begingroup\$ How are your game tiles being drawn? Is the fog being drawn in the same way? Can you post the relevant code? \$\endgroup\$ Feb 26, 2014 at 4:28
  • \$\begingroup\$ @EthanWorley I've added some pseudocode, the algorithm is fairly simple. \$\endgroup\$ Feb 26, 2014 at 4:40
  • 1
    \$\begingroup\$ 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()? \$\endgroup\$ Feb 26, 2014 at 5:52

1 Answer 1


Depending on how your fog of war works, either permanent or dynamic, you could:

Dynamic: Define the distance from your entity for fog to start being generated. Determine whether a tile has fog or not on the first render loop, effectively eliminating the second.


Permanent: Store whether a tile has fog or not on the actual tile itself and check to see if the fog has been lifted during an update loop.

  • \$\begingroup\$ Thanks for the help, the FOW is static. I've left an important detail out of the question however. The Fog grid's tile size is different than the actual game's tile size. This provides some complications in the solution you've provided. \$\endgroup\$ Feb 26, 2014 at 3:28
  • \$\begingroup\$ @NicholasPickering if each game grid can exactly fit a set of fog tiles then you just loop over the fog tiles in the current game grid tiles \$\endgroup\$ Feb 26, 2014 at 9:37

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .