javascript - The matter-js startCollision is not working

Question

I am new to matter-js and am attempting to build a simple game using react native, react native game engine, and matter-js.

The game is circles appear on screen and they are growing. The user needs to pop them before they touch one another. I have the bubbles growing and built my own collision detection method. However, it does not work perfectly and the bubbles will overlap a little or just barely not touch and the collision detection will trigger. I saw that Matter-js has a built in collision detection for bodies but I can not figure out how to get it to work, the code is below:

When the bubbles grow and collide I would think it would trigger the startCollision callback in createWorld.

Thank you everyone in advanced.

Render Game Engine

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()}/>)

Create World and start off with 0 circles.

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
        },
    }
}

Add Circles

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;
}

Grow Circles

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

等待大神答复