Cocos Creator 3D Runner Tutorial
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.
Right-Click on the “scene” ->create->3D Object->Cube. We will be making a road using this cube so name it as road.
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.
The assets folder has the cocos animated character. Drag the whole folder named ‘cocos’ and drop in in the assets section of the editor.
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”.
Drag the Cocos prefab into the node hierarchy as shown in the figure. This will show the character in the scene.
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.
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 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.
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”.
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.
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.
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.
