本教程详细阐述了如何在 phaser.js 的 arcade 物理组中，使组内的每个子元素都能独立进行拖拽操作，同时保持其与世界边界及其他组员间的物理碰撞响应。核心方法是利用 `setinteractive({ draggable: true })` 为每个子元素启用交互，并通过监听 `pointerdown`、`drag` 和 `dragend` 事件来精确控制其位置，确保拖拽功能与物理系统和谐共存。
在 Phaser.js 游戏中，开发者经常需要创建一组具有物理特性的游戏对象，并希望这些对象能够独立地被用户拖拽，同时不影响它们之间的物理碰撞行为。例如，在一个由多个粒子组成的物理组中，用户可能需要单独移动某个粒子，而该粒子仍应与其他粒子或游戏世界的边界发生碰撞。本文将详细介绍如何在 Phaser.js 的 Arcade 物理系统中实现这一功能。
核心概念：启用交互与拖拽
要使物理组中的每个子元素能够独立拖拽，关键在于为每个子元素单独启用交互功能。Phaser.js 提供了 setInteractive() 方法，通过传入一个配置对象，可以方便地设置元素的交互属性。
-
为每个子元素启用交互： 在创建或迭代物理组的子元素时，对每个子元素调用 setInteractive({ draggable: true })。此方法不仅使元素可点击，还直接启用了其拖拽功能，无需额外调用 setDragable。
this.photons.children.iterate(function (child) { // ... 其他物理设置 child.setInteractive({ draggable: true }); // 启用拖拽 // ... 其他设置 }, this); // 注意传递正确的上下文 'this'请注意，iterate 方法的第二个参数用于指定回调函数的执行上下文，确保在回调函数内部能够正确访问到场景的属性（如 this.selectedPhoton）。
实现拖拽逻辑的事件监听
启用拖拽后，我们需要监听特定的输入事件来管理拖拽过程中的状态和位置更新。Phaser.js 提供了 pointerdown、drag 和 dragend 等事件，它们将是实现拖拽逻辑的核心。
-
pointerdown 事件（在子元素上）： 当用户点击或触摸某个子元素时，会触发该子元素的 pointerdown 事件。在此事件中，我们需要记录下当前被选中的子元素，以便在后续的拖拽过程中对其进行操作。
child.on('pointerdown', () => { this.selectedPhoton = child; // 保存当前被选中的子元素 });这里，this.selectedPhoton 是一个临时变量，用于在整个拖拽过程中追踪当前正在被拖拽的元素。
-
drag 事件（在 InputPlugin 上）：drag 事件由 Phaser 的输入管理器（InputPlugin）触发，它在用户拖动鼠标或手指时持续触发。在此事件中，我们将更新 this.selectedPhoton 的位置，使其跟随指针移动。
this.input.on('drag', pointer => { if (this.selectedPhoton) { this.selectedPhoton.setPosition(pointer.x, pointer.y); // 更新位置 } });setPosition 方法会直接改变游戏对象的位置。由于我们使用的是 Arcade 物理系统，setPosition 会立即更新物理体的位置，后续的物理计算（如碰撞）将基于这个新位置进行。
-
dragend 事件（在 InputPlugin 上）： 当用户停止拖拽（释放鼠标或抬起手指）时，dragend 事件会被触发。在此事件中，我们进行最终的位置更新，并清除 this.selectedPhoton 变量，表示拖拽操作已结束，没有元素处于选中状态。
this.input.on('dragend', pointer => { if (this.selectedPhoton) { this.selectedPhoton.setPosition(pointer.x, pointer.y); // 最终位置更新 this.selectedPhoton = null; // 清除选中状态 } });清除 this.selectedPhoton 是一个良好的实践，可以防止在没有实际拖拽操作时意外地修改元素位置。
与 Arcade 物理系统的集成
Phaser.js 的 Arcade 物理系统与上述拖拽逻辑能够良好地协同工作。当通过 setPosition 改变游戏对象的位置时，其关联的物理体也会立即更新。
-
设置世界边界碰撞： 为确保物理组中的子元素在拖拽后仍能与世界边界发生碰撞并反弹，需要在每个子元素的物理体上设置 collideWorldBounds = true。同时，可以监听 worldbounds 事件来更新元素在碰撞后的视觉表现，例如旋转角度。
child.body.collideWorldBounds = true; child.body.onWorldBounds = true; // 启用世界边界事件 // ... this.physics.world.on('worldbounds', (photon) => { let newAngle = (new Phaser.Math.Vector2(photon.velocity)).angle(); photon.gameObject.setRotation(newAngle); // 根据新速度方向更新旋转 }); -
处理组内元素间的碰撞： 使用 this.physics.add.collider() 方法可以方便地设置物理组内元素之间的碰撞。在碰撞回调中，同样可以根据碰撞后的速度方向更新元素的旋转角度，使其看起来更自然。
this.physics.add.collider(this.photons, this.photons, (p1, p2) => { let newAngle = (new Phaser.Math.Vector2(p1.body.velocity)).angle(); p1.setRotation(newAngle); newAngle = (new Phaser.Math.Vector2(p2.body.velocity)).angle(); p2.setRotation(newAngle); });
完整示例代码
下面是一个完整的 Phaser.js 示例，演示了如何在 Arcade 物理组中创建可拖拽的子元素，并处理它们之间的物理碰撞和世界边界碰撞。
document.body.style = 'margin:0;'; // 页面样式，确保画布顶格
var config = {
type: Phaser.AUTO,
width: 536,
height: 183,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 0 }, // 无重力
}
},
scene: { create }
};
function create () {
// 添加标题文本
this.add.text(10,10, 'Drag&Drop Demo')
.setScale(1.5)
.setOrigin(0)
.setStyle({fontStyle: 'bold', fontFamily: 'Arial'});
// 生成一个简单的三角形纹理
let graphics = this.make.graphics();
graphics.fillStyle(0xffffff);
graphics.fillTriangle(0, 0, 10, 5, 0, 10);
graphics.generateTexture('img', 10, 10);
// 创建一个物理组，并添加多个子元素
this.photons = this.physics.add.group({
key: "img",
repeat: 2, // 重复2次，总共3个元素
setXY: { x: 50, y: 50, stepX: 32 }, // 设置初始位置和步进
});
// 遍历组中的每个子元素进行设置
this.photons.children.iterate(function (child) {
child.body.bounce.set(1); // 设置弹性为1，完全反弹
child.setVelocity(Phaser.Math.Between(0, 100),30); // 随机设置初始速度
let initialAngle = (new Phaser.Math.Vector2(child.body.velocity)).angle();
child.setRotation(initialAngle); // 根据速度方向设置初始旋转
child.body.collideWorldBounds = true; // 启用与世界边界的碰撞
child.body.onWorldBounds = true; // 启用世界边界碰撞事件
child.setInteractive({ draggable: true }); // 启用拖拽
child.setScale(2); // 放大显示
// 监听子元素的 pointerdown 事件
child.on('pointerdown', () => {
this.selectedPhoton = child; // 保存当前被选中的子元素
});
}, this); // <-- 确保传递正确的上下文 'this'
// 监听全局输入插件的 drag 事件
this.input.on('drag', pointer => {
if(this.selectedPhoton){
this.selectedPhoton.setPosition( pointer.x, pointer.y); // 更新被选中元素的位置
}
});
// 监听全局输入插件的 dragend 事件
this.input.on('dragend', pointer => {
if(this.selectedPhoton){
this.selectedPhoton.setPosition( pointer.x, pointer.y); // 最终位置更新
this.selectedPhoton = null // 清除选中状态
}
})
// 监听世界边界碰撞事件，更新碰撞元素的旋转
this.physics.world.on('worldbounds', (photon) => {
let newAngle = (new Phaser.Math.Vector2(photon.velocity)).angle();
photon.gameObject.setRotation(newAngle);
});
// 设置物理组内元素之间的碰撞
this.physics.add.collider(this.photons, this.photons, (p1, p2) => {
// 碰撞后更新两个元素的旋转
let newAngle = (new Phaser.Math.Vector2(p1.body.velocity)).angle();
p1.setRotation(newAngle);
newAngle = (new Phaser.Math.Vector2(p2.body.velocity)).angle();
p2.setRotation(newAngle);
});
}
new Phaser.Game(config); // 启动游戏将上述代码与 Phaser.js 库引用结合，即可运行此示例：
注意事项与最佳实践
- 上下文绑定 (this)： 在 this.photons.children.iterate() 方法中，务必将场景的 this 作为第二个参数传递给回调函数，否则在回调函数内部将无法访问 this.selectedPhoton 等场景属性。
- 性能考量： 对于包含大量子元素的物理组，频繁的 setPosition 操作可能会对性能产生一定影响。在极端情况下，可以考虑优化拖拽逻辑，例如限制拖拽频率或在拖拽时暂时禁用部分物理计算。
- 清除选中状态： 在 dragend 事件中将 this.selectedPhoton 设置为 null 是一个良好的习惯，它确保了在没有实际拖拽发生时，不会有任何元素被错误地视为“选中”状态。
- 物理体状态： 确保在拖拽过程中，被拖拽元素的物理体（child.body.enable）保持启用状态，以便在拖拽停止后，物理系统能够继续对其施加作用力并进行碰撞检测。
总结
通过结合 Phaser.js 的 setInteractive({ draggable: true }) 方法和对 pointerdown、drag、dragend 事件的监听，我们可以在 Arcade 物理组中轻松实现对单个子元素的独立拖拽功能。这种方法不仅简单高效，而且能够与 Phaser.js 的物理系统无缝集成，确保拖拽后的元素依然能够响应物理碰撞，为用户提供直观且富有交互性的游戏体验。
