Cocos Creator 3D Runner Tutorial
Cocoos Creator 3D Runner Tutorial
Importing the 3D Tree asset
In this section we will add trees around the road to make the project feel more like the player is actually running in an environment.
Right click on the assets folder ->create->3DObjects. This folder will be used to store the tree 3D files. Drag the “tree” folder from the assets you downloaded into the 3DObjects folder we have created.
The folder has the tree which is made up of a bark and leaves. We will add materials for each individually but first, add the tree to the project by dragging the “maple tree” fbx file into the project.
Once the file is dragged, it will have no materials by default. Because of this, we will need to create a leaf material and a bark material. Go to the Materials folder we created earlier and created a new material named leaf.
To create the leaf material, right click the “Materials” folder->Create->Material. Name it as leaf as shown in the figure. Click on the leaf material so that we can add the images.
While the leaf material is clicked, check the “USE NORMAL MAP”,”USE ALBEDO MAP” and “USE PBR MAP”. If those three are checked, drag the “leaf maple” image from the “tree” folder to the “normal map”, “albedo map” and “pbr map” as shown in the figure. Save the project.
Click on the “maple tree” node in the Node hierarchy so that we can see its properties on the right side. Go to the “MeshRenderer” section and option the “Materials” section. Drag the leaf material that was just created and drop it on the first position as shown in the figure. This should make the leave green. We will do exactly the same thing for the bark.
Click on the Materials folder and create a material named “Bark”. Materials->Create->Material. Click on the “Bark” material you just created and go to the inspector.
While the Bark material is clicked, check the “USE NORMAL MAP”,”USE ALBEDO MAP” and “USE PBR MAP”. If those three are checked, drag the “leaf maple” image from the “tree” folder to the “normal map”, “albedo map” and “pbr map” as shown in the figure. Save the project.
Click on the “maple tree” and open it. Click on the “bark02__0” and go to the inspector. Go the “MeshRenderer” and drag the Bark material we just created on the materials section as shown in the figure. This should make the tree have a dark brown bark.
To make the tree move towards the player so that the we achieve a movement effect, we will need to add a tree script.
Right Click on the Scripts folder->Create->TypeScript->newComponent. Name the script as “TreeScript”. Open the script.
The exact code written in the roadScript will also be used in this script. We simply need the tree to be moving towards the player at the same speed as the road and the coins.
TreeScript Code
import { _decorator, Component, Node,Vec3} from 'cc';
const { ccclass, property } = _decorator;
@ccclass('TreeScript')
export class TreeScript 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);
}
}
Click on the maple tree from the node hierarchy so that we can add the script to it. Click on “Add Component” and search for “TreeScript”. Select the script so that it is added to the project.