Объявление класса с помощью cc.Class

cc.Class - полезный API, который используется для объявления класса в Cocos Creator. Для удобства категоризации мы вызываем класс, который использует декларацию cc.Class CCClass.

Определение CCClass

Сначала вызовите метод cc.Class, передав объект-прототип и настроим необходимые параметры типа с помощью пары ключ-значение в объекте прототипа, тогда может быть создан необходимый класс.

var Sprite = cc.Class({
    name: "sprite"
});

Вышеприведенный код присваивает созданному классу значение переменной Sprite. Кроме того, он задает имя класса «sprite». Имя класса используется для сериализации, которое обычно может быть опущено.

Создание экземпляра

Вышеупомянутая переменная Sprite присваивается конструктору JavaScript, который может быть использован для создания нового объекта:

var obj = new Sprite();

Judge class

Когда вам нужно судить о классе объекта, вы можете использовать встроенный JavaScript instanceof:

cc.log(obj instanceof Sprite);       // true

Конструктор

Используйте ctor для объявления конструктора:

var Sprite = cc.Class({
    ctor: function () {
        cc.log(this instanceof Sprite);    // true
    }
});

Метод экземпляра

var Sprite = cc.Class({
    // declare a instance method called "print"
    print: function () { }
});

Наследование

Используйте extends для наследования уже объявленного класса:

// базовый класс
var Shape = cc.Class();

// подкласс
var Rect = cc.Class({
    extends: Shape
});

Конструктор суперкласса

Конструктор суперкласса будет автоматически вызываться сначала перед созданием дочернего класса, вы не должны вызывать его явно.

var Shape = cc.Class({
    ctor: function () {
        cc.log("Shape");    // Конструктор суперкласса будет автоматически вызываться
                            // во время создания,
    }
});

var Rect = cc.Class({
    extends: Shape
});

var Square = cc.Class({
    extends: Rect,
    ctor: function () {
        cc.log("Square");   // затем вызовется дочерний конструктор.
    }
});

var square = new Square();

Результатом вышеуказанного кода является "Shape" и "Square".

Объявление свойств

Используя объявление атрибута в компоненте скрипт, мы можем визуально отобразить поле компонента скрипта в панели Properties, чтобы мы могли легко отрегулировать значение атрибута в сцене.

Чтобы объявить атрибут, все, что вам нужно сделать, это поместить имя атрибута и параметры в cc.Class, определяющие поле properties, например:

cc.Class({
    extends: cc.Component,
    properties: {
        userID: 20,
        userName: "Foobar"
    }
});

В это время вы можете увидеть в панели Properties два свойства, которые вы только что определили:

В Cocos Creator мы предлагаем два метода объявления атрибутов:

Простое объявление

В большинстве случаев мы можем использовать простое объявление.

Когда объявленное свойство является примитивным типом JavaScript, оно может быть записано непосредственно в:

  properties: {
      height: 20,       // число
      type: "actor",    // строка
      loaded: false,    // логический
      target: null,     // объект
  }

Когда объявленное свойство имеет тип (например, cc.Node, cc.Vec2 и т. д.), вы можете закончить объявление, написав его конструктор в объявлении, например:
```
  properties: {
      target: cc.Node,
      pos: cc.Vec2,
  }
```
Когда объявленный тип свойства наследуется от cc.ValueType (например, cc.Vec2, cc.Color, cc.Size и т. д.), в дополнение к использованию вышеприведенного конструктора его также можно назначить с экземпляром, например:
```
  properties: {
      pos: new cc.Vec2(10, 20),
      color: new cc.Color(255, 255, 255, 128),
  }
```

Когда объявленное свойство является массивом, вы можете закончить объявление, написав его тип или конструктор в объявлении, например:

  properties: {
      any: [],      // массив произвольного типа
      bools: [cc.Boolean],
      strings: [cc.String],
      floats: [cc.Float],
      ints: [cc.Integer],

      values: [cc.Vec2],
      nodes: [cc.Node],
      frames: [cc.SpriteFrame],
  }

Примечание: Кроме ситуаций, описанных выше, мы должны использовать полное объявление для всех других типов.

Полное объявление

В некоторых случаях нам нужно добавить атрибуты для объявления свойства. Эти атрибуты управляют режимом отображения свойств в панели Properties и поведением свойства в процессе сериализации сцены. Например:

properties: {
    score: {
        default: 0,
        displayName: "Score (player)",
        tooltip: "The score of player",
    }
}

В приведенном выше коде указаны три атрибута default, displayName и tooltip. Они определяют значение по умолчанию score равно 0, а его имя свойства в панели Properties будет отображаться как «Score (player)», и когда курсор переходит к свойству, он отобразит соответствующую подсказку.

Ниже приведены основные атрибуты.

default: установить значение по умолчанию для свойства, значение по умолчанию будет использоваться только тогда, когда компонент прикрепляется к узлу в первый раз.
type: ограничить тип данных свойства, см. CCClass Advanced Reference: type attribute для подробностей
visible: свойство невидимо на панели Properties, если установлено значение false
serializable: не сериализует это свойство, если установлено значение false
displayName : отобразить назначенное имя на панели Properties
tooltip: добавить подсказку свойства в панели Properties

For detailed usage please refer to Property attribute.

Объявление массива

Значение по умолчанию для массива должно быть установлено в [], если вы собираетесь редактировать на панели Properties, вам также необходимо установить тип в конструктор, перечисление или cc.Integer, cc. Float, cc.Boolean и cc.String.

properties: {
    names: {
        default: [],
        type: [cc.String]   // используйте тип, чтобы указать, что каждый элемент в массиве должен быть строкой
    },

    enemies: {
        default: [],
        type: [cc.Node]     // тип также может быть определен как массив для улучшения удобочитаемости
    },
}

Объявление get/set

После настройки get или set в свойстве при доступе к свойству будет запущен предопределенный метод get или set. Определение метода выглядит следующим образом:

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

Вы можете определить только метод get, так что это свойство будет доступно только для чтения.

Продолжайте читать про Доступ к узлу и другим компонентам или Расширенная ссылка CCClass.

cc.Class