使用 cc.Class 声明类型

cc.Class 是一个很常用的 API,用于声明 Cocos Creator 中的类,为了方便区分,我们把使用 cc.Class 声明的类叫做 CCClass

定义 CCClass

调用 cc.Class,传入一个原型对象,在原型对象中以键值对的形式设定所需的类型参数,就能创建出所需要的类。

  1. varSprite= cc.Class({
  2. name:"sprite"
  3. });

以上代码用 cc.Class 创建了一个类型,并且赋给了 Sprite 变量。同时还将类名设为 "sprite",类名用于序列化,一般可以省略。

实例化

Sprite 变量保存的是一个 JavaScript 构造函数,可以直接 new 出一个对象:

  1. var obj =newSprite();

判断类型

需要做类型判断时,可以用 JavaScript 原生的 instanceof

  1. cc.log(obj instanceofSprite);// true

构造函数

使用 ctor 声明构造函数:

  1. varSprite= cc.Class({
  2. ctor:function(){
  3. cc.log(thisinstanceofSprite);// true
  4. }
  5. });

实例方法

  1. varSprite= cc.Class({
  2. // 声明一个名叫 "print" 的实例方法
  3. print:function(){}
  4. });

继承

使用 extends 实现继承:

  1. // 父类
  2. varShape= cc.Class();
  3. // 子类
  4. varRect= cc.Class({
  5. extends:Shape
  6. });

父构造函数

继承后,CCClass 会统一自动调用父构造函数,你不需要显式调用。

  1. varShape= cc.Class({
  2. ctor:function(){
  3. cc.log("Shape");// 实例化时,父构造函数会自动调用,
  4. }
  5. });
  6. varRect= cc.Class({
  7. extends:Shape
  8. });
  9. varSquare= cc.Class({
  10. extends:Rect,
  11. ctor:function(){
  12. cc.log("Square");// 再调用子构造函数
  13. }
  14. });
  15. var square =newSquare();

以上代码将依次输出 "Shape" 和 "Square"。

声明属性

通过在组件脚本中声明属性,我们可以将脚本组件中的字段可视化地展示在 属性检查器 中,从而方便地在场景中调整属性值。

要声明属性,仅需要在 cc.Class 定义的 properties 字段中,填写属性名字和属性参数即可,如:

  1. cc.Class({
  2. extends: cc.Component,
  3. properties:{
  4. userID:20,
  5. userName:"Foobar"
  6. }
  7. });

这时候,你可以在 属性检查器 中看到你刚刚定义的两个属性:

properties

在 Cocos Creator 中,我们提供两种形式的属性声明方法:

简单声明

在多数情况下,我们都可以使用简单声明。

  • 当声明的属性为基本 JavaScript 类型时,可以直接赋予默认值:
  1. properties:{
  2. height:20,// number
  3. type:"actor",// string
  4. loaded:false,// boolean
  5. target:null,// object
  6. }
  • 当声明的属性具备类型时(如:cc.Nodecc.Vec2 等),可以在声明处填写他们的构造函数来完成声明,如:
  1. properties:{
  2. target: cc.Node,
  3. pos: cc.Vec2,
  4. }
  • 当声明属性的类型继承自 cc.ValueType 时(如:cc.Vec2cc.Colorcc.Rect),除了上面的构造函数,还可以直接使用实例作为默认值:
  1. properties:{
  2. pos:new cc.Vec2(10,20),
  3. color:new cc.Color(255,255,255,128),
  4. }
  • 当声明属性是一个数组时,可以在声明处填写他们的类型或构造函数来完成声明,如:
  1. properties:{
  2. any:[],// 不定义具体类型的数组
  3. bools:[cc.Boolean],
  4. strings:[cc.String],
  5. floats:[cc.Float],
  6. ints:[cc.Integer],
  7. values:[cc.Vec2],
  8. nodes:[cc.Node],
  9. frames:[cc.SpriteFrame],
  10. }

注意:除了以上几种情况,其他类型我们都需要使用完整声明的方式来进行书写。

完整声明

有些情况下,我们需要为属性声明添加参数,这些参数控制了属性在 属性检查器 中的显示方式,以及属性在场景序列化过程中的行为。例如:

  1. properties:{
  2. score:{
  3. default:0,
  4. displayName:"Score (player)",
  5. tooltip:"The score of player",
  6. }
  7. }

以上代码为 score 属性设置了三个参数 default, displayNametooltip。这几个参数分别指定了 score 的默认值为 0,在 属性检查器 里,其属性名将显示为:“Score (player)”,并且当鼠标移到参数上时,显示对应的 Tooltip。

下面是常用参数:

  • default: 设置属性的默认值,这个默认值仅在组件第一次添加到节点上时才会用到
  • type: 限定属性的数据类型,详见 CCClass 进阶参考:type 参数
  • visible: 设为 false 则不在 属性检查器 面板中显示该属性
  • serializable: 设为 false 则不序列化(保存)该属性
  • displayName: 在 属性检查器 面板中显示成指定名字
  • tooltip: 在 属性检查器 面板中添加属性的 Tooltip
    更多的属性参数,可阅读 属性参数

数组声明

数组的 default 必须设置为 [],如果要在 属性检查器 中编辑,还需要设置 type 为构造函数,枚举,或者 cc.Integercc.Floatcc.Booleancc.String

  1. properties:{
  2. names:{
  3. default:[],
  4. type:[cc.String]// 用 type 指定数组的每个元素都是字符串类型
  5. },
  6. enemies:{
  7. default:[],
  8. type:[cc.Node]// type 同样写成数组,提高代码可读性
  9. },
  10. }

get/set 声明

在属性中设置了 get 或 set 以后,访问属性的时候,就能触发预定义的 get 或 set 方法。定义方法如下:

  1. properties:{
  2. width:{
  3. get:function(){
  4. returnthis._width;
  5. },
  6. set:function(value){
  7. this._width = value;
  8. }
  9. }
  10. }
如果你只定义 get 方法,那相当于属性只读。

继续前往 访问节点和其他组件CCClass 进阶参考