Community

To:
Subject:
Message:
or Cancel

A little help implementing fog of war

Jay
Sep 28, 2009 (4 years 201 days ago)

United States US

For a game I've been developing I've been trying to get a working version of fog of war. I've got a bunch of islands populating a map that look like this:

alt text

My fog layer is a sprite that lays on top of the map with about 70% alpha. When an island goes toward the player's faction I'd like to "punch out" the island shape plus a bit of the surrounding area around it out of the fog layer. I've experimented with blend modes and applying filters with only alphas but have yet to find something that works.

The islands are all BitmapData objects added to the stage and I'm doing this all in pure AS3.

  • Thankful People:

A little help implementing fog of war

wm
Sep 28, 2009 (4 years 201 days ago)

United States US

Jay, do you mean something that looks like this? (mouse over Africa)

http://wayne-marsh.com/stuff/fogofwar/

  • Thankful People:

A little help implementing fog of war

npgames
Sep 28, 2009 (4 years 201 days ago)

United States US

i think he wants something that covers more than africa (i could be wrong)

  • Thankful People:

A little help implementing fog of war

wm
Sep 28, 2009 (4 years 201 days ago)

United States US

Anyway, if so, here's how I did it:

TO PUNCH OUT PART OF THE 70% ALPHA LAYER:

Add the shape you want to punch out as a child of the alpha layer. Set the alpha layer's blendMode to BlendMode.LAYER, and the punchout shape's blendMode to BlendMode.ERASE. Job done!

TO MAKE THE BLURRY EDGES:

Set a BlurFilter on the shape. Because this causes some of the inside parts of the shape to blur as well, it's worth adding an unblurred copy of the shape to the alpha layer in same position (using BlendMode.ERASE again) to keep the central shape well-defined.

I'd probably actually do the blurs in Photoshop or something beforehand so you can get them to be of a nice quality and do any other little tweaks.

BlendMode.ERASE works by erasing parts of the layer below it depending on the alpha of the image. 100% alpha = 100% erase, 25% = 25% erase, etc.

A little help implementing fog of war

Jay
Sep 28, 2009 (4 years 201 days ago)

United States US

With some help from Ryan (our product manager) I got this result with a mask:

alt text

Code is pretty straight forward since I already have a mask layer for each island that I send to Pixel Bender. I check each island to see if it belongs to the player and if it does I draw the mask on the "mask layer" then that is applied to the map layer in total. I used a GlowFilter to do the blur on the edges.

  • Thankful People:

A little help implementing fog of war

wm
Sep 28, 2009 (4 years 201 days ago)

United States US

Super.

If you want to cut out the Pixel Bender stuff then the blendmode stuff above works nicely and would achieve the same effect.

The game looks really appealing, I love the ship icon.

  • Thankful People:

A little help implementing fog of war

nutter666
Sep 29, 2009 (4 years 201 days ago)

United Kingdom GB

Oh I hope this is gunna be a populous remake...

  • Thankful People:
Back To The Forums