Phaser中根据运动方向动态调整精灵旋转角度的教程-js教程-PHP中文网

Phaser中根据运动方向动态调整精灵旋转角度的教程

本教程详细介绍了如何在phaser 3游戏中，使精灵根据其当前运动方向自动调整旋转角度，尤其是在发生碰撞后。文章将涵盖初始设置、世界边界碰撞处理以及精灵间碰撞处理，通过利用phaser的物理系统和向量数学，确保精灵始终面向其速度向量的方向，从而提升游戏视觉真实感和交互体验。

在Phaser游戏中，创建动态且响应迅速的精灵是提升用户体验的关键。一个常见的需求是让精灵的视觉方向与其运动方向保持一致，特别是在发生碰撞导致速度方向改变之后。本文将指导您如何实现这一功能，确保您的精灵能够“面向”它们前进的方向。

1. Phaser游戏与精灵组初始化

首先，我们需要设置一个基本的Phaser游戏环境，并创建一个物理精灵组。我们将使用Phaser的Arcade物理系统，并为精灵赋予初始速度。

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

var config = {
    type: Phaser.AUTO,
    width: 800, // 调整宽度以适应示例
    height: 600, // 调整高度以适应示例
    physics: {
        default: 'arcade',
        arcade: {            
            gravity: { y: 0 }, // 无重力，方便演示自由移动
            debug: false // 调试模式，可显示物理边界
        }
    },
    scene: { create, update } // 添加update函数用于相机控制
}; 

var game = new Phaser.Game(config);
var controls; // 用于相机控制

function create () {
    // 创建一个简单的纹理用于精灵，这里使用一个白色三角形模拟“光子”
    let graphics  = this.make.graphics();
    graphics.fillStyle(0xffffff);
    graphics.fillTriangle(0, 0, 10, 5, 0, 10); // 绘制一个指向右侧的三角形
    graphics.generateTexture('photon_img', 10, 10); // 生成名为'photon_img'的纹理

    // 创建精灵组
    this.photons = this.physics.add.group({
      key: "photon_img", // 使用我们生成的纹理
      repeat: 11, // 创建12个精灵（1个初始+11个重复）
      setXY: { x: 50, y: 50, stepX: 60, stepY: 60 }, // 设置初始位置和步长
    });

    // 遍历精灵组，设置每个精灵的物理属性和初始状态
    this.photons.children.iterate((child) => {
      child.body.bounce.set(1); // 设置完全弹性碰撞
      child.setVelocity(Phaser.Math.Between(-200, 200), Phaser.Math.Between(-200, 200)); // 随机初始速度
      child.body.collideWorldBounds = true; // 允许与世界边界碰撞
      child.body.onWorldBounds = true; // 开启世界边界碰撞事件监听

      // 根据初始速度设置精灵的初始旋转角度
      let initialAngle = (new Phaser.Math.Vector2(child.body.velocity)).angle();
      child.setRotation(initialAngle);
    });

    // 设置相机控制（可选，如果不需要可移除）
    const cursors = this.input.keyboard.createCursorKeys();
    const controlConfig = {
      camera: this.cameras.main,
      left: cursors.left,
      right: cursors.right,
      up: cursors.up,
      down: cursors.down,
      acceleration: 0.06,
      drag: 0.0005,
      maxSpeed: 1.0,
    };
    controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);

    // 添加文本提示
    this.add.text(10, 10, '精灵会根据运动方向旋转')
        .setScale(1.5)
        .setOrigin(0)
        .setStyle({fontStyle: 'bold', fontFamily: 'Arial', color: '#00ff00'});
}

function update (time, delta) {
    // 更新相机控制（如果已设置）
    if (controls) {
        controls.update(delta);
    }
}

登录后复制

关键点说明：

graphics.fillTriangle(0, 0, 10, 5, 0, 10);：我们绘制了一个三角形，其尖端指向右侧。这是重要的，因为Phaser的angle()方法返回的角度是相对于正X轴（即向右）的。如果您的精灵图片默认方向不是向右，您可能需要调整其初始旋转或在计算后添加一个偏移量。
child.body.onWorldBounds = true;：这行代码至关重要，它告诉Phaser当该精灵与世界边界碰撞时，触发一个worldbounds事件。

2. 处理世界边界碰撞时的旋转

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

// ... (接上面的create函数)

    // 监听世界边界碰撞事件
    this.physics.world.on('worldbounds', (body) => {
        // 'worldbounds'事件的callback参数是发生碰撞的物理体(body)
        // 从物理体获取其所属的游戏对象(gameObject)
        let photon = body.gameObject; 
        if (photon) {
            // 根据新的速度向量计算旋转角度
            let newAngle = (new Phaser.Math.Vector2(body.velocity)).angle();
            photon.setRotation(newAngle);
        }
    });

// ... (create函数结束)

登录后复制

解释：

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

查看详情

this.physics.world.on('worldbounds', (body) => { ... });：这是注册世界边界碰撞事件监听器的方法。当任何启用了onWorldBounds的物理体与世界边界碰撞时，这个回调函数就会被调用。
body.gameObject：在worldbounds事件中，回调函数的参数是发生碰撞的物理体（Phaser.Physics.Arcade.Body）。要获取实际的精灵对象（Phaser.GameObjects.Sprite），我们需要访问body.gameObject属性。
new Phaser.Math.Vector2(body.velocity)).angle();：这是核心的旋转计算。body.velocity是一个Phaser.Math.Vector2对象，表示精灵当前的X和Y速度。angle()方法会返回该向量与正X轴之间的弧度角。

3. 处理精灵间碰撞时的旋转

除了世界边界碰撞，精灵之间也可能发生碰撞。当两个精灵相互碰撞时，它们的速度方向同样会改变，因此也需要更新它们的旋转。

// ... (接上面的create函数)

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

        // 更新第一个精灵的旋转
        let newAngle1 = (new Phaser.Math.Vector2(p1.body.velocity)).angle();
        p1.setRotation(newAngle1);

        // 更新第二个精灵的旋转
        let newAngle2 = (new Phaser.Math.Vector2(p2.body.velocity)).angle();
        p2.setRotation(newAngle2);
    });

// ... (create函数结束)

登录后复制

解释：

this.physics.add.collider(this.photons, this.photons, (p1, p2) => { ... });：这个方法用于设置两个物理组之间的碰撞检测。当this.photons组内的任意两个精灵发生碰撞时，第三个参数（回调函数）就会被调用。
回调函数的参数p1和p2是发生碰撞的两个精灵对象（Phaser.GameObjects.Sprite）。可以直接通过它们的body.velocity来计算并更新旋转。

完整示例代码

将上述所有部分整合，您将得到一个完整的Phaser游戏示例，其中精灵会根据其运动方向动态旋转：

<!DOCTYPE html>
<html>
<head>
    <title>Phaser精灵动态旋转教程</title>
    <script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>
    <style>
        body { margin: 0; }
    </style>
</head>
<body>

<script>
document.body.style = 'margin:0;';

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {            
            gravity: { y: 0 },
            debug: false // 设置为true可以显示物理调试信息
        }
    },
    scene: { create, update }
}; 

var game = new Phaser.Game(config);
var controls;

function create () {
    // 创建一个简单的纹理用于精灵
    let graphics  = this.make.graphics();
    graphics.fillStyle(0xffffff);
    graphics.fillTriangle(0, 0, 10, 5, 0, 10); // 绘制一个指向右侧的三角形
    graphics.generateTexture('photon_img', 10, 10);

    // 创建精灵组
    this.photons = this.physics.add.group({
      key: "photon_img",
      repeat: 11,
      setXY: { x: 50, y: 50, stepX: 60, stepY: 60 },
    });

    // 遍历精灵组，设置每个精灵的物理属性和初始状态
    this.photons.children.iterate((child) => {
      child.body.bounce.set(1); // 完全弹性碰撞
      child.setVelocity(Phaser.Math.Between(-200, 200), Phaser.Math.Between(-200, 200)); // 随机初始速度
      child.body.collideWorldBounds = true; // 与世界边界碰撞
      child.body.onWorldBounds = true; // 开启世界边界碰撞事件监听

      // 根据初始速度设置精灵的初始旋转角度
      let initialAngle = (new Phaser.Math.Vector2(child.body.velocity)).angle();
      child.setRotation(initialAngle);
    });

    // 监听世界边界碰撞事件
    this.physics.world.on('worldbounds', (body) => {
        let photon = body.gameObject; 
        if (photon) {
            let newAngle = (new Phaser.Math.Vector2(body.velocity)).angle();
            photon.setRotation(newAngle);
        }
    });

    // 添加精灵组内部的碰撞检测
    this.physics.add.collider(this.photons, this.photons, (p1, p2) => {
        // 更新第一个精灵的旋转
        let newAngle1 = (new Phaser.Math.Vector2(p1.body.velocity)).angle();
        p1.setRotation(newAngle1);

        // 更新第二个精灵的旋转
        let newAngle2 = (new Phaser.Math.Vector2(p2.body.velocity)).angle();
        p2.setRotation(newAngle2);
    });

    // 相机控制设置（可选）
    const cursors = this.input.keyboard.createCursorKeys();
    const controlConfig = {
      camera: this.cameras.main,
      left: cursors.left,
      right: cursors.right,
      up: cursors.up,
      down: cursors.down,
      acceleration: 0.06,
      drag: 0.0005,
      maxSpeed: 1.0,
    };
    controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);

    this.add.text(10, 10, '精灵会根据运动方向旋转')
        .setScale(1.5)
        .setOrigin(0)
        .setStyle({fontStyle: 'bold', fontFamily: 'Arial', color: '#00ff00'});
}

function update (time, delta) {
    if (controls) {
        controls.update(delta);
    }
}
</script>

</body>
</html>

登录后复制

注意事项与总结

精灵图片方向： 确保您的精灵图片默认是“面向右侧”的（即其前端朝向X轴正方向）。Phaser.Math.Vector2.angle()方法返回的角度是相对于正X轴的，如果您的图片默认方向不是右侧，您可能需要在setRotation时添加一个固定的偏移量（例如，如果图片默认向上，则需要setRotation(newAngle + Math.PI / 2)）。
性能考虑： 对于拥有大量精灵且频繁碰撞的游戏，在每次碰撞回调中计算并设置旋转可能会带来一定的性能开销。在大多数情况下，这种开销是可接受的，但如果遇到性能瓶颈，可以考虑优化策略，例如仅在速度方向显著改变时才更新旋转。
其他物理体： 本教程主要针对Arcade物理系统中的Phaser.GameObjects.Sprite。对于其他物理体类型（如TileSprite、Image等）或Matter.js物理系统，原理相似，但获取物理体和设置旋转的方法可能略有不同。
旋转单位： Phaser的setRotation()方法接受弧度值，Phaser.Math.Vector2.angle()也返回弧度值。如果您习惯使用角度，可以使用Phaser.Math.RadToDeg()进行转换。