Sweshi's Tutorials

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.

Cocos Creator Tutorial:adding the label

To add a score, right click on the “Game” scene->Create->2D Object->Label. Name the label as Score.

Cocos Creator Tutorial: the label

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.

Cocos Creator Tutorial: score properties

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.

Cocos Creator Tutorial: label properties

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

Cocos Creator Tutorial: player script

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.

Cocos Creator Tutorial: updating the cocos node

Try running the project now and see that the score is updating every time you run through the coins.

Cocos Creator Tutorial: trying out the score