在Phaser JS游戏开发里，敌人的视线感知和射击AI是让游戏体验更真实的关键功能，核心依赖几何检测判断玩家是否在敌人视野内，再通过射线投射确认两者之间是否存在障碍物，最终触发射击逻辑。
核心原理说明
几何检测实现视线范围判断
敌人的视线通常是一个扇形的检测区域，我们可以通过向量的点积运算判断玩家是否处于这个区域内。首先需要计算敌人与玩家的方向向量，再和敌人的正面朝向向量做点积，结合视线的最大角度和距离阈值就能完成初步判断。
具体的判断逻辑包含三个维度：
- 敌人与玩家的距离不超过视线最大半径
- 玩家与敌人正面朝向的夹角不超过视线半角
- 敌人与玩家之间没有障碍物阻挡
射线投射检测障碍物
Phaser提供了内置的射线投射API，可以发射一条从敌人位置到玩家位置的射线，检测射线与场景中碰撞体的交点。如果射线在到达玩家之前先碰到了其他障碍物，说明玩家被遮挡，敌人无法发现目标。
完整实现代码示例
敌人AI类定义
class EnemyAI {
constructor(scene, x, y) {
this.scene = scene;
// 创建敌人精灵
this.sprite = scene.physics.add.sprite(x, y, 'enemy');
this.sprite.setCollideWorldBounds(true);
// 视线参数配置
this.sightRadius = 200; // 视线最大半径
this.sightAngle = Math.PI / 3; // 视线半角，这里设置为60度
this.fireRate = 1000; // 射击间隔，单位毫秒
this.lastFireTime = 0;
this.faceAngle = 0; // 敌人正面朝向角度，弧度制
// 玩家引用，实际开发中可以从场景中获取
this.player = null;
}
setPlayer(player) {
this.player = player;
}
update(time, delta) {
if (!this.player) return;
// 每帧检测玩家是否在视线内
const isPlayerInSight = this.checkPlayerInSight();
if (isPlayerInSight) {
this.handleShoot(time);
}
}
// 检测玩家是否在视线范围内
checkPlayerInSight() {
const enemyX = this.sprite.x;
const enemyY = this.sprite.y;
const playerX = this.player.x;
const playerY = this.player.y;
// 计算敌人与玩家的距离
const dx = playerX - enemyX;
const dy = playerY - enemyY;
const distance = Math.sqrt(dx * dx + dy * dy);
// 距离超过视线半径，直接返回false
if (distance > this.sightRadius) return false;
// 计算敌人与玩家的方向向量
const dirX = dx / distance;
const dirY = dy / distance;
// 计算敌人正面朝向向量
const faceX = Math.cos(this.faceAngle);
const faceY = Math.sin(this.faceAngle);
// 点积运算得到两个向量的夹角余弦值
const dot = dirX * faceX + dirY * faceY;
// 余弦值转角度，判断是否在视线半角范围内
const angle = Math.acos(Math.min(Math.max(dot, -1), 1));
if (angle > this.sightAngle) return false;
// 射线投射检测障碍物
return this.checkRayCast(enemyX, enemyY, playerX, playerY);
}
// 射线投射检测障碍物
checkRayCast(startX, startY, endX, endY) {
// 创建射线对象
const ray = new Phaser.Geom.Line(startX, startY, endX, endY);
// 获取场景中所有碰撞体
const obstacles = this.scene.obstacleGroup.getChildren();
for (const obstacle of obstacles) {
// 检测射线与障碍物矩形是否相交
const bounds = obstacle.getBounds();
if (Phaser.Geom.Intersects.LineToRectangle(ray, bounds)) {
return false; // 碰到障碍物，玩家被遮挡
}
}
return true; // 没有障碍物，玩家在视线内
}
// 处理射击逻辑
handleShoot(time) {
if (time - this.lastFireTime < this.fireRate) return;
this.lastFireTime = time;
// 创建子弹，向玩家方向发射
const bullet = this.scene.physics.add.sprite(this.sprite.x, this.sprite.y, 'bullet');
const angle = Phaser.Math.Angle.Between(this.sprite.x, this.sprite.y, this.player.x, this.player.y);
this.scene.physics.velocityFromRotation(angle, 300, bullet.body.velocity);
// 子弹超出边界后销毁
this.scene.physics.world.enable(bullet);
bullet.setCollideWorldBounds(true);
bullet.body.onWorldBounds = true;
bullet.body.world.on('worldbounds', (body) => {
if (body.gameObject === bullet) {
bullet.destroy();
}
});
}
}
场景中使用敌人AI
class GameScene extends Phaser.Scene {
constructor() {
super({ key: 'GameScene' });
}
preload() {
// 预加载资源，实际开发中替换为真实资源路径
this.load.image('enemy', 'assets/enemy.png');
this.load.image('player', 'assets/player.png');
this.load.image('bullet', 'assets/bullet.png');
this.load.image('obstacle', 'assets/obstacle.png');
}
create() {
// 创建玩家
this.player = this.physics.add.sprite(400, 300, 'player');
this.player.setCollideWorldBounds(true);
// 玩家移动控制
this.cursors = this.input.keyboard.createCursorKeys();
// 创建障碍物组
this.obstacleGroup = this.physics.add.staticGroup();
this.obstacleGroup.create(300, 200, 'obstacle');
this.obstacleGroup.create(500, 400, 'obstacle');
// 创建敌人AI实例
this.enemyAI = new EnemyAI(this, 100, 100);
this.enemyAI.setPlayer(this.player);
// 子弹与玩家碰撞检测
this.physics.add.overlap(this.player, this.enemyAI.sprite, () => {
console.log('玩家被敌人击中');
});
}
update(time, delta) {
// 玩家移动逻辑
const speed = 160;
this.player.setVelocity(0);
if (this.cursors.left.isDown) {
this.player.setVelocityX(-speed);
} else if (this.cursors.right.isDown) {
this.player.setVelocityX(speed);
}
if (this.cursors.up.isDown) {
this.player.setVelocityY(-speed);
} else if (this.cursors.down.isDown) {
this.player.setVelocityY(speed);
}
// 更新敌人AI
this.enemyAI.update(time, delta);
}
}
代码优化建议
上述示例是基础实现，实际项目中可以根据需求做进一步优化：
- 视线检测不需要每帧都执行，可以设置固定的检测间隔，降低性能消耗
- 可以为敌人添加不同的状态，比如巡逻、追击、射击，根据玩家位置切换状态
- 射线投射可以只检测静态障碍物，动态障碍物单独处理，提升检测效率
- 射击逻辑可以添加子弹冷却动画、命中判定等细节，让AI行为更真实
通过几何检测结合射线投射的方式，就能在Phaser JS中实现符合预期的敌人视线与射击AI，开发者可以根据游戏的具体需求调整视线参数和射击逻辑，适配不同的游戏玩法。