Hello World project
This is the very first Cocos Creator 3D project, and it aims to demonstrate the following:
- Creating a project
- Understanding the project directory
- Creating an object
- Modifying
Camera
properties - Creating, modifying, and binding scripts
- Running projects
Creating a New Project
In the Dashboard panel, click the New button in the lower right corner and select Creator 3D in the pop-up menu.
Select an empty template, set the project path, and click the Create button below.
The Editor interface
This is the default layout of the Editor interface:
The layout is customizable, if you don't find the default layout suitable.
Project Directory
Usually, the most commonly used directory is assets
. There are others:
- assets (resources directory)
- build (build directory)
- library (imported resources directory)
- local (log file directory)
- profiles (editor configuration)
- temp (temporary file directory)
- package.json (project configuration)
Creating a New Scene
In the bottom left Explorer panel, click the right mouse button and select New->Scene.
Creating an Object
Upper left Hierarchy Manager panel, click the right mouse button, select Create -> 3D object -> Cube cube. The created cube will appear in the scene editor.
Modifying the Camera
Selecting the Camera
object
In the Hierarchy Manager panel, select Camera
, and the scene editor will select it and display a Gizmo.
Modifying the Camera
position
In the scene editor, drag the Gizmo so that the Camera
can see the created cube.
Modifying the Camera
background color
In the Property Inspector panel, click the Color
property and select black as the background color.
Adding a script
Creating a new script
In the Explorer panel, click the right mouse button, select New -> TypeScript.
Life cycle functions
Life cycle functions (called in the following order):
onLoad
Called when the script is initializedonEnable
Called when the enabled property of the component changes fromfalse
totrue
start
Called when the component is first activatedupdate
Update object call before rendering each framelateUpdate
Called after the update of all components has been executedonDisable
Called when theenabled
property of the component changes fromtrue
tofalse
onDestroy
Called when the component or node is destroyed
Adding code
Add onLoad()
function to output Hello world
:
import { _decorator, Component, Node } from 'cc';
const {ccclass, property} = _decorator;
@ccclass('HelloWorld')
export class HelloWorld extends Component {
/* class member could be defined like this */
// dummy ='';
/* use `property` decorator if your want the member to be serializable */
// @property
// serializableDummy = 0;
start () {
// Your initialization goes here.
console.info('Hello world');
}
// // update (deltaTime: number) {
// // Your update function goes here.
//}
}
Bind scripts to objects
Select the created cube and click Add component -> custom script->HelloWorld
Running a project
In the Editor, from the menu bar click Project -> Run preview, or Click the Run button in the middle.
Debuging a project
In the Editor, from the menu bar click developer -> scene debugging tool
It is also may be necessary to Log information. The Console panel displays all log output.
Breakpointsa can also be placed for stooping execution of the debugger to examine values. Select the Source option on the tab bar and press CTRL+P, Search for HelloWorld.ts
, set a breakpoint in the onLoad()
function, and then run the preview to debug.