Posts RSS Comments RSS Digg Technorati Blinklist Furl reddit 89 Posts and Comments till now
This wordpress theme is downloaded from wordpress themes website.

Fog of War


In previous posts I’ve described my guiding design principle as “the nostalgia of authenticity”.  The physical board game does not visually represent fog of war, but I decided fog of war is a good idea (and also good experience to implement it).  Fog of war is inline with the general idea of making the game very similar to the physical board game, but it’s an enhancement that make sense for a video game version.  I think of it as part of the user interface – a way of communicating information about the game state to the player.

Unlike other games that have Fog of War (such as classic RTS Warcraft/StarCraft), HeroQuest fog of war only fogs out unvisited board squares on the actual board.  There’s no need to fog out miniatures (furniture, monsters/heroes), because when a square or miniature is revealed, it’s permanently revealed (until we get to the next quest).

Idea – Draw Batching

My first idea to try was to just use actor boxes like we do for highlighting movement and action squares.  Here’s a screen shot of my low effort gray-out-with-actors implementation.


Unfortunately it dropped the FPS to a crawl, which is kind of sad for drawing less than 26×19 simple one-color boxes.  I learned that apparently UE4 (as of 4.12) does not do automatic draw call batching – ie for each material, combine vertices from different actors into a single vertex buffer so that they can be drawn in a single draw call.  One issue with implementing automatic draw call batching is that when you aggregate vertex buffers, is that you have to consider culling because you may not want to just blindly put all vertices from the same material in the same vertex buffer – because the vertex locations for a particular material are not necessarily close to each other in world space.

UE4 has an instancing system, but apparently this doesn’t actually reduce draw calls – it just sorts the draw calls so that actors with the same material are drawn in order.  See ( ).

Unity can do draw call batching ( ) with some caveats.  In addition to culling, transparency must be considered.

It would be nice to have the option to give each actor a group label for automatic draw call batching – because for my particular use case, putting my fog of war actors into a single vertex buffer makes sense.  Culling is unnecessary for 26×19 simple box actors, and there’s no transparency.  So dynamically generating a fog of war vertex buffer in C++ code was an option.

Idea – Dynamic Texture

However, once I started thinking about optimization, I realized a dynamic texture is also a good option.  One idea was to just dynamically edit the 2048×2048 board texture.  However, this apparently does not work with mip maps as of UE4 version 4.12.  It’s possible that I’m doing it wrong, but when I tried editing a dynamic texture in C++ code, it crashed when the texture has mip maps, and I read comments (not official doc) saying it’s not supported.

So I decided to instead let the 2048×2048 texture use mip maps, and I’ll create a second texture that’s 32×32 without mip maps.  Each pixel in the 26×19 subset of the texture is either fogged out or not.  A simple material can blend the two textures.

I considered how to do this using math in the material shader to convert the board static mesh’s input UV coordinates to map from the 2048×2048 texture to the 32×32 texture.  However, I later decided to instead just have two sets of texture coordinates in my board mesh – one for the 2048×2048 texture, and one for the 32×32 texture.

Creating a second UV channel in Maya

I had created my board.obj file by hand editing the text file.  However, Wavefront OBJ does not appear to support two UV channels per vertex.  So I figured out how to add a second UV Channel in Maya.  To do it in Maya, I did the following.

Import my board.obj.  Open a second window with UV –> UV Editor.  Put my main editor window and UV Editor window side by side.

Set the main editor to let me select individual vertices with main editor toolbar -> Select By Component Type, Select parm points components.  In the UV Editor, I used the Tweak UI Tool.

I didn’t want to edit my existing UV set.  Rather I wanted to create a second one.  So I did UV Editor –> Polygons –> Copy UVs to UV Set –> Copy into New UV Set.  Then UV Set –> select my second UV set.

Next I used my side-by-side window setup to manually select vertices in the main editor window, and then enter values in the UV Editor window for those vertices.  In the following screenshot, I entered values for the selected vertices.


When I did File –> Save Scene As –> Maya ASCII, I was able to see the UV files in my text file.  I was also able to see the values in my FBX file when I exported FBX as a text file.  Both files were more complex than my OBJ text file.

In UE4, I had to do a bit of tweaking.  UE4 board mesh settings.  Import rotation 90, 180, 180.  Destination Lightmap Index = 2, Lightmap Coordinate Index = 2, this is important since my mesh has two UV channels (plus the lightmap generated by UE4).  After doing some math and then some testing to tweak the values, I came up with a UV range of (-0.009, 1.007) to (0.822, 0.342).

Creating a third UV channel in Maya for the lightmap

I ended up getting an error related to the autogenerated lightmaps (in 4.12) – “object has wrapping uvs”.  So I ended up making a third UV channel in Maya.  For this third UV Channel, I did Polygons > Unfold, Layout > Prescale to Object, Spacing Presets 2048.

Back in UE4, just doing material editor –> Asset –> Reimport, was not enough (even if I unchecked Generate Lightmap UVs).  So I had to re-import my FBX file from UE4 Content, and uncheck Generate Lightmap UVs.  After import, I set Lightmap Coordinate Index = 2.


Here’s the result using a test/debug 32×32 texture blended with the board:

image image image

Here’s fog of war with a subtle gray fog:

image image

Here’s fog of war with an extreme black fog with specular = 0:


Here’s full black fog with specular defaults to 0.5:


I’m leaning towards a more subtle gray fog as the default – I’m going for a good balance between making it look closer to the physical board game yet also effectively communicating the information (which rooms and corridor squares have been seen).

Another balance is between effectively communicating the information without making it visually loud in a way that strays (without good reason) from the goal of making it look-and-feel more like the physical board game.  Later I may add a non-default option for pitch black fog (and/or a sliding scale for varying degrees of fog of war darkness).

Here’s a video showing the effect:

Trackback this post | Feed on Comments to this post

Leave a Reply