title: Phaser scaling is changing my game bounds
body: <p>I'm building a platformer game in <a href="http://phaser.io/" rel="nofollow noreferrer">Phaser</a>. I have a player which can move left or right &amp; since the game bound is set it stops when hits the left &amp; right portion of the screen.</p>
  
  <p>Main game settings:</p>
  
  <pre><code>var game = new Phaser.Game(360, 592, Phaser.AUTO);
  this.game.world.setBounds(0, 0, 360, 700);
  </code></pre>
  
  <p>A camera is following the player:</p>
  
  <pre><code>this.camera.follow(this.player);
  </code></pre>
  
  <p>I have a spritesheet of the player that contains the animation of it moving but it has only left moving animations &amp; i'm using </p>
  
  <pre><code>this.player.scale.setTo(-1, 1);
  </code></pre>
  
  <p>to play the reverse animation in the right moving case which is working fine &amp; but due to which the right bound has been decreased somehow i.e the player is hitting everything 15px before the actualy position where it should stop. </p>
  
  <p>Here's the screenshots:
  <a href="https://i.stack.imgur.com/dd2bu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dd2bu.png" alt="When the right collision is perfect i.e before adding scale on right key animation"></a></p>
  
  <p><strong>^ When the right collision is perfect i.e before adding scale on right key animation</strong></p>
  
  <p><a href="https://i.stack.imgur.com/J2hl9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J2hl9.png" alt="When the scale is set to -1"></a></p>
  
  <p><strong>^ When the scale is set to -1</strong></p>
  
  <p>Note: 
  Event the collision with fire when moving right is before the same distance off as with the wall.</p>
  
  <p><strong>Update:</strong>
  Result after debugging the body of the player &amp; when moving right:
  <a href="https://i.stack.imgur.com/XNHwx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XNHwx.png" alt="Box is on the right of player"></a></p>
  
  <p>The green box (i.e body)is actually on the right of the player when moving right &amp; on moving left it's exactly on the player.(<code>game.debug.body(this.player);</code>)</p>
  
  <p>The pink border is of the sprite (<code>game.debug.spriteBounds(this.player, 'pink', false);</code>)</p>
  
  <p><strong>Observation:</strong>
  I think the sprite is flipping around it's center since the anchor of it is set to 0.5 but the debugger box is flipping around the right side of the sprite.. Weird </p>
  
  <p>Here is the <strong>complete code</strong> of the game: </p>
  
  <pre><code>  var GameState = {
    init: function() {
      this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
      this.scale.pageAlignHorizontally = true;
      this.scale.pageAlignVertically = true;
  
      this.game.physics.startSystem(Phaser.Physics.ARCADE);
      this.game.physics.arcade.gravity.y = 1500;
  
      this.cursors = this.game.input.keyboard.createCursorKeys();
      this.PLAYER_SPEED = 200;
      this.JUMP_SPEED = 670;
  
      this.game.world.setBounds(0, 0, 360, 700);
    },
    preload: function() {
      this.load.image('ground', 'assets/monster-kong/ground.png');
      this.load.image('actionButton', 'assets/monster-kong/actionButton.png');
      this.load.image('arrowButton', 'assets/monster-kong/arrowButton.png');
      this.load.image('barrel', 'assets/monster-kong/barrel.png');
      this.load.image('gorilla', 'assets/monster-kong/gorilla3.png');
      this.load.image('platform', 'assets/monster-kong/platform.png');
  
      this.load.spritesheet('player', 'assets/monster-kong/player_spritesheet.png', 28, 30, 5, 1, 1);
      this.load.spritesheet('fire', 'assets/monster-kong/fire_spritesheet.png', 20, 21, 2, 1, 1);
      this.load.text('level', 'assets/monster-kong/level.json');
    },
  
    create: function() {
      var levelData = JSON.parse(this.game.cache.getText('level'));
      this.ground = this.add.sprite(0, 638, 'ground');
      this.game.physics.arcade.enable(this.ground);
      this.ground.body.allowGravity = false;
      this.ground.body.immovable = true;
  
      console.log(levelData);
      this.platforms = this.add.group();
      this.platforms.enableBody = true;
      levelData.platformPositions.forEach(function(platform) {
        this.platforms.create(platform.x, platform.y, 'platform');
      }, this);
      this.platforms.setAll('body.immovable', true);
      this.platforms.setAll('body.allowGravity', false);
  
      //fire
      this.fires = this.add.group();
      this.fires.enableBody = true;
      this.fires.setAll('body.allowGravity', false);
      console.log(levelData.firePositions);
      levelData.firePositions.forEach(function(fire) {
        var currentFire = this.fires.create(fire.x, fire.y, 'fire');
        currentFire.animations.add('firedance', [0,1], 4, true);
        currentFire.play('firedance');
      }, this);
      this.fires.setAll('body.allowGravity', false);
  
      this.player = this.add.sprite(levelData.playerPosition.x, levelData.playerPosition.y, 'player', 3);
      this.player.anchor.setTo(0.5,0.5);
      this.player.animations.add('walking', [0, 1, 2, 1], 6, true);
      this.player.properties = {};
      this.game.physics.arcade.enable(this.player);
      this.player.body.collideWorldBounds = true;
      this.camera.follow(this.player);
  
      this.createOnScreenControls();
    },
  
    update: function() {
      this.game.physics.arcade.collide(this.player, this.ground);
      this.game.physics.arcade.collide(this.player, this.platforms);
  
      this.game.physics.arcade.overlap(this.player, this.fires, this.killPlayer);
  
      this.player.body.velocity.x = 0;
      if(this.cursors.left.isDown || this.player.properties.isMovingLeft) {
        this.player.body.velocity.x = -this.PLAYER_SPEED;
        this.player.scale.setTo(1,1);
        this.player.play('walking');
      }else if(this.cursors.right.isDown || this.player.properties.isMovingRight) {
        this.player.body.velocity.x = this.PLAYER_SPEED;
        this.player.scale.setTo(-1,1);
        this.player.play('walking');
      }else {
        this.player.animations.stop();
        this.player.frame = 4;
      }
      if((this.cursors.up.isDown || this.player.properties.isJumping )&amp;&amp; this.player.body.touching.down) {
        this.player.body.velocity.y = -this.JUMP_SPEED;
      }
    },
  
    createOnScreenControls: function() {
      this.leftArrow = this.add.button(20, 535, 'arrowButton');
      this.rightArrow = this.add.button(110, 535, 'arrowButton');
      this.actionButton = this.add.button(280, 535, 'actionButton');
  
      this.leftArrow.alpha = 0.5;
      this.rightArrow.alpha = 0.5;
      this.actionButton.alpha = 0.5;
  
      this.leftArrow.fixedToCamera = true;
      this.rightArrow.fixedToCamera = true;
      this.actionButton.fixedToCamera = true;
  
      this.leftArrow.events.onInputDown.add(function() {
        this.player.properties.isMovingLeft = true;
      }, this);
      this.leftArrow.events.onInputUp.add(function() {
        this.player.properties.isMovingLeft = false;
      }, this);
  
      this.rightArrow.events.onInputDown.add(function() {
        this.player.properties.isMovingRight = true;
      }, this);
      this.rightArrow.events.onInputUp.add(function() {
        this.player.properties.isMovingRight = false;
      }, this);
  
      this.actionButton.events.onInputDown.add(function() {
        this.player.properties.isJumping = true;
      }, this);
      this.actionButton.events.onInputUp.add(function() {
        this.player.properties.isJumping = false;
      }, this);
    },
  
    killPlayer: function(player, fire) {
      game.state.start('GameState');
    },
  
    render: function() {
      game.debug.spriteInfo(this.player, 32, 32);
      game.debug.body(this.player);
      game.debug.spriteBounds(this.player, 'pink', false);
    }
  
  };
  
  var game = new Phaser.Game(360, 592, Phaser.AUTO);
  game.state.add('GameState',GameState);
  game.state.start('GameState');
  </code></pre>
  
  <p><strong>Anyone can help me with this issue ?</strong> </p>