Phaser 3 Collider 裁剪答案

【问题标题】：Phaser 3 Collider clippingPhaser 3 Collider 裁剪
【发布时间】：2019-12-07 22:14:51
【问题描述】：

所以我对 Phaser 有点陌生，我发现很难找到关于这个主题的任何好的信息。我的问题是我可以将我的对撞机推向彼此（见 gif）。

所以现在我有一个系统，我可以在其中跟踪玩家的最后一个有效位置，如果它们发生碰撞，我会将它们设置回它。但我在想必须有更好的方法，所以这就是我来这里的原因。

let TopWall = this.add.tileSprite(400, 100, 1800, 100, 'wall');
this.physics.add.existing(TopWall);

this.walls = this.add.group();
this.walls.addMultiple([TopWall]);

this.walls.children.iterate(function(wall) {
            wall.body.immovable = true;
        })

this.player = this.physics.add.sprite(300, 300, 'idel', 0);

this.physics.add.collider(this.player, this.walls,(player, wall) =>  {
            // this.player.x = this.player.lastPos.x;
            // this.player.y = this.player.lastPos.y;
})

顺便说一句，我使用街机物理。

【问题讨论】：

欢迎有趣的 HTML5 #gamedev 社区 :D 所以你想让精灵与墙壁发生碰撞？或者您希望它在与墙壁碰撞时返回某个位置？我在 gif 中看到被推入墙壁的精灵可以穿过它们，但是当你移动精灵时它会与它们发生碰撞
@nazimboudeffa 感谢您的热情回答。我希望玩家与墙壁正常碰撞，所以我想阻止他们被推入墙内。他们不应该这样做。

标签： javascript phaser-framework clipping collider

【解决方案1】：

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,    loader: {
      baseURL: 'https://raw.githubusercontent.com/nazimboudeffa/assets/master/',
      crossOrigin: 'anonymous'
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    },
    physics: {
        default: 'arcade'
    }
};

var game = new Phaser.Game(config);

var topWall;
var player;
var alien1;

function preload ()
{
  this.load.image('dude', 'sprites/phaser-dude.png');
  this.load.image('alien1', 'sprites/phaser-alien.png');
  this.load.image('wall', 'sprites/block.png');
}

function create ()
{ 
  topWall = this.add.tileSprite(0, 0, 2000, 95, 'wall');
  this.physics.add.existing(topWall);
  topWall.body.immovable = true;
  
  player = this.physics.add.sprite(300, 100, 'dude');
  alien1 = this.physics.add.sprite(400, 100, 'alien1');
  
  cursors = this.input.keyboard.createCursorKeys();
 
  player.body.setCollideWorldBounds(true);
  this.physics.add.collider(player, topWall);
  this.physics.add.collider(player, alien1);
  
}

function update ()
{ 
  if (cursors.left.isDown)
  {
      player.setVelocityX(-160);
  }
  else if (cursors.right.isDown)
  {
      player.setVelocityX(160);
  }
  else if (cursors.down.isDown)
  {
      player.setVelocityY(160);

  } 
  else if (cursors.up.isDown)
  {
      player.setVelocityY(-160);
  }
}

function myCollisionHandler ()
{
 //console.log("collision") 
}

&lt;script src="//cdn.jsdelivr.net/npm/phaser@3.18.1/dist/phaser.min.js"&gt;&lt;/script&gt;

【讨论】：