问题-js startCollision 不起作用

问题描述

我是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,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;
}

解决方法

在创建主体时设置 isSensor = true
当你这样做时，碰撞不会检测到 试试下面的代码

const body = Matter.Bodies.circle(ranX,ranY,this.BOX_SIZE,{isStatic: true,isSensor:false});

如果你想自定义检测碰撞 click on this link