Jump to content

Fog of War - performance


Recommended Posts

Hello everyone! First time posting here.

Currently I am developing a thesis project to make a HTML RTS game, using Phaser.io framework and it must work on both personal computers and mobile devices. The Phaser version I am using is 2.9.2, in WEBGL mode.

One of the issues I have, is in the performance of my Fog of War implementation. The way I implemented was using 2 BitmapData objects that are covering the entire map. The game map is tile based, conceived by Tiled.

The first Bitmap is painted in black color with alpha at 1,  and is only updated when a unit moves to positions of the map that were never explored. This Bitmap covers what the player has yet to explore of the game map.

The second one is also painted in black color, but with alpha at 0.7, and is updated when a unit moves from a tile position to another, within a time interval of 100 ms. This Bitmap covers what the player had explored, but is not currently seeing.

For drawing the circles to see the units and structures that each player has, I implemented using the context operations "destination-out" and "source-over" in the following way:


updateFog: function(groupArray,bitmap,fillStyle,clearBool){

        //only clearing the second bitmap
        if(clearBool == true){

           bitmap.ctx.fillStyle = fillStyle;

           //current map size
           bitmap.ctx.rect(0, 0, 2150, 1160); 
        bitmap.ctx.globalCompositeOperation = 'destination-out';

        var searchingGroup;
        var gameObject;

        //groupArray is an array with two elements, unitGroup and structureGroup
        for(var i = 0; i < groupArray.length; i++){

           searchingGroup = groupArray[i];

           for(var j = 0; j < searchingGroup.length; j++){
              gameObject = searchingGroup.children[j];

              //drawing a graphic circle in a unit or structure position
              bitmap.draw(gameObject.fogCircle, gameObject.x, gameObject.y); 


        bitmap.ctx.globalCompositeOperation = 'source-over'; 



While this method work wonders in both devices, the performance takes quite the hit.  Personal computers go from 60 to 40-50 fps, while mobile devices goes from 55-60 to 15-20. Other methods I searched were by the use of masking (normal and inverted), but they had no avail in solving my problem.

So in the end I would ask for your assistance, on how to make a Fog of War method with better performance. Any help would be appreciated.

Best Regards

Link to comment
Share on other sites

  • 2 weeks later...

Thanks for the reply samme! I apologize for replying this late, but I ended being occupied at completing other tasks of my thesis.

As for your suggestions, reducing the size of the bitmap and scaling to the display object, helped a bit on the performance, however it was only by 2-3 fps on mobile phones, and less on personal computers. As for the render texture, just making one with the size of the game map, had a huge hit on the game performance, I might be doing something wrong though. Also I couldn't make an effect of drawing circles that would remove the fog, the way I used in the Bitmap approach.

And finally by using Chrome's profiler, I noticed that the bottleneck were the amount of display objects I was drawing in the Bitmap canvas. It seems that cleaning the canvas and redrawing the circles every frame is too much for the game to handle.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...