Forums » Help » Black edges of map?

I was wondering what methods the developers here used to remove the black edges around a map when you have the camera following the player. (screen attached)

http://imgur.com/vjCYOGI

Also, how do i remove the occasional black line flicker between tiles?

I have the same issue with my game, but only with ejecta. The game looks great in my browser, but on the iPhone, I get some line flicker at times.

Would love to find away to fix this.

Once your camera dimensions hit the end of the map, freeze it (IE. Stop updating and have it remain still). The player will still be visible with the frozen camera, but no black fill outside of the level data will be shown. When the player moves towards the edge of the camera bounding box, and it is not the end of the map level, unfreeze the camera so it follows the player as normal

I can get it to kindof work, but its very staticky. Do you mind providing some code so I can see what you mean?

Btw, arent the map edges different for each map? wouldnt this work for one map and not another?

Set the camera to always follow the player:

this.screen.x = this.player.pos.x - ig.system.width / 2;
this.screen.y = this.player.pos.y - ig.system.height / 2;

Then do a check to make sure the screen rectangle does not go out of bounds of the game level, something like this:

// Lock the screen on X axis to game level dimensions
if (this.screen.x > ig.game.collisionMap.pxWidth) {
   this.screen.x = ig.game.collisionMap.pxWidth;
}
else if (this.screen.x < ig.game.collisionMap.pxWidth){
   this.screen.x = 0;
 }

// Do the same for the Y axis.

hmm .. this doesnt work.. ig.collisionMap.pxWidth is the width of the viewable area and no the entire map. My map is pretty big

(paguiar.com .. new domain)

Quote from Justos
hmm .. this doesnt work.. ig.collisionMap.pxWidth is the width of the viewable area and no the entire map. My map is pretty big

(paguiar.com .. new domain)

I think I'm misunderstanding you then?

Here are the values for pxWidth and pxHeight: (From map.js)

this.pxWidth = this.width * this.tilesize;
this.pxHeight = this.height * this.tilesize;

I'm using the collisionMap because it covers 100% of your map area. Your total area of your level is your level width * your tilesize / height * tile height, which covers the entire map. Not only the viewable area.

I finally got it! Thanks for the tips, but heres what i did. I think this is useful for pretty much any game if the camera follows the player.

if(this.screen.x <= 0){
		   this.screen.x = 0;
		 }
        else if(this.screen.x >= ig.game.collisionMap.pxWidth - $(window).width()){
            this.screen.x = ig.game.collisionMap.pxWidth - $(window).width();
        }

        if(this.screen.y <= 0){
            this.screen.y = 0;
        }
        else if(this.screen.y >= ig.game.collisionMap.pxHeight - $(window).height() ){
            this.screen.y = ig.game.collisionMap.pxHeight - $(window).height();
        }

I should also note that im using window.height and width because my game extends based on how big the browser is.