当前位置：首页 > article >正文

【前端】Matter：过滤与高级碰撞检测

article 2024/10/21 18:53:39

在物理引擎中，控制物体的碰撞行为是物理模拟的核心之一。Matter.js 提供了强大的碰撞检测机制和碰撞过滤功能，让开发者可以控制哪些物体能够相互碰撞，如何处理复杂的碰撞情况。本文将详细介绍 碰撞过滤 (Collision Filtering) 与 高级碰撞检测 (Advanced Collision Detection)，并通过实例展示如何在应用中使用这些技术。

碰撞过滤 (Collision Filtering)

碰撞过滤 是一种控制物体是否会相互碰撞的机制。通过设置物体的碰撞过滤属性，我们可以定义不同的规则来实现复杂的碰撞逻辑。例如，我们可以让某些物体只与特定物体碰撞，或者禁止它们与其他物体发生碰撞。

碰撞过滤的基本概念

在 Matter.js 中，每个刚体都有一个 collisionFilter 属性，该属性包含以下三个关键值：

category: 碰撞类别，一个物体可以属于多个类别。
mask: 碰撞掩码，决定该物体能与哪些类别碰撞。
group: 碰撞组，物体可以分配到同一碰撞组内，组内物体是否相互碰撞由组的数值决定。

每个物体都有默认的 category 和 mask，其中默认情况下，所有物体的 category 都是 0x0001，mask 是 0xFFFFFFFF（可以与所有类别碰撞）。

设置碰撞类别和掩码

通过自定义 category 和 mask，可以灵活控制物体之间的碰撞关系。例如，如果我们希望某些物体只与特定类别的物体发生碰撞，可以使用以下代码：

const { Engine, Render, Runner, World, Bodies } = Matter;

// 创建引擎和渲染器
const engine = Engine.create();
const render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: 800,
    height: 600,
    wireframes: false
  }
});

// 定义碰撞类别
const defaultCategory = 0x0001;
const categoryA = 0x0002;
const categoryB = 0x0004;

// 创建物体并分配类别和掩码
const ballA = Bodies.circle(300, 200, 40, {
  collisionFilter: {
    category: categoryA,
    mask: categoryB // 只与类别B的物体碰撞
  }
});

const ballB = Bodies.circle(500, 200, 40, {
  collisionFilter: {
    category: categoryB,
    mask: categoryA // 只与类别A的物体碰撞
  }
});

const ground = Bodies.rectangle(400, 600, 810, 60, { isStatic: true });

World.add(engine.world, [ballA, ballB, ground]);

Engine.run(engine);
Render.run(render);

在这个例子中，ballA 属于类别 categoryA，它的 mask 设为 categoryB，这意味着它只会与属于类别 categoryB 的物体碰撞。同样，ballB 也只会与属于 categoryA 的物体碰撞，而不与其他类别的物体碰撞。

碰撞组

除了 category 和 mask，还可以使用 group 来实现更精细的碰撞控制。碰撞组 (Collision Groups) 允许将多个物体分配到同一个组，并控制组内物体的碰撞行为。不同于 category 和 mask，group 的值可以是正数或负数：

正数：组内物体相互碰撞。
负数：组内物体不会相互碰撞。

例如，我们可以创建一个由多个部件组成的物体（如车轮和车身），并使其在物体内部不会发生碰撞，但可以与外部的物体发生碰撞。

const wheelA = Bodies.circle(300, 400, 40, {
  collisionFilter: {
    group: -1
  }
});

const wheelB = Bodies.circle(500, 400, 40, {
  collisionFilter: {
    group: -1
  }
});

const ground = Bodies.rectangle(400, 600, 810, 60, { isStatic: true });

// 轮子和地面会发生碰撞，但两个轮子之间不会
World.add(engine.world, [wheelA, wheelB, ground]);

Engine.run(engine);
Render.run(render);

在这里，wheelA 和 wheelB 都属于碰撞组 -1，因此它们不会相互碰撞，但它们可以与其他物体（例如地面）发生碰撞。

高级碰撞检测 (Advanced Collision Detection)

Matter.js 中的高级碰撞检测功能允许你检测并处理更加复杂的碰撞事件，比如检测特定物体的碰撞、获取碰撞接触点、以及响应特定碰撞事件。

监听碰撞事件

Matter.js 提供了事件监听器，可以在物体发生碰撞时触发特定的回调函数。以下是常用的三个碰撞事件：

collisionStart: 两个物体开始碰撞时触发。
collisionActive: 两个物体在碰撞过程中持续触发。
collisionEnd: 两个物体碰撞结束时触发。

你可以通过 Matter.Events.on() 来监听这些碰撞事件。例如：

Matter.Events.on(engine, 'collisionStart', function(event) {
  const pairs = event.pairs;

  pairs.forEach(pair => {
    const { bodyA, bodyB } = pair;
    console.log(`Collision detected between ${bodyA.label} and ${bodyB.label}`);
  });
});

在这个例子中，当两个物体开始碰撞时，会在控制台中输出相关信息。

检测碰撞的详细信息

当物体发生碰撞时，Matter.js 提供了关于碰撞点、碰撞深度等的详细信息。你可以使用这些信息来实现更加细致的碰撞处理。

以下是一个例子，展示如何获取碰撞的接触点：

Matter.Events.on(engine, 'collisionStart', function(event) {
  const pairs = event.pairs;

  pairs.forEach(pair => {
    const { bodyA, bodyB, collision } = pair;
    const { supports } = collision;

    console.log(`Collision point: x=${supports[0].x}, y=${supports[0].y}`);
  });
});

supports 是碰撞的接触点坐标数组，你可以使用这些坐标来执行更多的逻辑，比如根据碰撞点触发爆炸、声音效果或粒子效果。

手动处理碰撞

除了依赖引擎的自动处理，你还可以通过监听事件手动修改物体的碰撞行为。以下是一个示例，展示如何在物体碰撞时改变物体的颜色：

Matter.Events.on(engine, 'collisionStart', function(event) {
  const pairs = event.pairs;

  pairs.forEach(pair => {
    pair.bodyA.render.fillStyle = '#FF0000';
    pair.bodyB.render.fillStyle = '#FF0000';
  });
});

在这个例子中，当两个物体发生碰撞时，它们的颜色会变成红色。通过这种方式，你可以根据碰撞的结果来实现自定义的视觉效果。

碰撞的条件过滤

有时我们只想对特定的碰撞进行处理，而忽略其他的碰撞。可以通过在事件监听器中添加条件过滤来实现这一点。例如，如果你只想处理特定物体的碰撞，可以这样实现：

Matter.Events.on(engine, 'collisionStart', function(event) {
  const pairs = event.pairs;

  pairs.forEach(pair => {
    if (pair.bodyA.label === 'ball' && pair.bodyB.label === 'ground') {
      console.log('Ball hit the ground!');
    }
  });
});