Phaser 缩放正在改变我的游戏界限

Question

我正在Phaser 中构建平台游戏。我有一个可以向左或向右移动的玩家，并且由于设置了游戏绑定，因此在点击屏幕的左右部分时它会停止。

主要游戏设置：

var game = new Phaser.Game(360, 592, Phaser.AUTO);
this.game.world.setBounds(0, 0, 360, 700);

一个摄像头正在跟随玩家：

this.camera.follow(this.player);

我有一个播放器的精灵表，其中包含它移动的动画，但它只剩下移动动画并且我正在使用

this.player.scale.setTo(-1, 1);

在正确的移动情况下播放反向动画，这工作正常，但由于它的右边界已经以某种方式减少，即玩家在它应该停止的实际位置之前击中所有 15 像素。

以下是屏幕截图：

^当正确的碰撞是完美的，即在右键动画上添加比例之前

^当比例设置为-1时

注意： 向右移动时发生与火相撞的事件在与墙壁相同的距离之前。

更新： 调试播放器主体&右移时的结果：

向右移动时，绿色框（即身体）实际上在播放器的右侧，而向左移动时，它正好在播放器上。(game.debug.body(this.player);)

粉红色边框是精灵 (game.debug.spriteBounds(this.player, 'pink', false);)

观察： 我认为精灵正在围绕它的中心翻转，因为它的锚点设置为 0.5，但调试器框正在围绕精灵的右侧翻转.. 奇怪????

这是游戏的完整代码：

  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');

谁能帮我解决这个问题？

Answer 1

我了解您的问题，您的玩家物理体有些向右移动，而不是中心位置。如果不查看正确的代码，我无法为您提供解决方案。我假设有这样一行 body.setSize(width, height, offsetX, offsetY); 如果有然后注释掉该行并查看它是否解决了问题。另一个解决方案设置播放器的锚点 - this.player.scale.setTo(-0.5, 0.5); 如果可以解决您的问题。简而言之，你的玩家物理体移动到了玩家的右侧，因此出现了这个连线问题。

Answer 2

解决方案（有点）所以我继续编辑精灵并进行反射并将其附加在右侧..所以现在我有右侧的差异框架和左侧的差异但我仍然无法确定为什么那个 scale hack 不起作用的原因。

这是新的精灵：

感谢大家的帮助。