Sweshi's Tutorials

Cocoos Creator 3D Runner Tutorial

Performance Considerations for Frame Rate

So far up to this moment, we have focused on moving the world towards the player to achieve a running effect. As more things are added to the environment, it is however going to cost us a lot of performance if we keep this strategy. To make it easier on the CPU we can change the format so that the player is running towards the end of the road while the rest of the objects i.e., the coins, trees and road are stationery. This will reduce the CPU load and offer better frames per second.

To do this, we need to simply comment out all the movement code from the coinScript, the roadScript and the treeScript.

Update section of coinScript, roadScript and treeScript
/* 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); */

In all the mentioned files, the update sections that have code getting the current position and later changing the node position should be commented out as shown in the code block section. This will make all of the environment to stop moving.

Cocos Creator Tutorial: how you should edit the coinscript, treescript and roadscript

Make sure that the update function in the coinscript, treescript and the roadscript is commented out as shown in the figure.

Cocos Creator Tutorial: playerScript update function

Instead, open the playerScript and inside the “update()” function, add the movement code. The z axis will be -0.1 in this case so that the player moves forward.

Complete playerScript
import { _decorator, Component, Node,Vec3, 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; 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 //get the keyboard event onKeyDown(event:EventKeyboard){ //get the key that was pressed switch(event.keyCode){ //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; //check if the right arrow key is bring pressed case KeyCode.ARROW_RIGHT: 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; //check if the right arrow key is nologer being pressed case KeyCode.ARROW_RIGHT: 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); } }

When this is done and you run the project, you will see that the performance would have improved because the game is only moving the player rather than the rest of the world.

Cocos Creator Tutorial: player running out of the screen

This however introduces a new problem where the camera remains behind as the player runs out of the screens view. To correct this, go to the cocos editor.

Cocos Creator Tutorial: making the camera follow the player.

To make the camera follow the player, we will add a “CameraMovement” script that will be moving at the same speed as the player.

CameraMovement Script
import { _decorator, Component, Node,Vec3 } from 'cc'; const { ccclass, property } = _decorator; @ccclass('CameraMovement') export class CameraMovement extends Component { start() { } update(deltaTime: number) { 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); } }

The code is exactly the same as the one making the player move.

Cocos Creator Tutorial: add the script to the camera.

Add the script to the camera by clicking on the “Main Camera” in the node hierarchy and then going to the inspector panel. From there, click the “Add Component” and search for “CameraMovement”. This will add it to the script and the movement of the camera will be fine. If you run the project now, you will see that the project will perform better in terms of frames per second and both the camera and player will still be moving. The key lesson is that you have to find ways to reduce the computation for your game to perform well especially on low end devices.