本文详细介绍了在phaser游戏中如何使物理精灵根据其当前移动方向自动调整旋转角度。教程涵盖了精灵初始化时的方向设置，以及如何通过监听世界边界碰撞和精灵间碰撞事件，利用phaser的向量数学功能实时计算并更新精灵的朝向，从而确保它们始终面向前进方向，显著提升游戏的动态视觉效果和沉浸感。
1. 理解核心原理：速度向量与旋转角度
在Phaser中，一个物理精灵的移动方向由其速度向量（body.velocity）决定。要使精灵的视觉朝向与其移动方向一致，我们需要将这个速度向量转换为一个角度值，然后将该角度应用到精灵的旋转属性上。Phaser提供了便捷的工具来完成这一转换：Phaser.math.Vector2。
一个 Phaser.Math.Vector2 对象可以通过精灵的 body.velocity 创建，然后调用其 angle() 方法即可获取弧度制的方向角。
let currentVelocity = child.body.velocity; let newAngle = (new Phaser.Math.Vector2(currentVelocity)).angle(); child.setRotation(newAngle);
这个 newAngle 就是精灵当前应该面向的弧度值。
2. 初始化精灵的旋转方向
在精灵被创建并赋予初始速度时，就应该设置其初始旋转方向。这确保了精灵从一开始就正确地朝向其移动方向。
this.photons = this.physics.add.group({ key: "photon", // 假设 'photon' 是一个指向右侧的贴图 repeat: 11, setXY: { x: 50, y: 50, stepX: 32 }, }); this.photons.children.iterate(function (child) { child.body.bounce.set(1); // 设置弹力 let initialVelocityX = Phaser.Math.Between(300, 500); let initialVelocityy = 20; child.setVelocity(initialVelocityX, initialVelocityY); child.body.collideWorldBounds = true; // 根据初始速度设置初始旋转 let initialAngle = (new Phaser.Math.Vector2(child.body.velocity)).angle(); child.setRotation(initialAngle); });
注意： 确保你的精灵贴图的默认朝向（通常是0度旋转时）是向右的。如果不是，你需要根据贴图的实际朝向进行适当的偏移调整（例如，如果贴图默认向上，可能需要 newAngle + Math.PI / 2）。
3. 处理世界边界碰撞后的旋转
当精灵与游戏世界的边界发生碰撞时，其速度方向会发生改变。为了使精灵在碰撞后依然面向新的方向，我们需要监听世界边界碰撞事件并更新其旋转。
3.1 启用世界边界碰撞事件
首先，需要为每个精灵的物理体启用 onWorldBounds 属性，这样Phaser才会触发世界边界事件。
this.photons.children.iterate(function (child) { // ... 其他设置 child.body.collideWorldBounds = true; // 确保与世界边界碰撞 child.body.onWorldBounds = true; // 启用世界边界事件 });
3.2 监听世界边界事件并更新旋转
接下来，在场景的 create 方法中设置一个世界物理事件监听器。
this.physics.world.on('worldbounds', (body) => { // 'worldbounds' 事件会传递发生碰撞的物理体 (body) // 从物理体获取新的速度向量并计算角度 let newAngle = (new Phaser.Math.Vector2(body.velocity)).angle(); // 更新与该物理体关联的GameObject的旋转 body.gameObject.setRotation(newAngle); });
4. 处理精灵间碰撞后的旋转
当两个精灵相互碰撞时，它们的物理体速度也会发生改变。与世界边界碰撞类似，我们也需要更新它们的旋转。
4.1 设置精灵组间的碰撞检测
使用 this.physics.add.collider() 方法来检测精灵组内部的成员之间的碰撞。
this.physics.add.collider(this.photons, this.photons, (sprite1, sprite2) => { // 碰撞发生时会调用此回调函数 // sprite1 和 sprite2 是发生碰撞的两个GameObject // 更新 sprite1 的旋转 let newAngle1 = (new Phaser.Math.Vector2(sprite1.body.velocity)).angle(); sprite1.setRotation(newAngle1); // 更新 sprite2 的旋转 let newAngle2 = (new Phaser.Math.Vector2(sprite2.body.velocity)).angle(); sprite2.setRotation(newAngle2); });
5. 完整示例代码
以下是一个完整的Phaser场景示例，演示了如何创建可旋转的物理精灵，并使其在与世界边界和彼此碰撞后自动调整方向。为了清晰展示方向，我们使用一个简单的三角形作为精灵贴图。
<!DOCTYPE html> <html> <head> <title>Phaser Sprite Directional Rotation</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;'; // 移除默认的body边距 var config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 0 }, // 无重力，方便展示自由移动 debug: false // 设置为true可以显示物理体边界 } }, scene: { create } }; function create () { this.add.text(10,10, 'Phaser 物理精灵方向旋转示例') .setScale(1.5) .setOrigin(0) .setStyle({fontStyle: 'bold', fontFamily: 'Arial'}); // 1. 创建一个简单的三角形纹理用于精灵，使其有明确的方向性 let graphics = this.make.graphics(); graphics.fillStyle(0xffffff); // 白色填充 // 绘制一个向右的三角形 (0,0)-(10,5)-(0,10) graphics.fillTriangle(0, 0, 10, 5, 0, 10); graphics.generateTexture('triangle_sprite', 10, 10); // 生成纹理，名为'triangle_sprite' // 2. 创建一个物理精灵组 this.photons = this.physics.add.group({ key: "triangle_sprite", // 使用我们创建的三角形纹理 repeat: 9, // 创建10个精灵 (1个初始 + 9个重复) setXY: { x: 50, y: 50, stepX: 70 }, // 初始位置和间隔 }); // 3. 遍历精灵组，设置每个精灵的物理属性和初始旋转 this.photons.children.iterate(function (child) { child.body.bounce.set(1); // 完全弹性碰撞 // 赋予随机的初始速度 let initialVX = Phaser.Math.Between(-200, 200); // 允许向左或向右 let initialVY = Phaser.Math.Between(-200, 200); // 允许向上或向下 child.setVelocity(initialVX, initialVY); child.body.collideWorldBounds = true; // 启用与世界边界的碰撞 child.body.onWorldBounds = true; // 启用世界边界碰撞事件 // 根据初始速度设置初始旋转 let initialAngle = (new Phaser.Math.Vector2(child.body.velocity)).angle(); child.setRotation(initialAngle); }); // 4. 监听世界边界碰撞事件，并在碰撞后更新精灵旋转 this.physics.world.on('worldbounds', (body) => { let newAngle = (new Phaser.Math.Vector2(body.velocity)).angle(); body.gameObject.setRotation(newAngle); }); // 5. 设置精灵组内部成员之间的碰撞检测，并在碰撞后更新双方旋转 this.physics.add.collider(this.photons, this.photons, (p1, p2) => { // 更新 p1 的旋转 let newAngle1 = (new Phaser.Math.Vector2(p1.body.velocity)).angle(); p1.setRotation(newAngle1); // 更新 p2 的旋转 let newAngle2 = (new Phaser.Math.Vector2(p2.body.velocity)).angle(); p2.setRotation(newAngle2); }); } new Phaser.Game(config); </script> </body> </html>
6. 注意事项与最佳实践
- 精灵纹理的默认朝向：如前所述，确保你的精灵纹理在0度旋转时的默认朝向是向右的。如果不是，你需要根据实际情况在 setRotation() 调用时添加或减去一个偏移量（例如 Math.PI / 2 或 Math.PI）。
- 精灵的锚点（Origin）：精灵的旋转是围绕其锚点进行的。默认情况下，锚点位于精灵的中心（0.5, 0.5）。如果你的精灵形状特殊，或者希望围绕其他点旋转，可以使用 setOrigin() 方法进行调整。
- 性能考虑：对于大量同时运动的精灵，频繁地创建 Phaser.Math.Vector2 对象并计算角度可能会带来轻微的性能开销。在大多数情况下，Phaser的优化足以应对。如果遇到性能瓶颈，可以考虑缓存 Vector2 对象或寻找更底层的数学优化。
- 非物理驱动的旋转：如果你的精灵不是由物理引擎驱动，而是通过 x, y 坐标或 tween 动画移动，你需要手动计算其速度向量（例如，通过比较当前帧和上一帧的位置）来确定方向。
- 动画同步：如果精灵有移动动画，确保其动画帧与当前方向相匹配，或者动画本身是方向无关的。
总结
通过上述方法，你可以在Phaser游戏中轻松实现物理精灵根据其移动方向自动旋转的功能。这不仅提升了游戏的视觉真实感和动态性，也为创建更具沉浸感的交互体验奠定了基础。无论是简单的弹跳物体还是复杂的飞行器，精确的方向控制都能让你的游戏世界更加生动。