Sweshi's Tutorials

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.

Cocos Creator Tutorial: tree prefab

We can then use this maple tree prefab in the game manager so that it can be generated randomly. Open the “GameManager” script.

Cocos Creator Tutorial:tree prefab property in code

Create the “treePrefab” property just on top of the “onLoad()” function. Save the script and go back to the editor.

Cocos Creator Tutorial: game manager adding tree prefab

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); } Cocos Creator Tutorial: explain the left side of the road

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.

Cocos Creator Tutorial:run the project

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) { } }