_decorator Module

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

Index

Methods

• ccclass Declare the standard ES6 Class...
• property Declare property for CCClass.
• executeInEditMode Makes a CCClass that inherit from component execute in edit mode.
  ...
• requireComponent Automatically add required component as a dependency for the CCClass that inherit from component.
• menu The menu path to register a component to the editors "Component" menu.
• executionOrder The execution order of lifecycle methods for Component.
• disallowMultiple Prevents Component of the same type (or subtype) to be added more than once to a Node.
• 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.
  ...
• inspector Specifying the url of the custom html to draw the component in Properties.
• icon Specifying the url of the icon to display in the editor.
• help The custom documentation URL.
• mixins The old mixins implemented in cc.Class(ES5) behaves exact the same as multiple inheritance.

Details

Methods

ccclass

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

Parameters

• name 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

Declare property for CCClass.

Parameters

• options Object an object with some property attributes
  • type Any
  • visible Boolean | Function
  • displayName String
  • tooltip String
  • multiline Boolean
  • readonly Boolean
  • min Number
  • max Number
  • step Number
  • range Number[]
  • slide Boolean
  • serializable Boolean
  • editorOnly Boolean
  • override Boolean
  • animatable Boolean
  • formerlySerializedAs String

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) {
        this._width = value;
    }

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

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

    @property(cc.SpriteFrame)
    frame = null;
}

// 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;
            }
        },

        offset: new cc.Vec2(100, 100)

        offsets: {
            default: [],
            type: cc.Vec2
        }

        frame: {
            default: null,
            type: cc.SpriteFrame
        },
    }
});

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

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

Parameters

• requiredComponent Component

Examples

const {ccclass, requireComponent} = cc._decorator;

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

menu

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

Parameters

• 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

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.

Parameters

• 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

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

Parameters

• url String

Examples

const {ccclass, inspector} = cc._decorator;

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

icon

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

Parameters

• url String

Examples

const {ccclass, icon} = cc._decorator;

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

help

The custom documentation URL.

Parameters

• url String

Examples

const {ccclass, help} = cc._decorator;

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

mixins

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).

Parameters

• 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);
    }
    // ...
}