Efficient fog of war

[ooflorent]

Hi everyone.

 

I'm trying to add a fog of war to my game.

The problem is that I have no idea how to draw and render it without a huge performance impact.

 

Did someone ever try to do that?

How should I achieve it?

[xerver]

This is a great question, I was looking to do something like this as well. Doing it in pure canvas is actually not that hard, but I can't think of a good way to do it in Pixi. Hopefully Rich or Mat can be more helpful!

[ooflorent]

Basically this is what I do:

var viewport = new Rectangle(-camera.x, -camera.y, SCREEN_WIDTH, SCREEN_HEIGHT);var fogLayer = new PIXI.DisplayObjectContainer();var fog = [];function initializeFog() {  var fogSprite;  for (var y = WORLD_HEIGHT; y-- {    fog[y] = [];    for (var x = WORLD_WIDTH; x-- {      // `fogTexture` is a 16x16 RenderTexture      fogLayer.addChild(fogSprite = new PIXI.Sprite(fogTexture));      fog[y][x] = {        sprite: fogSprite,        bounds: new Rectangle(fogSprite.x = x * 16, fogSprite.y = y * 16, 16, 16)      };    }  }}// Called every framesfunction updateFog() {  // Culling  for (var y = WORLD_HEIGHT; y-- {    for (var x = WORLD_WIDTH; x-- {      var tile = this.f[y][x];      tile.sprite.visible = tile.bounds.overlaps(viewport);      // Update fog tile opacity      tile.sprite.alpha = Math.random(); // Dummy test    }  }}

Even without a large world, the above code has a big performance impact (FPS rate drops from 60 to 50, which is huge).

My game uses a CanvasRenderer. Not sure if I do it properly...

[Mat Groves]

Hello!

 

I possible way would be to use a pixi.renderTexture to draw you fog of war on that? then render it over your current content. That way you would only have to redraw parts of the fog of war that change (if any) Should be pretty fast I think! 

[xerver]

There are also more efficient ways to cull a tilemap than to check inclusion each frame, that is likely where you are getting most of your performance hit.