Phaser 3 create circle zone

Question

There is a certain class "monster". He has a zone of so-called Agro. Which is activated when a player enters it. But the problem is that I can't, and I don't know how to make it round. There are experts in this field who can tell you how to do it right?

Class code on 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

In Phaser 3 a Zone is rectangle by default , not a circle, you could try the setCircleDropZone method.

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.

Alternatively I think you could use a circular body , and then handle the overlap instead of collide.

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

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

Answer 2

In case you want to draw a cricle here is how to do

 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>