Phaser精灵移动与碰撞旋转教程

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《Phaser精灵运动方向与碰撞旋转教程》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

本教程详细讲解如何在Phaser游戏中，使精灵（Sprite）始终面向其当前的运动方向，并在与世界边界或其它精灵发生碰撞后，动态更新其旋转角度。通过利用Phaser的物理系统、向量数学以及碰撞事件监听，我们将实现一个视觉上更具动态感的交互效果，提升游戏体验。

1. 理解精灵方向与速度

在Phaser的物理系统中，精灵的运动方向由其速度（body.velocity）决定，这是一个二维向量。要让精灵面向其运动方向，我们需要将这个速度向量转换为一个角度，然后应用到精灵的旋转属性上。Phaser提供了 Phaser.Math.Vector2 类，可以方便地从速度向量获取其角度。

2. Phaser环境与精灵资源准备

首先，我们需要一个基本的Phaser游戏配置，并准备一个能够清晰显示方向的精灵资源。为了演示效果，我们可以动态生成一个三角形纹理。

document.body.style = 'margin:0;'; // 移除默认边距

var config = {
    type: Phaser.AUTO,
    width: 800, // 游戏画布宽度
    height: 600, // 游戏画布高度
    physics: {
        default: 'arcade', // 使用Arcade物理系统
        arcade: {            
            gravity: { y: 0 }, // 禁用重力，使精灵自由移动
            debug: false // 设置为true可以在调试时显示物理体边界
        }
    },
    scene: { create, update } // 定义场景的create和update方法
}; 

function create () {
    // 在屏幕左上角添加一个提示文本
    this.add.text(10, 10, '精灵面向运动方向演示')
        .setScale(1.5)
        .setOrigin(0)
        .setStyle({fontStyle: 'bold', fontFamily: 'Arial', color: '#ffffff'});

    // 动态生成一个三角形纹理，用于表示方向
    let graphics  = this.make.graphics();
    graphics.fillStyle(0xffffff); // 白色填充
    // 创建一个尖端朝右的等腰三角形，尺寸为10x10像素
    graphics.fillTriangle(0, 0, 10, 5, 0, 10); 
    graphics.generateTexture('triangle_sprite', 10, 10); // 生成名为'triangle_sprite'的纹理

    // 创建一个精灵组
    this.photons = this.physics.add.group({
      key: "triangle_sprite", // 使用生成的三角形纹理
      repeat: 5, // 创建6个精灵（1个原始 + 5个重复）
      setXY: { x: 50, y: 50, stepX: 60 }, // 设置初始位置和间隔
    });

    // ... 后续代码将在这里添加
}

function update() {
    // 此处可添加全局游戏逻辑，例如相机控制、输入处理等
    // 如果有Phaser.Cameras.Controls.SmoothedKeyControl，可以在这里更新：
    // this.controls.update(delta); 
}

new Phaser.Game(config);

在上述代码中，我们创建了一个 triangle_sprite 纹理，其尖端默认指向右侧（0度方向）。当我们将精灵的旋转设置为其速度向量的角度时，它将自然地朝向其运动方向。

3. 初始化精灵状态与方向

在精灵组创建后，我们需要遍历每个子精灵，设置其物理属性，并计算其初始运动方向。

    this.photons.children.iterate(function (child) {
      child.body.bounce.set(1); // 设置弹力为1，使其在碰撞时完全反弹
      // 设置随机初始速度，使其在X和Y轴上以-200到200像素/秒的速度移动
      child.setVelocity(Phaser.Math.Between(-200, 200), Phaser.Math.Between(-200, 200)); 

      // 计算并设置初始旋转角度
      // Phaser.Math.Vector2(child.body.velocity) 从速度创建一个向量
      // .angle() 方法返回该向量与正X轴的夹角（弧度）
      let initialAngle = (new Phaser.Math.Vector2(child.body.velocity)).angle();
      child.setRotation(initialAngle); // Phaser的rotation属性使用弧度

      child.body.collideWorldBounds = true; // 启用精灵与世界边界的碰撞检测
      child.body.onWorldBounds = true; // 启用世界边界碰撞事件的触发
    });

关键点：

• child.body.bounce.set(1)：确保精灵在碰撞时能完全反弹。
• child.setVelocity(...)：为精灵设置一个初始速度。
• (new Phaser.Math.Vector2(child.body.velocity)).angle()：这是核心，它将精灵当前的速度向量转换为一个弧度角度。
• child.setRotation(initialAngle)：将计算出的角度应用到精灵的旋转属性上。Phaser的旋转属性是以弧度表示的。
• child.body.onWorldBounds = true;：这一步非常重要，它告诉Phaser在精灵与世界边界发生碰撞时触发 worldbounds 事件。

4. 处理世界边界碰撞后方向更新

当精灵与世界边界碰撞时，其速度向量会发生改变。我们需要监听 worldbounds 事件，并在事件触发时更新精灵的旋转。

    this.physics.world.on('worldbounds', (body, up, down, left, right) => {
        // body 参数是发生碰撞的物理体 (Phaser.Physics.Arcade.Body)
        // up, down, left, right 为布尔值，指示碰撞发生在哪一侧

        // 重新计算物理体的速度向量角度
        let newAngle = (new Phaser.Math.Vector2(body.velocity)).angle();
        // body.gameObject 引用了与该物理体关联的精灵对象，更新其旋转
        body.gameObject.setRotation(newAngle); 
    });

说明：

• this.physics.world.on('worldbounds', ...)：注册一个世界边界碰撞事件监听器。
• 回调函数中的 body 参数是发生碰撞的物理体（Phaser.Physics.Arcade.Body）。
• body.gameObject 属性可以获取到与该物理体关联的精灵对象。
• 我们再次利用 body.velocity 计算新的角度并更新精灵的旋转。

5. 处理精灵间碰撞后方向更新

除了世界边界，精灵之间也可能发生碰撞。为了使精灵在相互碰撞后也能正确更新方向，我们需要设置精灵组之间的碰撞检测，并提供一个回调函数。

    this.physics.add.collider(this.photons, this.photons, (p1, p2) => {
        // p1 和 p2 是发生碰撞的两个精灵对象

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。