Phaser JS 教程：实现智能敌人视线检测与射击逻辑

本教程详细探讨了在phaser js游戏中实现敌人视线检测与射击逻辑的两种主要方法。首先介绍使用phaser内置的几何交叉检测功能进行基础视线判断，适用于简单场景。随后，深入讲解如何利用射线投射（raycasting）技术实现更高级、能处理复杂障碍物的视线检测，并提供相应的实现思路与注意事项，旨在帮助开发者构建更具挑战性和沉浸感的游戏体验。

在开发俯视角射击游戏时，一个常见的需求是让敌人能够“看到”玩家并进行射击，但这种“看到”并非指简单地检测玩家是否在屏幕上，而是要模拟真实的视线，即只有当玩家处于敌人的视线范围内且没有被障碍物阻挡时，敌人才会采取攻击行动。这不仅增加了游戏的策略性和真实感，也提升了玩家的挑战体验。

理解敌人视线检测的核心挑战

实现敌人视线检测的关键在于判断敌人与玩家之间是否存在一条畅通无阻的直线路径。这条路径不能被游戏中的任何障碍物（如墙壁、箱子等）所阻挡。根据游戏机制的复杂程度和场景中障碍物的多少，我们可以选择不同的实现方法。

方法一：使用 Phaser.Geom.Intersects 进行基础视线检测

对于场景较为简单、障碍物较少或不规则碰撞体不多的情况，Phaser 框架提供了 Phaser.Geom.Intersects 命名空间下的一系列几何交叉检测函数，可以高效地完成基础的视线判断。

原理概述

这种方法的核心思想是：将敌人到玩家的连线视为一条几何线段，然后检测这条线段是否与玩家的碰撞体（通常是一个矩形或圆形）发生交叉。如果交叉，则初步判断敌人“看到”了玩家。但需要注意的是，这种方法本身不考虑障碍物的阻挡，因此更适用于没有障碍物或障碍物不影响视线判断的特殊场景。

常用函数

• Phaser.Geom.Intersects.LineToRectangle(line, rect): 检测一条线段是否与一个矩形相交。
• Phaser.Geom.Intersects.LineToLine(line1, line2): 检测两条线段是否相交。

示例代码

以下是一个使用 LineToRectangle 检测敌人是否“看到”玩家的示例：

ArrowMancer

手机上的宇宙动作RPG，游戏角色和元素均为AI生成

下载

class Enemy extends Phaser.Physics.Arcade.Sprite {
    constructor(scene, x, y, texture) {
        super(scene, x, y, texture);
        scene.add.existing(this);
        scene.physics.add.existing(this);
        this.setCollideWorldBounds(true);
        this.player = null; // 玩家引用
    }

    // 在 update 方法中调用此函数进行视线检测
    checkLineOfSight(player) {
        this.player = player;

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

        // 2. 获取玩家的碰撞体边界（通常是物理体的边界）
        // 如果玩家是 Phaser.Physics.Arcade.Sprite，其 body 属性包含碰撞信息
        const playerBodyRect = new Phaser.Geom.Rectangle(
            player.body.x,
            player.body.y,
            player.body.width,
            player.body.height
        );

        // 3. 检测视线是否与玩家碰撞体相交
        const seesPlayer = Phaser.Geom.Intersects.LineToRectangle(lineOfSight, playerBodyRect);

        if (seesPlayer) {
            // 敌人可以看到玩家，执行射击逻辑
            console.log("敌人发现玩家，准备射击！");
            this.shoot();
        } else {
            console.log("敌人未发现玩家。");
            // 停止射击或执行其他行为
        }
    }

    shoot() {
        // 实现敌人射击逻辑，例如发射子弹
        // const bullet = this.scene.bullets.get(this.x, this.y);
        // if (bullet) {
        //     bullet.setActive(true).setVisible(true);
        //     this.scene.physics.moveToObject(bullet, this.player, 200);
        // }
    }

    preUpdate(time, delta) {
        super.preUpdate(time, delta);
        if (this.player) {
            this.checkLineOfSight(this.player);
        }
    }
}

// 在 Scene 中创建敌人和玩家
// function create() {
//     this.player = this.physics.add.sprite(100, 100, 'player');
//     this.enemy = new Enemy(this, 300, 300, 'enemy');
//     this.enemy.player = this.player; // 将玩家实例传递给敌人
// }

适用场景与局限性

• 适用场景： 游戏地图开放，没有视线阻挡物；或者视线阻挡物的判断逻辑非常简单，可以通过额外的手动检测实现。
• 局限性： 无法直接处理障碍物的遮挡。如果地图中有墙壁、箱子等会阻挡视线的元素，仅仅使用 LineToRectangle 是不够的，因为它只会判断线段是否触及玩家，而不会判断线段是否穿过障碍物。

方法二：利用 Raycasting 实现高级视线检测

当游戏场景包含复杂的障碍物，需要精确判断视线是否被阻挡时，射线投射（Raycasting）是更强大和专业的解决方案。

原理概述

射线投射的原理是：从敌人的位置向玩家的位置发射一条“射线”。然后，检测这条射线在到达玩家之前，是否与场景中的任何障碍物发生碰撞。

• 如果射线首先与玩家碰撞，则表示敌人可以看到玩家。
• 如果射线首先与障碍物碰撞，则表示玩家被障碍物阻挡，敌人无法看到玩家。

优势

• 精确处理障碍物： 能够模拟真实的视线阻挡，即使是复杂的地图布局和不规则形状的障碍物也能有效处理。
• 灵活性高： 可以用于实现各种复杂的AI行为，如敌人巡逻、寻找掩体等。

实现方式

1. 自定义实现： 从头开始编写射线投射逻辑。这通常涉及几何计算（如线段与线段、线段与多边形的交点检测），并遍历所有可能的障碍物。这种方法复杂且容易出错，通常不推荐除非有特殊需求。
2. 使用第三方插件（推荐）： Phaser 社区提供了优秀的射线投射插件，它们封装了复杂的几何计算，提供了简单易用的API。例如，phaser-raycaster 是一个功能强大的插件，可以很好地集成到 Phaser 3 项目中。

phaser-raycaster 插件使用思路

1. 安装与集成： 将插件添加到项目中，并在 Phaser 配置中启用它。
2. 创建 Raycaster 实例： 在场景中创建一个 Raycaster 实例。
3. 添加障碍物： 将所有可能阻挡视线的游戏对象（如墙壁、箱子等）添加到 Raycaster 的障碍物列表中。这些对象通常需要有物理体或几何形状。
4. 创建射线： 从敌人位置创建一个射线，并将其方向指向玩家位置。
5. 投射射线并检测碰撞： 调用 Raycaster 的投射方法，它会返回射线碰撞到的第一个对象。
6. 判断结果： 检查碰撞到的对象是否是玩家。

// 假设你已经安装并配置了 phaser-raycaster 插件

class AdvancedEnemy extends Phaser.Physics.Arcade.Sprite {
    constructor(scene, x, y, texture) {
        super(scene, x, y, texture);
        scene.add.existing(this);
        scene.physics.add.existing(this);
        this.setCollideWorldBounds(true);
        this.player = null;
        this.raycaster = scene.raycaster; // 场景中的 raycaster 实例
        this.ray = null; // 射线实例
    }

    // 初始化射线
    initRay() {
        if (!this.raycaster) {
            console.error("Raycaster not initialized in scene!");
            return;
        }
        this.ray = this.raycaster.createRay({
            origin: { x: this.x, y: this.y }
        });
        // 确保障碍物层已添加到 raycaster
        // 例如：this.raycaster.mapGameObjects(this.scene.obstacles, true);
    }

    // 在 update 方法中调用此函数进行视线检测
    checkLineOfSightWithRaycasting(player) {
        if (!this.ray || !this.player) {
            this.initRay(); // 确保射线已初始化
            return;
        }

        // 更新射线起点和方向
        this.ray.setOrigin(this.x, this.y);
        this.ray.setTarget(player.x, player.y);

        // 投射射线并获取碰撞结果
        // 假设 player 已经被添加到 raycaster 的目标对象中，或者作为单独的目标进行检测
        const intersections = this.ray.cast(); // cast() 会返回所有交点，castOne() 返回第一个交点

        let seesPlayer = false;
        if (intersections.length > 0) {
            // 获取最近的交点
            const closestIntersection = intersections.reduce((prev, current) => {
                return (prev.distance < current.distance) ? prev : current;
            });

            // 判断最近的交点是否是玩家
            // 这需要你将 player 对象也添加到 raycaster 的目标中，或者通过其他方式判断
            // 更常见的做法是：将所有障碍物添加到 raycaster，然后判断射线是否与障碍物相交
            // 如果没有与障碍物相交，或者与障碍物相交的距离比与玩家的距离远，则认为看到玩家

            // 简化判断：如果射线没有碰到任何障碍物，或者第一个碰到的是玩家
            // 这里的逻辑需要根据 raycaster 插件的具体用法和你的游戏结构来调整
            // 例如，你可以将玩家也作为一个可检测的目标
            if (closestIntersection.object === player) {
                seesPlayer = true;
            } else {
                // 如果最近的交点是障碍物，那么玩家被阻挡了
                seesPlayer = false;
            }
        } else {
            // 如果射线没有碰到任何东西，通常意味着玩家在视线内且无阻挡
            // 但这取决于你的 raycaster 配置和场景范围
            // 在很多情况下，你需要确保射线能到达玩家，或者通过距离判断
            const distanceToPlayer = Phaser.Math.Distance.Between(this.x, this.y, player.x, player.y);
            if (distanceToPlayer <= this.sightRange) { // 假设敌人有一个视线范围
                 seesPlayer = true;
            }
        }


        if (seesPlayer) {
            console.log("高级敌人发现玩家，准备射击！");
            this.shoot();
        } else {
            console.log("高级敌人未发现玩家。");
        }
    }

    // ... shoot 方法同上
    // ... preUpdate 方法同上，调用 checkLineOfSightWithRaycasting
}

// 在 Scene 的 create 方法中：
// function create() {
//     this.raycaster = this.raycasterPlugin.createRaycaster();
//     // 假设你有一个名为 'walls' 的 Tilemap 层作为障碍物
//     // this.raycaster.mapGameObjects(this.walls.tilemap.layers[0].tilemap.getTilesWithin(), true);
//     // 或者将所有物理障碍物添加到 raycaster
//     // this.obstacles.forEach(obstacle => this.raycaster.mapGameObjects(obstacle, true));

//     this.player = this.physics.add.sprite(100, 100, 'player');
//     this.advancedEnemy = new AdvancedEnemy(this, 300, 300, 'enemy');
//     this.advancedEnemy.player = this.player;
// }

注意事项

• 性能： 射线投射涉及较多的几何计算。在大型场景或有大量敌人同时进行视线检测时，可能会影响性能。建议优化检测频率（例如，每隔几帧检测一次，而不是每帧都检测）。
• 障碍物配置： 确保所有作为障碍物的游戏对象都被正确地添加到 Raycaster 的检测列表中，并且它们的几何形状（如多边形、矩形）被正确识别。
• 插件文档： 详细阅读所选射线投射插件的官方文档，了解其API、配置选项和最佳实践。

综合考虑与最佳实践

1. 选择合适的检测方法：
   • 对于简单的、无障碍物的场景，Phaser.Geom.Intersects 足够且性能更优。
   • 对于有复杂障碍物的场景，射线投射是更可靠和专业的选择。
2. 优化检测频率： 除非游戏要求极高的实时精度，否则不必每帧都进行视线检测。可以设置一个计时器，每隔 0.1-0.5 秒检测一次，以减少CPU负担。
3. 视线范围： 敌人通常有一个有限的视线范围。在进行视线检测前，可以先判断玩家是否在敌人的圆形或矩形视线范围内，这能有效减少不必要的复杂计算。
4. 视觉反馈： 当敌人“看到”玩家时，可以添加视觉或听觉反馈（如敌人头上出现感叹号、发出特殊音效），以增强玩家的代入感。
5. 结合AI行为树： 视线检测通常是敌人AI行为树中的一个节点。当检测到玩家时，AI会切换到攻击状态；当玩家脱离视线时，AI可能会切换到搜索或巡逻状态。

总结

在 Phaser JS 中实现敌人基于视线的射击逻辑，是提升游戏深度和挑战性的关键一步。通过灵活运用 Phaser.Geom.Intersects 进行基础判断，或采用射线投射技术处理复杂障碍物，开发者可以构建出智能且反应真实的敌人AI。选择最适合项目需求的方法，并结合性能优化和良好的AI设计，将为玩家带来更加沉浸和愉快的游戏体验。