2

I have a browser strategy game in development and will be implementing a fog of war, which will draw two layers of fog (revealed before, never revealed) over the game map. I have some doubts about performance if I render every fog square on the grid vs. punching a hole.

For punching a hole, I've seen the example in Konva Free Drawing example where I can erase wherever a player has been using the canvas context ...

context.globalCompositeOperation = 'destination-out';

But in the example that erases the whole canvas. I don't know if I can use this with layers. I don't want to erase the map layer, just erase part of the large fog texture I drew as a rect on a layer over the map.

Does anyone have any suggestions or have a working example that would solve this?

Timothy Ryan
  • 189
  • 7
  • Isn't it simpler to just draw "fog" on top of you map? – lavrton Mar 17 '17 at 01:20
  • I can of course. My concern is to get the shape right I would have too many draw calls to cover the entire map with pigeon-holed fog with tiles. I may explore using clipping, but I don't know which would cost more. – Timothy Ryan Mar 17 '17 at 12:01
  • You will never now until you try all variants, right? But I think they are almost equal. – lavrton Mar 17 '17 at 14:04
  • @TimothyRyan Hi! Im doing something like u did, its a RPG table. Did you found a way to do the Fog? – Rogerio Azevedo Aug 29 '20 at 01:09
  • @RogerioAzevedo I did it with layers. I drew a black fill in the fog layer then a destination-out to trim away at it using a gradient circle with alpha. – Timothy Ryan Dec 10 '20 at 22:54
  • Hey @TimothyRyan I did the same, but the performance is not so good using socket. Can you share that part of the code? – Rogerio Azevedo Dec 14 '20 at 12:54

0 Answers0