Forums » Help » help: center camera on player zelda style

found this excellent code as a starting point:

scrollScreen: function() {
      if(this.player.pos.x > (ig.game.collisionMap.width*ig.game.collisionMap.tilesize-ig.system.width/2))
      {
        this.screen.x = ig.game.collisionMap.width*ig.game.collisionMap.tilesize-ig.system.width;
      }
      else if (this.player.pos.x < ig.system.width/2) 
      {
        this.screen.x = 0;
      }
      else 
      {
        this.screen.x = (this.player.pos.x - ig.system.width/2);
      }
    
      if(this.player.pos.y > (ig.game.collisionMap.height*ig.game.collisionMap.tilesize-ig.system.height/2))
      {
        this.screen.y = ig.game.collisionMap.height*ig.game.collisionMap.tilesize-ig.system.height;
      }
      else if (this.player.pos.y < ig.system.height/2) 
      {
        this.screen.y = 0;
      }
      else 
      {
        this.screen.y = (this.player.pos.y - ig.system.height/2);
      }
    }

however, when I use it, the player is shifted to the right (as the code does not take into account the player's width/2), however -- when I make the if statements reflect this, I get black overscroll on the right and bottom. I don't know how to stop that.

This plugin works awesome:
https://github.com/netmute/impact-scrollscreen

It keeps you centered, but allows the player to move around the screen if you are at edges, the same way zelda works. I happen to use it on a platformed side scrolling game as well.

that's exactly what I have posted above in plugin format. That's helpful. However the character is still shifted over.

// Center screen over player.
ig.game.screen.x = player.pos.x + player.size.x/2 - ig.system.width/2;
ig.game.screen.y = player.pos.y + player.size.y/2 - ig.system.height/2;

// Define min and max values.
// Used to prevent screen from scrolling past map edges.
var minX = 0;
var maxX = ig.game.collisionMap.pxWidth - Math.floor(ig.system.width/2);
var minY = 0;
var maxY = ig.game.collisionMap.pxHeight - Math.floor(ig.system.height/2);

// Enforce min and max values.
if(ig.game.screen.x < minX) ig.game.screen.x = minX;
else if(ig.game.screen.x > maxX) ig.game.screen.x = maxX;
if(ig.game.screen.y < minY) ig.game.screen.y = minY;
else if(ig.game.screen.y > maxY) ig.game.screen.y = maxY;

ooh, pretty code. Thank you so much.