Sweshi's Tutorials

Cocoos Creator 3D Runner Tutorial

Creating the Cocos Creator 3D Project

Create a project in the Cocos Dashboard, make sure to select an empty 3D project. Name it “EndlessRunner3D” and you can set the location of the project. Go ahead and click the “Create And Open” button for the project to be created.

Cocos Creator Tutorial: Using the Cocos Dashboard to create the 3D project

Right-Click on the “scene” ->create->3D Object->Cube. We will be making a road using this cube so name it as road.

Cocos Creator Tutorial: creating a 3D cube in cocos creator

Set the scale of the road to 10 on the x axis and 100 on the z axis. This should make a long road like structure.

Cocos Creator Tutorial: setting the size

The assets folder has the cocos animated character. Drag the whole folder named ‘cocos’ and drop in in the assets section of the editor.

Cocos Creator Tutorial: drag the cocos character from the assets

Open the cocos folder that you have imported into the assets section. There is an animations folder, open it as well and find the prefab named “Cocos”.

Cocos Creator Tutorial: drop the cocos character in the assets

Drag the Cocos prefab into the node hierarchy as shown in the figure. This will show the character in the scene.

Cocos Creator Tutorial:Open the cocos folder in the assets then open the animations folder and find the cocos prefab

We want the character to stand on the road and to face the road. So click on the Cocos Node, we will set the Y position to 1 so that the character is raised a little higher on top of the ground and not through it. Secondly, we will change the rotation to 180 so that the character faces the road. The scale should also be set to 0.5 on the x, y and z axes as shown in the figure. This will make the character half as small so that the road is not too large.

Cocos Creator Tutorial: cocos character node properties

Double click on the Cocos character in the Node hierarchy and see that it should be standing on top of the road facing the road instead of facing the screen.

Cocos Creator Tutorial: how the cocos creator project should look so far

Cocos creator supports skeletal animations for 3D objects that have been exported with them. Luckily for us, this cocos creator. Make sure that the “Default Clip” for the Cocos object is set to “Cocos_Anim_run.animation”. For now, the character will be running by default because we are playing the running animation when the character is loaded on the screen.

Cocos Creator Tutorial: changing the cocos creator skeletal animation

Save the scene using File->Save Scene or control+S on your keyboard. This will bring a window for you to name the scene. Firstly, create a folder named “scenes” in the assets folder that opens. Then open the scenes folder you have created and there save the scene as “Game”.

Cocos Creator Tutorial: saving the cocos creator game scene.

Click the down arrow near the “current scene” and select preview in simulator. Cocos Creator has a good simulator for us to test our game locally. Click the play button and see how it looks.

Cocos Creator Tutorial: running the cocos creator scene

You will see that the camera is looking at the character from a different angle. We need the camera to be straight with the road.

Cocos Creator Tutorial: checking how the cocos creator scene looks

Click on the camera and make sure that the position on the y axes is 7.8 so that the camera is high above the ground and character. The rotation on the x axis should be -28 so that the camera faces slightly downwards towards the character and 0 on the y and z axes.

Cocos Creator Tutorial: Click on the camera and make sure that the position on the y axes is 7.8 so that the camera is high above the ground and character. The rotation on the x axis should be -28 so that the camera faces slightly downwards towards the character and 0 on the y and z axes