Phaser 3 创建圆形区域

Question

有一类“怪物”。他有一个所谓的农业区。当玩家进入时激活。但问题是我做不到，我不知道如何让它圆。有这个领域的专家可以告诉你怎么做对吗？

TS 上的类代码：

import Creature from "./Creature";

export default class Monster extends Creature {
    private readonly speed: number;
    private agroZone!: Phaser.GameObjects.Zone;
    private target!: Phaser.Physics.Arcade.Sprite

    constructor(scene: Phaser.Scene, x: number, y: number, texture: string, 
frames?: string | number) {
        super(scene, x, y, texture, frames);

        this.hp.max = 10;
        this.hp.current = 10;
        this.hpBarConfig = {
            x: 250,
            y: 10,
            color: 0x15fa03,
            fixed:true
        };

        this.updateHpBar();

        this.speed = 50;

        this.scene.events.on('update', this.updateScene);
    }

    private updateScene = () => {
      this.checkAgroZone(this.target);
    };

    public initAgroZone = (target: Phaser.Physics.Arcade.Sprite) =>{
        this.target = target;
        this.agroZone = this.scene.add.zone(this.body.x, this.body.y, 200, 200);
        this.agroZone.setOrigin(0.5, 0.5);
        this.scene.physics.world.enable(this.agroZone, 0);
        this.agroZone.body.moves = false;
        this.scene.physics.add.overlap(target, this.agroZone);

        this.agroZone.on("enterzone", () => {console.log("!!!!!!!!!!!");});
    };

    private checkAgroZone = (target) => {
        if(target){
            const touching = this.agroZone.body.touching;
            const wasTouching = this.agroZone.body.wasTouching;

            if (touching.none && !wasTouching.none) {
                this.agroZone.emit('leavezone');
            }
            else if (!touching.none && wasTouching.none) {
                this.agroZone.emit('enterzone');
            }

            this.agroZone.body.debugBodyColor = 
this.agroZone.body.touching.none ? 0x00ffff : 0xffff00;
        }
    };

    chaseTarget(obj: Phaser.Physics.Arcade.Sprite){
        this.scene.physics.moveToObject(this, obj, this.speed);
    }
}

Answer 1

如果你想在这里画一个criicle是怎么做的

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

var game = new Phaser.Game(config);

var player;
var cursors;

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

function create ()
{

  var graphics = this.add.graphics({ fillStyle: { color: 0xff0000 } });
  var circle = new Phaser.Geom.Circle(50, 50, 50);
  graphics.fillCircleShape(circle);
  this.physics.add.existing(graphics);

  player = this.physics.add.sprite(300, 100, 'dude');
  player.setCollideWorldBounds(true);

  cursors = this.input.keyboard.createCursorKeys();
  
  this.physics.add.overlap(player, graphics, inZone);
}

function inZone (){
  console.log("Player in the circle")
}

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

<script src="//cdn.jsdelivr.net/npm/phaser@3.17.0/dist/phaser.min.js"></script>

Answer 2

在 Phaser 3 中，Zone 是rectangle by default，而不是圆圈，您可以尝试setCircleDropZone 方法。

public initAgroZone = (target: Phaser.Physics.Arcade.Sprite) =>{
        this.target = target;
        this.agroZone = this.scene.add.zone(this.body.x, this.body.y, 200, 200);
        this.agroZone.setOrigin(0.5, 0.5);
        // make it a circle
        this.agroZone.setCircleDropZone(100); // radius = 100
        //etc.

或者，我认为您可以使用circular body，然后处理重叠而不是碰撞。

mysprite = this.physics.add.image(400, 300, 'myimage')
        .setBounce(1, 1)
        .setCollideWorldBounds(true)
        .setCircle(46);

this.physics.add.overlap(mysprite, mygroup);