Forums » Help » Fog of War performance

Howdy impact ninjas,

I am trying to build my first game with impact, and decided to start it off by building a fog of war effect.

After browsing the forums i have found some people achieving such an effect using a simple grid of entity's and animating them according to the players distance.

Building upon those methods and extending them a little more i ended up with this effect http://www.mindsinfusion.com/gametest/ ( The trees are not being hidden by the fog, i'm yet to discover a way to do that using impact )

Anyways, i have a couple of concerns regarding the method i implemented.

I'm generating a lot of entities, the map is currently 128*128 with a tile size of 8, and i already need about 1025 entities to fill it.

Also, i was thinking of shrinking the fog tiles a bit to cut down on the blocky effect, but again, it would double my entity count. Should i be thinking about another approach to this effect ? or is there any way to optimize this?

I'm yet to run this on mobile, in my desktop i get 60 fps, unfortunately on a dual core laptop i'm already getting down to 30fps, so i guess on mobile this should be really slow.

I'd really appreciate your input in this, i'll drop my code below and hope any of you can help me gain some performance either by tweaking the code or giving me other ideias on how to approach this effect. Thanks in advance !

Code:

in my player entity init method i'm creating the grid to hold each fog block

               for( var i = 0; i < 32; i++ ){
                    for( var j = 0; j<32; j++ ){
	                var entity = ig.game.spawnEntity( EntityFog, 0 + i * 32, 0 + j * 32 );
	                this.fogMap.push( entity );
                     }
                }

then in the players update method

                 for( var n = 0; n < this.fogMap.length; n++ ) {

			    // when the tiles are in range 
			    if( this.distanceTo( this.fogMap[n] ) <= this.fogRange ){

			    	// if the tile has not been discovered yet, 
			        if( this.fogMap[n].currentAnim.alpha <= 1 && !this.fogMap[n].discovered) {

			        	// decrease alpha on tile until it hits .6
			         	if( this.fogMap[n].currentAnim.alpha >= .6 ) {
			         		this.fogMap[n].currentAnim.alpha -= .04;	
			         	} else {
			         		this.fogMap[n].discovered = true;
			         	}
					} else {
						// light the path around the player
						if( this.distanceTo( this.fogMap[n] ) <= this.fogRange/1.5 ){
							// fade in the already discovered path in front of the player
							if( this.fogMap[n].currentAnim.alpha > .1) {
								this.fogMap[n].currentAnim.alpha -= .04;	
							}
						} 
					}
				} else {
					if( this.fogMap[n].discovered ) {
						// fadeout the already discovered tiles behind the player
						if( this.fogMap[n].currentAnim.alpha <= .6) {
							this.fogMap[n].currentAnim.alpha += .01;	
						}
					}
					
				}
			}

The fog entity

 EntityFog = ig.Entity.extend({
       
        animSheet 	: new ig.AnimationSheet( 'media/fogTile.png', 32, 32 ),
        size		: {x: 32, y: 32},
        zIndex      : 1000,

        init: function( x, y, settings ) {
            this.parent( x, y, settings );
            this.addAnim( 'idle', 0.4, [0] );
            this.discovered = false;
        },
        update: function() {
	        this.parent();
        }

    });

I'd suggest maybe looking into Canvas 2d api draws instead of using entities. This would let you cut out a lot of extra stuff and get down to basics.

Although not fog of war I did attempt to do some lighting effects and ended up using canvas draws for the most efficient method. See here.

Graphikos: i guess i'll have to use the canvas 2d api then. Nice demo btw.

thanks for your input.

What you could try doing is to make a grid matrix from the loaded level and fill each value with a 0 or a 1. A 0 means that grid tile is not visible and a 1 means it is visible. Also keep track of where the collision tiles are, to prevent seeing through solid objects. Place a dark mask or a solid black overlay over your entire canvas element and then when you want to reveal a new part of the map, draw a circle starting from the initial grid tile and any tile within that circle is visible, so update your matrix and set the values to 1 for those tiles. Take the collision map into account as well, so if a tile is behind a collision tile or otherwise out of view, mark that tile as not visible. Then just update your dark mask using your matrix to figure out which tile is visible.

For optimization, only update the dark mask if there has been a visibility change, and do not calculate the entire mask if you have a large level that you have to scroll through. So say you have a 100 points in your matrix, but only 25 are visible at any one time, only cycle through the 25 values instead of the full 100.

Came off of the top of my head, but it should work and it should be fast (Much much faster than just spawning a bunch of entities everywhere anyway)

I was wondering if it's possible to use background maps to do this. If you could make a background map that didn't scroll at all, and was in the foreground, you could center it around the player and have its tiles set to various alpha values (0.0 in the center, increasing as you get further away) to give you the FoW effect as you moved around.

To get the 'no scrolling' working I tried setting a distance of 0 in Weltmeister but that didn't work ^^. I did manage it by setting distance to a really big number... but it was oddly offset, and obviously a really nasty hack. Maybe someone with more experience with background maps will have a better idea.

For a fog that once you see a tile you can always see it, I assume you could use a regular background map, set in the foreground, and set the tiles from opaque to transparent with setTile() from a range of alpha value tiles as the player exposes areas.