Cocos Creator is a popular game development engine with rich components and tools, among which the collision system component is an important part of the engine. This component can be used to detect collisions between various elements in the game, such as player characters and enemies, bullets and obstacles, and so on.
Table of contents
1. Component introduction
Cocos Creator's collision system is implemented based on the Matter.js physics engine, and its core is a body and a collider. A rigid body is an object with properties such as mass, velocity, and position, and a collider is a collision area on the surface of the rigid body. In Cocos Creator, combine the rigid body and the collision body to form a physical entity (PhysicsBody).
There are three types of Cocos Creator's collision system components: BoxCollider, CircleCollider and PolygonCollider. BoxCollider is used to detect collisions in rectangular areas, CircleCollider is used to detect collisions in circular areas, and Polygon Collider is used to detect collisions in polygonal areas. Before using the collision system component, you need to add the node that needs to detect collision to the scene and mount the collision system component on it.
2. Component properties
2.1BoxCollider (rectangular)
- Editing: Do you need to edit this collision component (drag the collision body range in the scene editor, and the result will be reflected in Offset and Size).
- Tag: When there are multiple collision components on a node, after a collision occurs, this tag can be used to determine which collision component on the node was collided.
- Offset: The position offset of the collider.
- Size: The bounding box size of the collider.
2.2CircleCollider (circle)
- Editing: Do you need to edit this collision component (drag the collision body range in the scene editor, and the result will be reflected in Offset and Radius).
- Tag: When there are multiple collision components on a node, after a collision occurs, this tag can be used to determine which collision component on the node was collided.
- Offset: The position offset of the collider.
- Radius: The circular radius of the collision body.
2.3 PolygonCollider (polygon)
- Regenerate Points: The vertices of the corresponding outline can be automatically generated according to the pixel points of the texture of the Sprite component on the node to which the component is attached. Threshold indicates the minimum distance between the vertices of the generated map outline. The larger the value, the fewer points will be generated, which can be adjusted according to needs.
- Editing: Do you need to edit this collision component (drag the range of the collision body in the scene editor, and the result will be reflected in Offset and Points).
- Tag: When there are multiple collision components on a node, after a collision occurs, this tag can be used to determine which collision component on the node was collided.
- Offset: The position offset of the collider.
- Points: The bounding box vertices of the collider.
3. Group management
Open the Project Settings panel for settings, the location is Menu Bar -> Project -> Project Settings. After opening the Project Settings panel, you can see the configuration items of the Group List in the Group Management column, as shown in the figure below:
Click the Add Group button to add a new group, and there will be a Default group by default. Note: After the group is added, it cannot be deleted, but you can modify the name of the group arbitrarily.
The rows and columns in this table list the items in the grouping list respectively, and the modification in the grouping list will be mapped to this table in real time. You can configure which group can perform collision detection on other groups in this table. Assuming that row a and column b are checked, it means that the group on row a will perform collision detection with the group on column b. Note : After modifying the group of the node at runtime, you need to call the apply of the physical component Collider for the modification to take effect.
4. Script control
4.1 System interface
Get the collision detection system:
var manager = cc.director.getCollisionManager();
The default collision detection system is disabled. If you need to use it, you need the following method to enable the collision detection system:
manager.enabled = true;
The debug drawing of the default collision detection system is disabled. If you need to use it, you need the following method to enable debug drawing:
manager.enabledDebugDraw = true;To display the bounding box of the collision component, you can set it through the following interface:
manager.enabledDrawBoundingBox = true;4.2 Collision callback
When the collision system detects that there is a collision, it will notify the user through a callback. If the following function is implemented in the script attached to the node attached to the collision component that generated the collision, the following function will be automatically called and the relevant parameters.
Called when a collision occurs:
/**
* 当碰撞产生的时候调用
* @param {Collider} other 产生碰撞的另一个碰撞组件
* @param {Collider} self 产生碰撞的自身的碰撞组件
*/
onCollisionEnter: function (other, self) {
console.log('on collision enter');
// 碰撞系统会计算出碰撞组件在世界坐标系下的相关的值，并放到 world 这个属性里面
var world = self.world;
// 碰撞组件的 aabb 碰撞框
var aabb = world.aabb;
// 节点碰撞前上一帧 aabb 碰撞框的位置
var preAabb = world.preAabb;
// 碰撞框的世界矩阵
var t = world.transform;
// 以下属性为圆形碰撞组件特有属性
var r = world.radius;
var p = world.position;
// 以下属性为 矩形 和 多边形 碰撞组件特有属性
var ps = world.points;
},When the collision is generated and before the collision ends, it is called after each calculation of the collision result:
/**
* 当碰撞产生后，碰撞结束前的情况下，每次计算碰撞结果后调用
* @param {Collider} other 产生碰撞的另一个碰撞组件
* @param {Collider} self 产生碰撞的自身的碰撞组件
*/
onCollisionStay: function (other, self) {
console.log('on collision stay');
},Called when the collision is over:
/**
* 当碰撞结束后调用
* @param {Collider} other 产生碰撞的另一个碰撞组件
* @param {Collider} self 产生碰撞的自身的碰撞组件
*/
onCollisionExit: function (other, self) {
console.log('on collision exit');
}4.3 Click test
properties: {
collider: cc.BoxCollider
},
start () {
// 开启碰撞检测系统，未开启时无法检测
cc.director.getCollisionManager().enabled = true;
// cc.director.getCollisionManager().enabledDebugDraw = true;
this.collider.node.on(cc.Node.EventType.TOUCH_START, function (touch, event) {
// 返回世界坐标
let touchLoc = touch.getLocation();
// https://docs.cocos.com/creator/api/zh/classes/Intersection.html 检测辅助类
if (cc.Intersection.pointInPolygon(touchLoc, this.collider.world.points)) {
console.log("Hit!");
}
else {
console.log("No hit");
}
}, this);
}In general, the Collider component of the Cocos Creator engine is an important component for detecting collisions between various elements in the game. Its implementation principle is based on the Matter.js physics engine, which is mainly composed of rigid bodies and collision bodies. In order to use the Collider component, you need to add the collider and rigid body components to the nodes that need to detect collisions, and set their properties. Finally, the collision detection in the game can be realized by listening to the collision event in the script. Using the Collider component can greatly improve the playability and fun of the game, and it is an indispensable and important part of the Cocos Creator engine.