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

时间:2016-09-18 15:48:43

标签: phaser-framework

我正在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。

这是截图: When the right collision is perfect i.e before adding scale on right key animation

^当右碰撞完美时,即在右键动画上添加比例

When the scale is set to -1

^当比例设置为-1

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

更新 调试播放器主体后的结果&向右移动时: Box is on the right of player

当向右移动时,绿色框(即正文)实际上位于玩家的右侧。向左移动它完全在玩家身上。(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');

任何人都可以帮我解决这个问题吗?

2 个答案:

答案 0 :(得分:0)

我理解你的问题,你的球员物理身体有些如何向右移动它不是中心位置。没有查看正确的代码,我无法给你解决方案。我假设有一条像body.setSize(width, height, offsetX, offsetY);这样的行,如果然后注释掉该行并查看它是否解决了问题。另一个解决方案设置播放器的锚点 - this.player.scale.setTo(-0.5, 0.5);如果解决了你的问题。简而言之,你的玩家物理身体移动到玩家的右侧,以便它发生这个有线问题。

答案 1 :(得分:0)

解决方案(种类)所以我继续编辑sprite&做了一个反思&将它附加在右边..所以现在我有右边和右边的差异帧左边的差异,但我仍然无法确定为什么规模黑客没有工作的原因。

这是新的精灵:

Made new sprite

谢谢大家的帮助。