Forums » Help » Question regarding .getTile(x, y) method as it applies to centering game window on player.

I have a question regarding the correct way to implement the .getTile(x, y) method as it applies to a block of code (posted below) that I use to adjust the screen position based on the player position. Basically, the screen is supposed to follow the player unless the boundary of the game window is outside of the game map. So far it only checks for the left and right hand map boundaries, but something is not quite working.

However, instead of following the player the x coordinate is always stuck such that the left boundary of the screen is flush against the map boundary on the left side. I think that the problem has to do with the call to map.getTile(screenXPos, player.pos.y) in the first conditional statement, which I assume uses the same coordinate system as the player.

Is this an incorrect assumption? If so, how do the tile coordinates relate to the player coordinates?

update: function() {

		// screen follows the player, unless player moves to boundary of map
		var player = this.getEntitiesByType( EntityPlayer )[0];
		//var map = this.getMapByName('collision' );

		var screenXPos = player.pos.x - ig.system.width/2;
		var screenYPos = player.pos.y - ig.system.height/2;

		//var isTileOnScreen = map.getTile(player.pos.x - ig.system.width/2, player.pos.y) && map.getTile(player.pos.x + ig.system.width/2, player.pos.y); 
		var isTileOnScreen = ig.CollisionMap.getTile(player.pos.x - ig.system.width/2, player.pos.y) && ig.CollisionMap.getTile(player.pos.x + ig.system.width/2, player.pos.y); 

		if( player && isTileOnScreen && ig.game.lives > 0 ) { 
			this.screen.x = screenXPos;
			this.screen.y = screenYPos;
		} else {
			this.screen.y = screenYPos;
			if( player.accel.x > 0 && this.instructText) {
				this.instructText = null;
			}
		}
		
	},

Edit: fixed a mistake in the code, hopefully now it is more clear as to what I am trying to do.

I believe map.getTile does expect pixel input, such as the player's pos.

Here's a simple way to accomplish what you're trying to do:

init: function() {
    ...
    // Store a pointer to player, because this call is expensive
    // and we don't want to call it more than we have to.
    this.player = this.getEntitiesByType(EntityPlayer)[0];
}
update: function () {
    ...
    // Center the screen over the player.
    this.screen.x = this.player.pos.x + this.player.size.x/2;
    this.screen.y = this.player.pos.y + this.player.size.y/2;
    // Make sure screen doesn't show past map edges.
    var tilesize = this.collisionMap.tilesize;
    var min_x = 0;
    var max_x = (this.collisionMap.width * tilesize) - ig.system.width;
    var min_y = 0;
    var max_y = (this.collisionMap.height * tilesize) - ig.system.height;
    if(this.screen.x < min_x) this.screen.x = min_x;
    else if(this.screen.x  > max_x) this.screen.x = max_x;
    else if(this.screen.y < min_y) this.screen.y = min_y;
    else if(this.screen.y > max_y) this.screen.y = max_y;
}

Thanks again for the help. The code you posted didn't work right away for my game, but it contained enough of the right ideas for me to get the same type of thing implemented. Here is what I did based on your post:

update: function() {
            ...
	    // Centers the screen over the player & makes sure screen doesn't show past map edges.
	    var tilesize = this.collisionMap.tilesize;
	    var min_x = 0 
	    var max_x = (this.collisionMap.width * tilesize);
	    var min_y = 0 
	    var max_y = (this.collisionMap.height * tilesize);

	    if(this.player.pos.x - ig.system.width/2 < min_x ){
	    	this.screen.x = min_x;
	    } else if (this.player.pos.x + ig.system.width/2 > max_x) {
	    	this.screen.x = max_x - ig.system.width;
	    } else {
	    	this.screen.x = this.player.pos.x - ig.system.width/2;
	    }

	    if(this.player.pos.y - ig.system.height/2 < min_y ){
	    	this.screen.y = min_y;
	    } else if (this.player.pos.y + ig.system.height/2 > max_x) {
	    	this.screen.y = max_y - ig.system.height;
	    } else {
	    	this.screen.y = this.player.pos.y - ig.system.height/2;
	    }
            ...
}

Edit: minor changes.