javascript - 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

你需要三件事:

1. Sprite 。
2. 区域。
3. 当 Sprite 位于该区域上方时触发的函数。

// In the create() function.

// 1. THE SPRITE
let mySprite = this.physics.add.sprite(200, 200, 'myImage')

// 2. THE ZONE WITH A CIRCLE SHAPE
let zone = this.add.zone(100, 100, 100, 100)//.setOrigin(0).setName('Zone')
this.physics.world.enable(zone);
zone.body.setCircle(100);

// 3. THE FUNCTION
const onOverlap = (sprite, zone) => {
    console.log('THE SPRITE IS OVER THE ZONE')
}

// 4. WHERE EVERYTHING COMES TO LIVE.
this.physics.add.overlap(sprite, zone, onOverlap)

顺便说一句，你的游戏必须启用物理配置:v

let game = new Phaser.Game({
  ...
  ...the rest of the things that goes on the config file...
  ...
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 0 }, // No gravity here :v so change it.
      // TO YOU TO ACTUALLY SEE THE ZONE, UNCOMMENT THIS.
      /*debug: true,
      debugShowBody: true,
      debugShowStaticBody: true,
      debugShowVelocity: true,
      debugVelocityColor: 0xffff00,
      debugBodyColor: 0x0000ff,
      debugStaticBodyColor: 0xffffff*/
    }
  },