Fog of War - Best Implementation Method

[dev87]

Hi,

we´re building a 2.5d Realtime Multiplayer Browsergame. Currently we´re trying to implement fog of war, but there issues with it. It takes a lot of resources, especially blurring of edges. Also, it slows down performance in safari and on weak computers. We tried standard Phaser solutions, additional canvas, splitting fog into sections, svg graphics and for now using svg as as solution. But all these solutions have drawbacks.

We think the best way is to have a server-side solution, because client-side always means cheating is possible, right?

We would be very happy if you guys have any recommendations / tips for us.

Thanks in advance!

[mmcs]

Hi,

Blur is very expensive operation to use.

- As far as implementing the graphical part of the fog (client-side).

Here is a approach that works something like this: 

1 - create a layer for the fog of war.

2 - cache a version of the world map (or sections) image(s) with a black+alpha rectangle applyed to it, also you can apply a blur filter in this stage. (gray and blur the world map )

3 - create a mask for the cached world map or one for each section image(s).

4 - for each agent update position tick on the client:

4.1 - locate the section the agent it corresponds and get the mask.

4.2 - draw a filled circle (agent sight) to the mask centered by the agent position.

 

- Now to scale this to a multiplayer game you need to create a simplified fog of war in the server to avoid sending to the client agents that are not visible. (avoiding hacks)

1 - Create a image with a filled color (ex: black) in memory.

2 - for each agent update position in server:

2.1 - draw a circle filled with other color (ex: red) in that image.

3 - when creating the query of agents that exist for a particular player to send to the client-side test if the agents positions in that image have a red pixel

Hope I have helped somehow.

I have implemented a similar algorithm for a simple (single-player) flash game some years ago: http://www.indiesparkgames.com/iwar.html 

Regards

[dev87]

Hi,

thank you very much for your approach!!

[Fatalist]

Are you using blurFilter? That's gonna be expensive.

How does fog work in your game, is it tile-based?(like here: https://pixel-cave.com/) That is, every tile is either visible or not(with blurred edges), or is it polygonal, where only half of a tile can be in fog?

 

[dev87]

Hello Fatalist,

thanks for your message. The game is tile-based. It´s an isogenic game. Do you have recommendations for us?