2
\$\begingroup\$

I'm working on my first Java Game and I have run into a little problem I'm hoping to get some help with. I'm using Slick2D displaying a tile based map, and I'd like to know how I can created a "blurred" fog of war.

Here you can see the fog of war covering most of the map, I am rendering the fog by filling a rectangle over each tile who has the property isFog = true.

When the climber goes to a tile isFog sets false, and the map is re-rendered. http://alpineindie.com/img/fog2.png

I'm looking for a way to create a smoother fog like in this poor paint.net image. enter image description here Please let me know what ideas you might have. Thanks!

Apparently I can not post images yet... I will update when I've earned enough reputation.

Improve this question
\$\endgroup\$
1
\$\begingroup\$

A couple of things you can do that come immediately to mind.

1 - Completely Tile Based

One of the layers of your map can be the "fog" layer, and have values that render images based on how close you have gotten to the tile(basically 64 different states, based on which directions the player has been adjacent to the tile). This will make your fog kind of blocky, but it might be okay for your needs, and it doesn't require all that much storage to update.... just another layer of tiles.

2 - Using Overlay Images

Ideally, you'd have a black images the size of the entire world, and update it as the player moves around by rendering the fog onto it wherever the player has gone.

In real life, you'd want to split it into screen-sized images so that at any give time, you never need to render more than a portion of four.

Of course, the downside of this is that you have to keep a bunch of screen-sized images somewhere, and that will get expensive if your world is big.

Improve this answer
\$\endgroup\$
3
  • \$\begingroup\$ Thanks for the reply, I like the idea of changing the way each tile fog renders based on the proximity of the player, but that still doesn't solve my issue of blocky-ness. Is there any good way of blurring the fog layer? \$\endgroup\$ – Reustonium Feb 20 '12 at 21:48
  • \$\begingroup\$ You need a set of tiles that transition from dark to light. Have you seen catacomb snatch, the charity game that mojang made last weekend? They have a fog of war system that works in exactly that way. Its open source, here a copy of the fog of war tiles someone is hosting on github. Im sure you can find the fog of war code there too. github.com/Maescool/Catacomb-Snatch/blob/master/res/dark.png \$\endgroup\$ – Cubed2D Feb 21 '12 at 8:56
  • \$\begingroup\$ awesome, I was following the progress on twitter, but I haven't checked out the game yet. Thanks for the help I'll check it out. \$\endgroup\$ – Reustonium Feb 21 '12 at 14:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.