Hello World project

This is the very first Cocos Creator 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 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 Assets panel, click the right mouse button and select New -> Scene.

Creating an Object

Upper left Hierarchy 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 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 Inspector panel panel, click the Color property and select black as the background color.

Adding a script

Creating a new script

In the Assets 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.

Breakpoints can also be placed for stopping 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 start() function, and then run the preview to debug.