Cocos Creator 3D Runner Tutorial
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.
Make sure that the update function in the coinscript, treescript and the roadscript is commented out as shown in the figure.
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.
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.
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.
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.