Phaser JS 游戏开发：实现敌人视线检测与智能射击机制

import Phaser from 'phaser';

class GameScene extends Phaser.Scene {
    constructor() {
        super({ key: 'GameScene' });
        this.player = null;
        this.enemy = null;
        this.debugGraphics = null; // 用于绘制调试信息
    }

    preload() {
        // 加载玩家和敌人图像
        this.load.image('player', 'assets/player.png');
        this.load.image('enemy', 'assets/enemy.png');
    }

    create() {
        // 创建玩家和敌人
        this.player = this.add.sprite(100, 100, 'player');
        this.enemy = this.add.sprite(400, 300, 'enemy');

        // 设置调试图形
        this.debugGraphics = this.add.graphics();
    }

    update() {
        // 清除上一帧的调试绘制
        this.debugGraphics.clear();

        // 1. 创建从敌人到玩家的视线
        const lineOfSight = new Phaser.Geom.Line(
            this.enemy.x,
            this.enemy.y,
            this.player.x,
            this.player.y
        );

        // 2. 获取玩家的碰撞边界（假设玩家是一个矩形）
        // 对于 Sprite，可以使用 getBounds() 获取其世界坐标下的矩形边界
        const playerBounds = this.player.getBounds();

        // 3. 检测视线是否与玩家边界相交
        if (Phaser.Geom.Intersects.LineToRectangle(lineOfSight, playerBounds)) {
            // 玩家在敌人的视线范围内
            // 可以在这里触发敌人射击逻辑
            console.log('玩家在敌人视线内，敌人可以射击！');

            // 调试绘制：将视线绘制为红色
            this.debugGraphics.lineStyle(2, 0xff0000);
            this.debugGraphics.strokeLineShape(lineOfSight);
        } else {
            // 玩家不在敌人视线范围内
            // 调试绘制：将视线绘制为绿色
            this.debugGraphics.lineStyle(2, 0x00ff00);
            this.debugGraphics.strokeLineShape(lineOfSight);
        }
    }
}

// 游戏配置
const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: [GameScene],
    physics: {
        default: 'arcade', // 或者 'matter'
        arcade: {
            debug: false
        }
    }
};

const game = new Phaser.Game(config);

// 安装插件
// npm install phaser-raycaster

// 游戏配置中注册插件
const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: [GameScene],
    plugins: {
        scene: [
            {
                key: 'PhaserRaycaster',
                plugin: PhaserRaycaster, // 假设你已正确导入 PhaserRaycaster
                mapping: 'raycaster' // 插件实例将通过 this.raycaster 访问
            }
        ]
    },
    physics: {
        default: 'arcade',
        arcade: {
            debug: true // 开启物理调试以便观察碰撞体
        }
    }
};

import Phaser from 'phaser';
// 假设你已正确导入 PhaserRaycaster
// import PhaserRaycaster from 'phaser-raycaster'; 

class GameScene extends Phaser.Scene {
    constructor() {
        super({ key: 'GameScene' });
        this.player = null;
        this.enemy = null;
        this.walls = null; // 障碍物组
    }

    preload() {
        this.load.image('player', 'assets/player.png');
        this.load.image('enemy', 'assets/enemy.png');
        this.load.image('wall', 'assets/wall.png');
    }

    create() {
        // 创建玩家和敌人
        this.player = this.physics.add.sprite(100, 100, 'player');
        this.enemy = this.physics.add.sprite(400, 300, 'enemy');

        // 创建障碍物组
        this.walls = this.physics.add.staticGroup();
        this.walls.create(250, 200, 'wall').setScale(0.5);
        this.walls.create(350, 400, 'wall').setScale(0.5);
        this.walls.create(500, 150, 'wall').setScale(0.5);

        // 初始化射线投射器
        // this.raycaster 是因为在配置中 mapping 为 'raycaster'
        this.raycaster.createRaycaster(); 

        // 为所有可阻挡视线的物体添加射线投射体
        // 通常，这包括玩家和所有障碍物
        this.raycaster.mapGameObjects([this.player, ...this.walls.getChildren()], true);

        // 创建一条射线
        this.ray = this.raycaster.createRay();
    }

    update() {
        // 设置射线的起点为敌人位置
        this.ray.setOrigin(this.enemy.x, this.enemy.y);
        // 设置射线的方向指向玩家
        this.ray.setAngle(Phaser.Math.Angle.Between(this.enemy.x, this.enemy.y, this.player.x, this.player.y));

        // 投射射线并获取第一个碰撞结果
        // 这里的`cast()`方法会返回一个包含碰撞信息的对象，
        // 或者如果未碰撞则返回 null。
        // `objects`参数是可选的，用于指定要检测的物体。
        const intersection = this.ray.cast([this.player, ...this.walls.getChildren()]);

        if (intersection) {
            // 调试绘制射线
            this.ray.drawDebug(this.debugGraphics); // 假设你有一个 debugGraphics 对象

            // 检查第一个碰撞到的物体是否是玩家
            if (intersection.object === this.player) {
                // 玩家在视线内，且没有被障碍物阻挡
                console.log('玩家在敌人视线内，敌人可以射击！');
                // 触发射击逻辑
            } else {
                // 射线先撞到了障碍物，玩家被阻挡
                console.log('玩家被障碍物阻挡。');
            }
        } else {
            // 射线没有碰到任何物体（可能玩家太远或者在地图外）
            console.log('玩家不在视线范围内。');
        }
    }
}