时间戳

首页 > 解决方案 > Phaser 3 创建圆形区域

javascript - Phaser 3 创建圆形区域

问题描述

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

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

标签： javascripttypescriptphaser-framework

解决方案

在 Phaser 3 中，Zone默认是矩形的，不是圆形的，你可以试试这个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.

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

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

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

推荐阅读