Cocos Creator 3D Runner Tutorial
Cocoos Creator 3D Runner Tutorial
Adding the Player Scores
In this section we need to keep track of how many coins the player has been able to collect and this will be used as our score.
To add a score, right click on the “Game” scene->Create->2D Object->Label. Name the label as Score.
This will create a new Canvas and will place the “Score” label inside it. This is because UI objects are rendered under a 2D canvas.
Click on the "Score" label and change the position to have a 0 on the x axis, 300 on the y axis and 0 on the z axis.
You can change some aspects of the label particularly the “String” should have the relevant text as shown in the figure, you can change the font-size, font-family and even make it bold as I have.
Open the playerScript
Inside the player script, we first add a variable that will keep the score of the player. We have named this as “score” and it has been initialised to 0. We then need to store the Label component from the editor so we create a property for it. Next, we switch on the event listeners for collision detection with the onCollisionExit, onCollisionEnter and onCollision. These work exactly as the coin script. We need the script to be adding 1 whenever a coin is hit by the player. Because of this, we created an “addScore” function that is adding 1 to the score and setting the label string the score’s current value. We also make sure that the “onCollisionEnter” function calls this “addScore” function so that every time the player and coin collide, the addScore function is called and the score is updated by adding one and displaying it to the screen.
Complete playerScript
import { _decorator, Component,Label, Node,Vec3,
Collider,ICollisionEvent, EventKeyboard,KeyCode,
input, Input, Event } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('PlayerScript')
export class PlayerScript extends Component {
//store the status of the right arrow key being pressed.
//Store true if the right arrow key is pressed
private isRightKeyPressed: boolean = false;
//store the status of the left arrow key being pressed.
// Store true if the left arrow key is pressed
private isLeftKeyPressed: boolean = false;
private score:number = 0;
@property(Label)
scoreLabel:Label = null;
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");
this.addScore();
}
private onCollision (event: ICollisionEvent) {
console.log(event.type, event+"collision Stay");
}
addScore(){
this.score++;
this.scoreLabel.string = "Score :"+this.score;
}
onLoad(){
//listening for key presses
input.on(Input.EventType.KEY_DOWN,this.onKeyDown,this);
//listening for key releases
input.on(Input.EventType.KEY_UP,this.onKeyUp,this);
}
onDestroy(){
//switching off the keyboard event listener when the game closes
input.off(Input.EventType.KEY_DOWN,this.onKeyDown,this);
input.off(Input.EventType.KEY_UP,this.onKeyUp,this);
}
//what to do when a key is pressed
onKeyDown(event:EventKeyboard){//get the keyboard event
switch(event.keyCode){//get the key that was pressed
//check if the left arrow key was pressed
case KeyCode.ARROW_LEFT:
//log that the left arrow key was pressed
console.log("pressed the left key");
//set the status to true for the left key being pressed
this.isLeftKeyPressed = true;
break;
case KeyCode.ARROW_RIGHT:
//check if the right arrow key is bring pressed
console.log("pressed the right key");
//set the status to true for the right key being pressed
this.isRightKeyPressed = true;
break;
}
}
//what to do when we stop pressing the arrow keys (when we release the keys)
onKeyUp(event:EventKeyboard){
//Store the default rotation of the player
const targetRotation = new Vec3(0, 180, 0);
switch(event.keyCode){
//check if the left arrow key is nolonger being pressed
case KeyCode.ARROW_LEFT:
console.log("released the left key");
//set the status to false for the left key being pressed
this.isLeftKeyPressed = false;
//set the player rotation back to the default of 180
this.node.eulerAngles = targetRotation;
break;
case KeyCode.ARROW_RIGHT:
//check if the right arrow key is nologer being pressed
console.log("released the right key");
//set the player rotation back to the default of 180
this.node.eulerAngles = targetRotation;
//set the status to false for the right key being pressed
this.isRightKeyPressed = false;
break;
}
}
update(deltaTime: number) {
//check if the right arrow key is being pressed and if the player is not too far on the right i.e beyond 4.5
if(this.isRightKeyPressed && this.node.position.x<4.5){
//get the current position of the player
const currentPosition = this.node.position;
// Move the character to the right by 0.1
const moveAmount = new Vec3(0.1, 0, 0);
// Add the move amount to the current position
Vec3.add(currentPosition, currentPosition, moveAmount);
// Update the position of the node
this.node.setPosition(currentPosition);
//set rotation to 135 so that the player slightly faces the right
const targetRotation = new Vec3(0, 135, 0);
this.node.eulerAngles = targetRotation;
}
//check if the left arrow key is being pressed and if the player is not too far on the left i.e beyond -4.5
if(this.isLeftKeyPressed && this.node.position.x>-4.5){
const currentPosition = this.node.position;
//Move the character to the left by 0.1
const moveAmount = new Vec3(-0.1, 0, 0);
// Add the move amount to the current position
Vec3.add(currentPosition, currentPosition, moveAmount);
// Update the position of the node
this.node.setPosition(currentPosition);
//set rotation to 225 so that the player slightly faces the left
const targetRotation = new Vec3(0, 225, 0);
this.node.eulerAngles = targetRotation;
}
const currentPosition = this.node.position;
//Move the character to the left by 0.1
const moveAmount = new Vec3(0, 0, -0.1);
// Add the move amount to the current position
Vec3.add(currentPosition, currentPosition, moveAmount);
// Update the position of the node
this.node.setPosition(currentPosition);
}
}
Click on the cocos node and drag the “Score” label to the “PlayerScript” to the score label section as shown in the figure.
Try running the project now and see that the score is updating every time you run through the coins.
