How does Cocos Creator handle physics and collision detection?

cocos creator version:v3.6.1

Cocos Creator 3.x implements collision detection

Cocos Creator handles physics and collision detection by using a physics engine. Cocos Creator uses the Box2D physics engine by default, and also supports the Chipmunk physics engine. Here are the basic steps to handle physics and collision detection:

1. Create a physical world: Add a physical component to the scene, which will automatically create a physical world.

2. Add 刚体组件: Add rigid body components to nodes that need to add physical effects. A rigid body is an object in the physical world, and properties such as mass, friction, and elasticity can be set ( click the official document to view rigid body properties ).

3. Add 碰撞体组件: Add a collision body component to the rigid body node to detect collisions. Cocos Creator supports various types of collision bodies, such as rectangles, circles, polygons, etc. (click the official document to view collision components) .

4. Handle collision events ( 碰撞回调函数): by adding a collision callback function, execute the corresponding logic when a collision occurs between nodes. The detailed information of the collision can be obtained in the collision callback function, such as the type of the collision body, the collision point, the collision normal, etc. ( click the official document to view the collision callback ).

Here is a simple example showing how to handle physics and collision detection in Cocos Creator:

5. Create a scene and add a physics component.

6. Add two nodes in the scene, add 刚体and 碰撞体components respectively:

insert image description here
按照需求选择对应刚体类型( Click the official document to view the rigid body type )

7. Turn on collision monitoring:

Only when the collision monitoring of the rigid body is turned on, will the corresponding component be called back when the rigid body collides

insert image description here

//代码开启
rigidbody.enabledContactListener = true;

8. Add a collision callback function to one of the nodes:

@ccclass('TestContactCallBack')
export class TestContactCallBack extends Component {
    
    
    start () {
    
    
        // 注册单个碰撞体的回调函数
        let collider = this.getComponent(Collider2D);
        if (collider) {
    
    
            collider.on(Contact2DType.BEGIN_CONTACT, this.onBeginContact, this);
            collider.on(Contact2DType.END_CONTACT, this.onEndContact, this);
            collider.on(Contact2DType.PRE_SOLVE, this.onPreSolve, this);
            collider.on(Contact2DType.POST_SOLVE, this.onPostSolve, this);
        }

        // 注册全局碰撞回调函数
        if (PhysicsSystem2D.instance) {
    
    
            PhysicsSystem2D.instance.on(Contact2DType.BEGIN_CONTACT, this.onBeginContact, this);
            PhysicsSystem2D.instance.on(Contact2DType.END_CONTACT, this.onEndContact, this);
            PhysicsSystem2D.instance.on(Contact2DType.PRE_SOLVE, this.onPreSolve, this);
            PhysicsSystem2D.instance.on(Contact2DType.POST_SOLVE, this.onPostSolve, this);
        }
    }
    onBeginContact (selfCollider: Collider2D, otherCollider: Collider2D, contact: IPhysics2DContact | null) {
    
    
        // 只在两个碰撞体开始接触时被调用一次
        console.log('onBeginContact');
    }
    onEndContact (selfCollider: Collider2D, otherCollider: Collider2D, contact: IPhysics2DContact | null) {
    
    
        // 只在两个碰撞体结束接触时被调用一次
        console.log('onEndContact');
    }
    onPreSolve (selfCollider: Collider2D, otherCollider: Collider2D, contact: IPhysics2DContact | null) {
    
    
        // 每次将要处理碰撞体接触逻辑时被调用
        console.log('onPreSolve');
    }
    onPostSolve (selfCollider: Collider2D, otherCollider: Collider2D, contact: IPhysics2DContact | null) {
    
    
        // 每次处理完碰撞体接触逻辑时被调用
        console.log('onPostSolve');
    }
}

说明：注意刚体类型一定要选择好，两个节点都是static是无法触发碰撞回调( See Response Constraints for Different Rigid Body Types )

Not all types of rigid bodies can collide with each other. The results are as follows:

–	Static	Dynamic	Kinematic	Animated
Static		√	√	√
Dynamic	√	√	√	√
Kinematic	√	√	√	√
Animated	√	√	√	√

    9. Add the code to the node, as follows:
insert image description here
    10. The result shows that

    the blue five-pointed star can be moved through the slow motion system. The code is for example:

tween(this.node.getChildByName("Block")).to(1,{
    
    
    	position:new Vec3(200,0,0)
 }).start();

Through the above steps, you can handle physics and collision detection in Cocos Creator. More complex physical effects and collision detection can be achieved by adjusting the properties of rigid bodies and colliders and adding more collision callback functions.

最后，如果有些需求不要物理碰撞效果的话，在Collider2D(如BoxCollider2D),设置属性：sensor
sensor : boolean 一个传感器类型的碰撞体会产生碰撞回调，但是不会发生物理碰撞效果。