本教程详细介绍了如何在 phaser.js 的 arcade 物理组中实现可单独拖拽的子对象，同时确保它们能继续与其他物理对象发生碰撞。核心方法是利用 `setinteractive({ draggable: true })` 为每个子对象启用交互性，并通过监听 `pointerdown`、`drag` 和 `dragend` 事件来精确控制对象的拖拽行为和位置更新。文章将提供完整的代码示例和关键步骤解析，帮助开发者轻松掌握这一功能。
在 Phaser.js 游戏中，开发者经常需要创建包含多个物理对象的组，并希望这些组内的每个成员都能独立地被用户拖拽，同时仍能保持其物理特性，例如与其他对象或世界边界的碰撞。本文将详细阐述如何在 Arcade 物理系统下，实现一个物理组中子对象的独立拖拽功能。
实现物理组中子对象的独立拖拽，主要依赖于 Phaser.js 的输入系统和交互功能。关键步骤包括：
首先，需要设置一个基本的 Phaser 游戏配置，并启用 Arcade 物理引擎。
document.body.style = 'margin:0;';
var config = {
type: Phaser.AUTO,
width: 536,
height: 183,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 0 }, // 设置重力为0，以便对象自由移动
}
},
scene: { create }
};
new Phaser.Game(config);在 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, // 重复两次，总共创建3个对象
setXY: { x: 50, y: 50, stepX: 32 }, // 设置初始位置和步长
});
// 遍历组中的每个子对象进行初始化
this.photons.children.iterate(function (child) {
child.body.bounce.set(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.setScale(2); // 放大显示
// ... 拖拽相关的交互设置将在下一步进行
}, this); // 注意传递上下文 'this'
}这是实现拖拽的核心部分。在遍历子对象时，我们需要为每个 child 调用 setInteractive() 方法，并传入 { draggable: true } 选项。然后，为每个子对象绑定 pointerdown 事件监听器，用于记录当前被选中的对象。
// 在 this.photons.children.iterate 回调函数内部：
child.setInteractive({ draggable: true }); // 启用交互并设置为可拖拽
child.on('pointerdown', () => {
this.selectedPhoton = child; // 在鼠标按下时，将当前子对象保存为选中对象
});注意： 当 setInteractive 传入 { draggable: true } 时，无需再单独调用 setDragable 方法。
Phaser 的 InputPlugin 会在全局范围内触发 drag 和 dragend 事件。我们需要监听这两个事件来更新选中对象的位置，并在拖拽结束后清除选中状态。
// 在 create 函数的末尾，遍历循环之后
this.input.on('drag', pointer => {
if(this.selectedPhoton){
this.selectedPhoton.setPosition( pointer.x, pointer.y); // 拖拽时更新选中对象的位置
}
});
this.input.on('dragend', pointer => {
if(this.selectedPhoton){
this.selectedPhoton.setPosition( pointer.x, pointer.y); // 拖拽结束时再次更新位置
this.selectedPhoton = null; // 清除选中对象
}
});尽管我们直接设置了对象的位置来实现拖拽，但由于这些对象仍是物理组的一部分，Phaser 的物理引擎会继续处理它们的碰撞。
// 在 create 函数中添加碰撞处理
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);
});将以上所有代码片段组合起来，即可得到一个完整的、可运行的 Phaser.js 示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phaser Physics Group Draggable Children</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: 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,
setXY: { x: 50, y: 50, stepX: 32 },
});
this.photons.children.iterate(function (child) {
child.body.bounce.set(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);
child.on('pointerdown', () => {
this.selectedPhoton = child; // 记录选中对象
});
}, this); // <-- 确保传递上下文 'this'
this.input.on('drag', pointer => {
if(this.selectedPhoton){
this.selectedPhoton.setPosition( pointer.x, pointer.y); // 拖拽时更新位置
}
});
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);
</script>
</body>
</html>通过上述步骤和代码示例，你现在应该能够成功地在 Phaser.js 的 Arcade 物理组中实现可单独拖拽的子对象，同时保持其物理碰撞行为。这种方法为游戏中的各种交互元素（如可移动的物品、可操作的角色等）提供了强大的基础。
以上就是Phaser.js 物理组中可拖拽子对象的实现教程的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
181
收藏
