Cocos Creator 3D Runner Tutorial
Cocoos Creator 3D Runner Tutorial
Generating the tree around the road
For us to generate the tree randomly, we need to firstly create a prefab of the tree. To do this, we simply drag the maple tree from the node hierarchy to the prefabs folder.
We can then use this maple tree prefab in the game manager so that it can be generated randomly. Open the “GameManager” script.
Create the “treePrefab” property just on top of the “onLoad()” function. Save the script and go back to the editor.
Click on the Game Manager from the Node hierarchy so that we see the section for the “Tree Prefab”. Drag the maple tree prefab to the “Tree Prefab” section as shown in the figure. Now go back to the GameManager Script and add the following for loop in the “onLoad()” function.
GameManager code for the onLoad() function
for(let b = 0; b<100; b++){
//left side of the road
const instantiatedTree = instantiate(this.treePrefab);
//possible positions for the tree
const options = [-6.5,-6.8,-7,-7.3,-7.5];
//pick one position
const randomNumber2 = this.getRandomNumber(options);
//put the tree in that position
instantiatedTree.setPosition(randomNumber2,0,b * -10);
//set rotation
//pick a random number from 0 to 360
const randomInteger = Math.floor(Math.random() * 360);
// Adjust the rotation values as needed
const rotationEuler = new Vec3(0,randomInteger, 0);
//make the tree rotate to that value
instantiatedTree.setRotationFromEuler(rotationEuler);
this.node.addChild(instantiatedTree);
//right side of the road
const instantiatedTree2 = instantiate(this.treePrefab);
const options3 = [6.5,6.8,7,7.3,7.5];
const randomNumber3 = this.getRandomNumber(options3);
instantiatedTree2.setPosition(randomNumber3,0,b * -10);
//set rotation
const randomInteger2 = Math.floor(Math.random() * 360);
// Adjust the rotation values as needed
const rotationEuler2 = new Vec3(0,randomInteger2, 0);
instantiatedTree2.setRotationFromEuler(rotationEuler2);
this.node.addChild(instantiatedTree2);
}
I have written the specifics after each line of code. I will explain the overall code here. Firstly the trees need to be generated on the left and right side of the road. I have used a for loop because I want 100 trees on each side. At this point the project will start using more computing resources in terms of ram and CPU power so you might adjust as you see fit.
We instantiate the tree prefab as “instantiatedTree”. We then set options for where the tree should be placed starting from -6.5 up to -7.5. We pick a number in that range as the x position for the tree. On the right side the numbers are all positive while on the left as seen from the figure, the numbers are all negative. We then set the position of the tree on the x axis as a randomly picked number from that range. Next, we need to set the rotation of the tree randomly so that the trees should not look too similar. To do this, we pick a random number from 0 to 360. We use that number to set a y rotation on the node. We then add the node to the game.
Complete “GameManager” Script
import { _decorator, Vec3,Collider,BoxCollider,
PhysicsSystem,ICollisionEvent,ITriggerEvent,
Component, instantiate, Node, Prefab } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('GameManager')
export class GameManager extends Component {
// we will use this to drag the prefab
// to the game manager in the editor
@property(Prefab)
roadPrefab:Prefab = null;
@property(Prefab)
coinPrefab:Prefab = null;
@property(Prefab)
treePrefab:Prefab = null;
onLoad(){
// Instantiate 100 instances of the prefab using a for loop
for (let i = 0; i < 100; i++) {
//instantiates the road but is not yet added to the scene
const instantiatedNode = instantiate(this.roadPrefab);
//since we know the road is a 10 by 10 in size,
//we generate a new road every 10 spaces going backwards(-10)
instantiatedNode.setPosition(0, 0, i * -10);
// Add the instantiated node to the current scene
this.node.addChild(instantiatedNode);
const instantiantedCoin = instantiate(this.coinPrefab);
const options = [3.5, 0, -3.5];
const randomNumber = this.getRandomNumber(options);
instantiantedCoin.setPosition(randomNumber,2,i* -10);
this.node.addChild(instantiantedCoin);
}
for(let b = 0; b<100; b++){
//left side of the road
const instantiatedTree = instantiate(this.treePrefab);
//possible positions for the tree
const options = [-6.5,-6.8,-7,-7.3,-7.5];
//pick one position
const randomNumber2 = this.getRandomNumber(options);
//put the tree in that position
instantiatedTree.setPosition(randomNumber2,0,b * -10);
//set rotation
//pick a random number from 0 to 360
const randomInteger = Math.floor(Math.random() * 360);
// Adjust the rotation values as needed
const rotationEuler = new Vec3(0,randomInteger, 0);
//make the tree rotate to that value
instantiatedTree.setRotationFromEuler(rotationEuler);
this.node.addChild(instantiatedTree);
//right side of the road
const instantiatedTree2 = instantiate(this.treePrefab);
const options3 = [6.5,6.8,7,7.3,7.5];
const randomNumber3 = this.getRandomNumber(options3);
instantiatedTree2.setPosition(randomNumber3,0,b * -10);
//set rotation
const randomInteger2 = Math.floor(Math.random() * 360);
// Adjust the rotation values as needed
const rotationEuler2 = new Vec3(0,randomInteger2, 0);
instantiatedTree2.setRotationFromEuler(rotationEuler2);
this.node.addChild(instantiatedTree2);
}
}
getRandomNumber(options: number[]): number {
const randomIndex = Math.floor(Math.random() * options.length);
return options[randomIndex];
}
update(deltaTime: number) {
}
}