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 initialized
onEnable Called when the enabled property of the component changes from false to true
start Called when the component is first activated
update Update object call before rendering each frame
lateUpdate Called after the update of all components has been executed
onDisable Called when the enabled property of the component changes from true to false
onDestroy Called when the component or node is destroyed

Adding code

Add start() 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.