Matter.js 禁用不同组合之间的碰撞答案

【问题标题】：Matter.js disable collision between different compositesMatter.js 禁用不同组合之间的碰撞
【发布时间】：2017-01-02 13:42:55
【问题描述】：

我正在尝试使用"Matter.js body documentation" 中描述的碰撞过滤。但是，对于我的项目，我需要禁用不同复合对象之间的碰撞。所以只有在同一个复合体中的物体才会发生碰撞。我计划拥有超过 32 个 Composites（32 是 Matter.js 提供的最大碰撞类别数量）。我将如何实现这一目标？

// module aliases
var Engine = Matter.Engine,
    Render = Matter.Render,
    World = Matter.World,
    Bodies = Matter.Bodies,
    Body = Matter.Body,
    Vector = Matter.Vector,
    Composite = Matter.Composite,
    Constraint = Matter.Constraint,
    MouseConstraint = Matter.MouseConstraint;

// create an engine
var engine = Engine.create();

// create a renderer
var container = document.getElementById("container");
var canvas = document.getElementById("maincanvas");

var render = Render.create({
    element: container,
    canvas: canvas,
    engine: engine,
    options: {
        height: 400,
        width: 400,
        wireframes: false
    }
});

// This makes collision much easier to test
engine.world.gravity = {x:0, y:0};

// Add a mouseconstraint to test
var mc = MouseConstraint.create(engine, {
    element: render.canvas
});
Composite.add(engine.world, mc);

var bodies1 = []
var bodies2 = []
var xpos = 30
var ypos = 30
for (var i = 0; i < 5; i++){
    bodies1.push(Bodies.circle(xpos, ypos, 10, {
        collisionFilter: {
            group:-1
        },
        render: {
            fillStyle: "blue"
        }
    })
    );
    xpos += 30;
}
for (var i = 0; i < 5; i++){
    bodies2.push(Bodies.circle(xpos, ypos, 10, {
        collisionFilter: {
            group:-1
        },
        render: {
            fillStyle: "red"
        }
    })
    );
    xpos += 30;
}

var composite1 = Composite.create();
Composite.add(composite1, bodies1);
var composite2 = Composite.create();
Composite.add(composite2, bodies2);

Composite.add(engine.world, [composite1, composite2]);

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

通过这种方式，我可以禁用合成之间的碰撞，但这也禁用了合成“内部”的碰撞。我可以用collisionFilter.category 系统做到这一点，但它如何与超过 32 个复合材料一起工作？

【问题讨论】：

标签： javascript physics-engine matter.js

【解决方案1】：

在复合层不支持碰撞过滤，您需要在主体层处理它。为了使这更易于管理，只需创建一些复合辅助函数，例如compositeSetCollisionFilter(composite, filter) 并迭代 Composite.allBodies(composite)。

关于 32 个类别的限制，这是由于 bitwise implementation（据说是为了性能，尽管我怀疑它在现实中是否很重要）。我在项目中提出了一个关于reconsidering this 的问题。

现在有一种方法可以获得更多，但如果您将Matter.Detector.canCollide(filterA, filterB) 替换为您自己的可以比较两个body.collisionFilter 对象的函数。有了这个，您可以对body.collisionFilter 对象使用您喜欢的任何方案。

【讨论】：