Tutorial: Fog Of War

First, you will need to create a FogOfWar object.

this.mFogOfWar = new FogOfWar();


Next, call the function setOverlay.

this.mFogOfWar.setOverlay(this.kImageBlack, worldWidth, WorldCenterX, WorldCenterY, fogVisability, unexploredVisability);


The first variable is the image you want to use for all areas that have yet to be explored.
Second is the width of the world in World Coordinates.
The third and fourth variables are the same center coordinates used for the camera.
Fifth is the transparency of the Fog overlay, a value between 0 and 255. A value of 125 is a good starting place.
The last variable is the transparency of the Unknown/Unexplored areas, a value between 0 and 255. Using a value of 255 will have the Unknown/Unexplored image be completely unviewable through the overlay.

To add a Field of View around an object, you need to call the addViewer function.

this.mFogOfWar.addViewer(this.mHero, radius);


Here, the first variable is the already created object that you wish to have a Field of View.
The second variable is the radius of their Field of View.

At the end of your update function, after all objects with a field of view have been updated, call the update function.

this.mFogOfWar.update();


To draw an object that is only visible in a Field of View, use the function drawObject.
Note that you do this instead of calling the objects draw function.

this.mFogOfWar.drawObject(this.mObject, This.mCamera);


The first variable is the object that is only visible within a Field of View.
The second variable is the camera in which it will be displayed.

Call the draw function at the end of all game objects, but before any HUD objects.

this.mFogOfWar.draw();


Changing the radius of the Field of View can be done using the function updateRadius.

this.mFogOfWar.updateRadius(this.mHero, newRadius);


Give the object with a Field of View as the first variable.
For the second, put the new radius in World Coordinates.

Call the setFogTranslusiveness function to change how transparent the Fog overlay is rendered.

this.mFogOfWar.setFogTranslusiveness(newTransparentness);


The variable represents a value between 0 and 255. The higher this value, the darker and less see through the Fog overlay will be.

For changing the visibility through the Unknown/Unexplored overlay can be done using the setUnexploresTranslusiveness function.

this.mFogOfWar.setUnexploresTranslusiveness(newTransparentness);


Here, the variable represents a value between 0 and 255. Using a value of 0 will make the overlay invisible while a value of 255 will completely block viewing of the map through the overlay.

To remove a Field of View from an object, use the removeViewer function.

this.mFogOfWar.removeViewer(this.mHero);


Here, the variable is the object that will lose the Field of View.
Note that this function does not delete the object, it just removes the Field of View in the Fog of War.