Phaser.js 物理组中可拖拽子对象的实现教程

本教程详细介绍了如何在 phaser.js 的 arcade 物理组中实现可单独拖拽的子对象，同时确保它们能继续与其他物理对象发生碰撞。核心方法是利用 `setinteractive({ draggable: true })` 为每个子对象启用交互性，并通过监听 `pointerdown`、`drag` 和 `dragend` 事件来精确控制对象的拖拽行为和位置更新。文章将提供完整的代码示例和关键步骤解析，帮助开发者轻松掌握这一功能。

在 Phaser.js 游戏中，开发者经常需要创建包含多个物理对象的组，并希望这些组内的每个成员都能独立地被用户拖拽，同时仍能保持其物理特性，例如与其他对象或世界边界的碰撞。本文将详细阐述如何在 Arcade 物理系统下，实现一个物理组中子对象的独立拖拽功能。

核心原理

实现物理组中子对象的独立拖拽，主要依赖于 Phaser.js 的输入系统和交互功能。关键步骤包括：

1. 启用交互性： 为每个需要拖拽的子对象启用交互性，并明确声明其可拖拽。
2. 监听输入事件： 捕获 pointerdown（鼠标按下）、drag（拖拽中）和 dragend（拖拽结束）事件。
3. 管理选中状态： 在 pointerdown 事件中记录当前被选中的对象，在 drag 事件中更新其位置，并在 dragend 事件中清除选中状态。

实现步骤详解

1. 配置 Phaser 游戏与物理系统

首先，需要设置一个基本的 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);

2. 创建物理组和子对象

在 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'
}

3. 启用子对象的拖拽功能

这是实现拖拽的核心部分。在遍历子对象时，我们需要为每个 child 调用 setInteractive() 方法，并传入 { draggable: true } 选项。然后，为每个子对象绑定 pointerdown 事件监听器，用于记录当前被选中的对象。

// 在 this.photons.children.iterate 回调函数内部：
      child.setInteractive({ draggable: true }); // 启用交互并设置为可拖拽

      child.on('pointerdown',  () => {
        this.selectedPhoton = child; // 在鼠标按下时，将当前子对象保存为选中对象
      });

注意： 当 setInteractive 传入 { draggable: true } 时，无需再单独调用 setDragable 方法。

4. 处理拖拽事件

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; // 清除选中对象
        }
    });

5. 保持物理特性（碰撞）

尽管我们直接设置了对象的位置来实现拖拽，但由于这些对象仍是物理组的一部分，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 示例。

注意事项与总结

1. 上下文绑定 (this)： 在 this.photons.children.iterate 方法中，务必将 this 作为第二个参数传递，以确保回调函数内部的 this 正确指向场景对象。
2. setInteractive 与 draggable 选项： 使用 child.setInteractive({ draggable: true }) 是最简洁的启用拖拽的方式，它会自动处理许多底层细节。
3. 物理交互： 当你直接通过 setPosition 改变一个物理对象的位置时，它会覆盖物理引擎在该帧计算出的位置。这意味着在拖拽过程中，对象的物理速度可能会被忽略，但一旦拖拽结束（dragend 事件之后），物理引擎会重新接管并根据其当前位置和速度继续进行物理模拟和碰撞检测。
4. 旋转更新： 示例中在碰撞发生后更新了对象的旋转角度，使其方向与当前速度向量保持一致，这增强了视觉上的真实感。
5. Arcade Physics 与 Matter.js： 本教程专注于 Phaser 默认的 Arcade Physics 引擎。如果使用 Matter.js，拖拽实现方式会有所不同，通常会通过操作 Matter.js 物理体上的约束（constraint）或直接设置位置来实现。

通过上述步骤和代码示例，你现在应该能够成功地在 Phaser.js 的 Arcade 物理组中实现可单独拖拽的子对象，同时保持其物理碰撞行为。这种方法为游戏中的各种交互元素（如可移动的物品、可操作的角色等）提供了强大的基础。