matter-js startCollision 不起作用

Question

我是 Matter-js 新手，正在尝试使用 React Native、React Native 游戏引擎和 Matter-JS 构建一个简单的游戏。

游戏是屏幕上出现圆圈，并且它们正在变大。用户需要在它们相互接触之前将它们弹出。 我让气泡不断生长并建立了自己的碰撞检测方法。然而，它并不能完美地工作，气泡会稍微重叠或几乎不接触，并且碰撞检测将会触发。 我看到 Matter-js 有一个内置的物体碰撞检测功能，但我不知道如何让它工作，代码如下：

当气泡长大并碰撞时，我认为它会触发 createWorld 中的

startCollision

回调。

提前谢谢大家。

渲染游戏引擎

return (<GameEngine style={styles.container}
                        ref={(ref) => {
                            this.GAME_ENGINE = ref;
                        }}
                        running={running}
                        onEvent={this.onEvent}
                        systems={[Physics, this.AddCircles, this.PopBubble, this.GrowCircles, this.CheckCollision]}
                        entities={this.createWorld()}/>)

创建世界并从 0 个圆圈开始。

createWorld = () => {
    const engine = Matter.Engine.create({enableSleeping: false});

    const world = engine.world;
    Matter.World.add(world, []);

    Matter.Events.on(engine, 'collisionStart', (event) => {
        let pairs = event.pairs;
        this.GAME_ENGINE.dispatch({type: "game-over"});
        console.log("Collision", pairs);
    });

    return {
        physics: {
            engine: engine,
            world: world
        },
    }
}

添加圈子

AddCircles = (entities: any, {touches, screen, layout, time}: any) => {

    if (!this.canAddNewCircle(time)) {
        return entities;
    }

    let available = false;
    let ranX = Math.round((Math.random() * screen.width * .8) + (screen.width * .1) - this.BOX_SIZE);
    let ranY = Math.round((Math.random() * screen.height * .8) + (screen.height * .1) - this.BOX_SIZE);

    // Attempted to use isSensor, still does not work.
    const body = Matter.Bodies.circle(ranX, ranY, this.BOX_SIZE, {isStatic: true, isSensor: true});
    const id = `circle-${Math.random() * 1000}`;

    entities[id] = {
        body: body,
        originalX: ranX,
        originalY: ranY,
        size: [this.BOX_SIZE, this.BOX_SIZE],
        color: this.circleIdSet.size % 2 == 0 ? "pink" : "#B8E986",
        renderer: Bubble
    };

    Matter.World.addBody(entities.physics.world, body);

    this.circleIdSet.add(id);
    this.setState({timeSinceLastCircleAdd: time.current});
    return entities;
}

扩大圈子

GrowCircles = (entities: any, {touches, screen, layout, time}: any) => {

    let circle;
    this.circleIdSet.forEach((key: any) => {
        circle = entities[key];
        Matter.Body.set(circle.body, "circleRadius", circle.body.circleRadius + .2)
        Matter.Body.setPosition(circle.body, {
            x: circle.originalX - circle.body.circleRadius,
            y: circle.originalY - circle.body.circleRadius
        });
    });

    return entities;
}

Answer 1

观看一些演示

1. 未定义碰撞，自动碰撞（组 = -1） https://brm.io/matter-js/demo/#mixed

2. 定义的掩模+类别-用于精确碰撞 https://brm.io/matter-js/demo/#collisionFiltering

3. 未定义碰撞、回调事件（组 = -1） - 可能最适合您 https://brm.io/matter-js/demo/#sensors

4. 集体碰撞，

   group = Body.nextGroup(true)

   https://brm.io/matter-js/demo/#car 所有分组在我们之间不会发生冲突，但可以与其他组发生冲突。

我的例子 https://mlich.zam.slu.cz/js-matter/js-sorter/mechanical-sorter.htm