Cocos Creator 3D Runner Tutorial
Cocoos Creator 3D Runner Tutorial
Enabling 3D Colliison Detection
We need to enable collision detection so that when the player passes by the coins, they the game should detect that the player collided with the coin and so a point should be added to the score later on. For now we need to enable this collision detection mechanism.
Open the project settings as shown in the figure.
Go to the “Physics” section on the left side. Once there, scroll to the bottom and click the add button as shown in the figure below. Insert for Coin and then click again to add another section. Insert for player on the second option. Check the box that intersects the player and the coin. This will enable collisions to be picked up when these two collide.
Click on the cocos character that we are using as our player. Go to the inspector section and click the “Add Component” button. Seach for “Box Collider”. Change the center and sizes as shown in the figure. Click the “Add Component” button again. This time search for the “RigidBody”. Once added, change the type to “KINEMATIC” from dynamic. This is because we do not want gravity and other physics properties. Under the group select “Player”. The name player is coming from the project settings we did in the previous step.
Now click on the coin in the Node hierarchy and click the “Add Component”. Search for “BoxCollider” and changer the sizes to 1 on x, 2 on y and 1 on the z axis. Click on “Add Component” again and search for “RigidBody”. When it is added, change the type to “KINEMATIC” and the group to “Coin”.
Open the CoinScript and add the following code inside it. In the start function, we simply get the collider component from the coin and then switch on the collision enter detection. There are three events that we can listen for and I have included them here. These include the onCollisionEnter which is tracked when objects with colliders make contact, the onCollisionStay which is tracked while the contact occurs between the collision bodies and the onCollisionExit which is tracked when the objects stop making contact. For our case, we simply need the onCollisionEnter but I have included the others as well.
CoinScript additional code
start(){
let collider = this.node.getComponent(Collider);
// Listening to 'onCollision' Events
collider.on('onCollisionStay', this.onCollision, this);
collider.on('onCollisionEnter',this.onCollisionEnter,this);
collider.on('onCollisionExit',this.onCollisionExit,this);
}
}
private onCollisionExit (event: ICollisionEvent) {
console.log(event.type, event+"collision exited");
}
private onCollisionEnter (event: ICollisionEvent) {
console.log(event.type, event+"collision entered");
}
private onCollision (event: ICollisionEvent) {
console.log(event.type, event+"collision Stay");
}
We first switch on the event handler and then write the main function to be called when this event is triggered. This is the “onCollisionEnter” which will be run whenever the coin and the player collide. For now, the onCollisionEnter is only logging the event but later this is where we will add the code for any points the player will collect from making contact with the coins.
You can run the project and check the console to see if any of the events are logged. You might have to open some sections as some logs are within sections.
