Phaser scaling is changing my game bounds - phaser-framework

Question

I'm building a platformer game in Phaser. I have a player which can move left or right & since the game bound is set it stops when hits the left & right portion of the screen.
Main game settings:
var game = new Phaser.Game(360, 592, Phaser.AUTO);
this.game.world.setBounds(0, 0, 360, 700);
A camera is following the player:
this.camera.follow(this.player);
I have a spritesheet of the player that contains the animation of it moving but it has only left moving animations & i'm using
this.player.scale.setTo(-1, 1);
to play the reverse animation in the right moving case which is working fine & 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.
Here's the screenshots:
^ When the right collision is perfect i.e before adding scale on right key animation
^ When the scale is set to -1
Note:
Event the collision with fire when moving right is before the same distance off as with the wall.
Update:
Result after debugging the body of the player & when moving right:
The green box (i.e body)is actually on the right of the player when moving right & on moving left it's exactly on the player.(game.debug.body(this.player);)
The pink border is of the sprite (game.debug.spriteBounds(this.player, 'pink', false);)
Observation:
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 😕
Here is the complete code of the game:
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 )&& 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');
Anyone can help me with this issue ?

Answer 1

I understand your problem, your player physics body some how moved to right its not is center position. I can't give you solution without viewing proper code. I assumed that there is a line like this body.setSize(width, height, offsetX, offsetY); if there then comment out the line and see if its fix the issue. another solution set the anchor of the player - this.player.scale.setTo(-0.5, 0.5); if that solve your problem. In nutshell your player physics body moved to right of the player so that its occurring this wired problem.

Answer 2

SOLUTION (kind of) So I went ahead with editing the sprite & made a reflection & appended it on the right.. so now I have diff frames for right & diff for left but I still wasn't able to determine the reason of why that scale hack wasn't working.
Here's the new sprite:
Thank you everyone for your help.