Sweshi's Tutorials

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.

Cocos Creator Tutorial:creating the 3DObjects folder in the assets directory.

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.

Cocos Creator Tutorial:importing the 3D tree assets

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.

Cocos Creator Tutorial:Creating the tree node

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.

Cocos Creator Tutorial:leaf material creation

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.

Cocos Creator Tutorial: leaf material properties

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.

Cocos Creator Tutorial: maple leaf

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.

Cocos Creator Tutorial: bark material

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.

Cocos Creator Tutorial:drag the bark02

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.

Cocos Creator Tutorial: adding the material

Right Click on the Scripts folder->Create->TypeScript->newComponent. Name the script as “TreeScript”. Open the script.

Cocos Creator Tutorial: treeScript

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); } } Cocos Creator Tutorial:code for the tree script

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.