Cocos Creator API

1.5.x

Cocos Creator is the game engine for the future.

Module _decorator

Some JavaScript decorators which can be accessed with "cc._decorator".

Methods

ccclass
(
  • [name ]
)

Declare the standard ES6 Class as CCClass, please see Class for details.

name type description
name optional String

The class name used for serialization.

examples:

const {ccclass} = cc._decorator;

// define a CCClass, omit the name
@ccclass
class NewScript extends cc.Component {
    // ...
}

// define a CCClass with a name
@ccclass('LoginData')
class LoginData {
    // ...
}

property
(
  • [options ]
)

Declare property for CCClass.

name type description
options optional Object

an object with some property attributes

examples:

const {ccclass, property} = cc._decorator;

@ccclass
class NewScript extends cc.Component {
    @property({
        type: cc.Node
    })
    targetNode1 = null;

    @property(cc.Node)
    targetNode2 = null;

    @property(cc.Button)
    targetButton = null;

    @property
    _width = 100;

    @property
    get width () {
        return this._width;
    }

    @property
    set width (value) {
        return this._width = value;
    }

    @property
    offset = new cc.Vec2(100, 100);

    @property(cc.Vec2)
    offsets = [];

    @property(cc.Texture2D)
    texture = "";
}

// above is equivalent to (上面的代码相当于):

var NewScript = cc.Class({
    properties: {
        targetNode1: {
            default: null,
            type: cc.Node
        },

        targetNode2: {
            default: null,
            type: cc.Node
        },

        targetButton: {
            default: null,
            type: cc.Button
        },

        _width: 100,

        width: {
            get () {
                return this._width;
            },
            set (value) {
                this._width = value;
            }
        },

        texture: {
            default: "",
            url: cc.Texture2D
        },
    }
});

executeInEditMode ( )

Makes a CCClass that inherit from component execute in edit mode.
By default, all components are only executed in play mode, which means they will not have their callback functions executed while the Editor is in edit mode.

examples:

const {ccclass, executeInEditMode} = cc._decorator;

@ccclass
@executeInEditMode
class NewScript extends cc.Component {
    // ...
}

requireComponent
(
  • requiredComponent
)

Automatically add required component as a dependency for the CCClass that inherit from component.

name type description
requiredComponent Component

examples:

const {ccclass, requireComponent} = cc._decorator;

@ccclass
@requireComponent(cc.Sprite)
class SpriteCtrl extends cc.Component {
    // ...
}

menu
(
  • path
)

The menu path to register a component to the editors "Component" menu. Eg. "Rendering/CameraCtrl".

name type description
path String

The path is the menu represented like a pathname. For example the menu could be "Rendering/CameraCtrl".

examples:

const {ccclass, menu} = cc._decorator;

@ccclass
@menu("Rendering/CameraCtrl")
class NewScript extends cc.Component {
    // ...
}

executionOrder
(
  • order
)

The execution order of lifecycle methods for Component. Those less than 0 will execute before while those greater than 0 will execute after. The order will only affect onLoad, onEnable, start, update and lateUpdate while onDisable and onDestroy will not be affected.

name type description
order Number

The execution order of lifecycle methods for Component. Those less than 0 will execute before while those greater than 0 will execute after.

examples:

const {ccclass, executionOrder} = cc._decorator;

@ccclass
@executionOrder(1)
class CameraCtrl extends cc.Component {
    // ...
}

disallowMultiple ( )

Prevents Component of the same type (or subtype) to be added more than once to a Node.

examples:

const {ccclass, disallowMultiple} = cc._decorator;

@ccclass
@disallowMultiple
class CameraCtrl extends cc.Component {
    // ...
}

playOnFocus ( )

If specified, the editor's scene view will keep updating this node in 60 fps when it is selected, otherwise, it will update only if necessary.
This property is only available if executeInEditMode is true.

examples:

const {ccclass, playOnFocus, executeInEditMode} = cc._decorator;

@ccclass
@executeInEditMode
@playOnFocus
class CameraCtrl extends cc.Component {
    // ...
}

inspector
(
  • url
)

Specifying the url of the custom html to draw the component in Properties.

name type description
url String

examples:

const {ccclass, inspector} = cc._decorator;

@ccclass
@inspector("packages://inspector/inspectors/comps/camera-ctrl.js")
class NewScript extends cc.Component {
    // ...
}

icon
(
  • url
)
private

Specifying the url of the icon to display in the editor.

name type description
url String

examples:

const {ccclass, icon} = cc._decorator;

@ccclass
@icon("xxxx.png")
class NewScript extends cc.Component {
    // ...
}

help
(
  • url
)

The custom documentation URL.

name type description
url String

examples:

const {ccclass, help} = cc._decorator;

@ccclass
@help("app://docs/html/components/spine.html")
class NewScript extends cc.Component {
    // ...
}

mixins
(
  • ctor
)

NOTE:
The old mixins implemented in cc.Class(ES5) behaves exact the same as multiple inheritance. But since ES6, class constructor can't be function-called and class methods become non-enumerable, so we can not mix in ES6 Classes.
See:
https://esdiscuss.org/topic/traits-are-now-impossible-in-es6-until-es7-since-rev32
One possible solution (but IDE unfriendly):
http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes

NOTE:
You must manually call mixins constructor, this is different from cc.Class(ES5).

name type description
ctor Function

constructors to mix, only support ES5 constructors or classes defined by using cc.Class, not support ES6 Classes.

examples:

const {ccclass, mixins} = cc._decorator;

class Animal { ... }

const Fly = cc.Class({
    constructor () { ... }
});

@ccclass
@mixins(cc.EventTarget, Fly)
class Bird extends Animal {
    constructor () {
        super();

        // You must manually call mixins constructor, this is different from cc.Class(ES5)
        cc.EventTarget.call(this);
        Fly.call(this);
    }
    // ...
}