如何在 Phaser 3 中检测图形和 Sprite 之间的碰撞？答案

【问题标题】：How to detect collision between a graphic and a Sprite in phaser 3?如何在 Phaser 3 中检测图形和 Sprite 之间的碰撞？
【发布时间】：2019-05-14 04:09:39
【问题描述】：

在我的游戏中，我想实现一种限制玩家区域的范围类型的功能。我试图绘制一个图形圆圈并为其分配物理属性。然后我设置精灵和图形之间的碰撞检测。该代码未显示任何错误，但未检测到冲突。我按照以下教程进行操作。

Graphic and Sprite

【问题讨论】：

标签： javascript phaser-framework

【解决方案1】：

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    loader: {
      baseURL: 'https://cdn.jsdelivr.net/gh/samme/phaser-examples-assets@v2.0.0/assets/',
      crossOrigin: 'anonymous'
    },
    width: 800,
    height: 600,
    physics: {
      default: 'arcade'
  },
  scene: {
    preload: preload,
    create: create,
    update:update
  }
};

var game = new Phaser.Game(config);
var player;

function preload()
{
  this.load.image('dude', 'sprites/phaser-dude.png')
}

function create ()
{
  player = this.physics.add.sprite(100, 100, 'dude');
  player.setCollideWorldBounds(true);
  
  var graphics = this.add.graphics({ fillStyle: { color: 0xff0000 } });
  var circle = new Phaser.Geom.Circle(50, 50, 25);
  graphics.fillCircleShape(circle);
  this.physics.add.existing(graphics);
  
  cursors = this.input.keyboard.createCursorKeys();
  
  this.physics.add.collider(player, graphics);

}

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

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

【讨论】：