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

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

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

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

截图如下：

^ 当右侧碰撞完美时，即在右键动画上添加比例之前

^当比例设置为-1时

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

更新： 调试播放器的 body 和向右移动时的结果：

绿框（即 body）在向右移动时实际上位于玩家的右侧，向左移动时它正好在玩家身上。(game.debug.body(this.player);)

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

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

这是游戏的完整代码：

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

Answer 2

解决方案（有点）所以我继续编辑精灵并制作反射并将其附加在右侧..所以现在我有右侧的差异帧和左侧的差异帧但我仍然无法确定该比例黑客不起作用的原因。

这是新精灵：

谢谢大家的帮助。

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

Phaser scaling is changing my game bounds

phaser-framework