CocosCreator学习笔记-官方教学-05-scripting-01-properties

注：properties是脚本中用来设置脚本属性的部分，此处设置的参数，在编辑器中的属性控制面板可以调整参数

【案例1：场景 NodeArray】属性中的数组控件

层级管理器和场景编辑器中对应说明

background是后面黑色图片背景，仅此而已

tips是下面“这是节点数组”的文字说明，仅此而已

四个sprite分别对应四个怪物，后面拖入到脚本数组中

NodeGroupControl 用来绑定脚本 NodeGroupControl

NodeGroupControl 代码如下，属性中设置一个 Node数组nodeList

cc.Class({
    extends: cc.Component,

    properties: {
        nodeList: {
            default: [],
            type: [cc.Node]
        }
    },

    // use this for initialization
    onLoad: function () {
        var self = this;
        this.inervalId = setInterval(function () {
            self.toggleNodesVisibility();
        }, 1000);
    },

    onDestroy: function () {
        clearInterval(this.inervalId);
    },

    toggleNodesVisibility: function() {
        console.log('toggle visibility');
        for (var i = 0; i < this.nodeList.length; ++i) {
            this.nodeList[i].active = !this.nodeList[i].active;
        }
    }
});

在NodeGroupControl组件的属性检查器中的数组设置数额为4，并把怪物组件拉入数组中对应位置

 

toggleNodesVisibility: function() {
        //文本输出 toggle visibility
        console.log('toggle visibility');
        //for循环遍历数组，根据当前控件显隐状态进行反向显隐操作
        for (var i = 0; i < this.nodeList.length; ++i) {
            this.nodeList[i].active = !this.nodeList[i].active;
        }
    }

函数说明：

setInterval(参数1，参数2)  间歇调用函数

参数1 函数执行内容

参数2 间歇时长，单位毫秒

 

参考资料：

setInterval()与setTimeout()计时器    https://www.cnblogs.com/lengyuehuahun/p/5650030.html

【案例2：场景 NonSerialized】属性的序列化

层级管理器和场景编辑器中对应说明

分别是一个背景图（Background） 和 三个文本 （labelNum1,labelNum2,NewLabel）

cc.Class({
    extends: cc.Component,

    properties: {
        mySerializedText: '',
        myNonSerializedText: {
            default: '',
            visible: false   //小技巧，这样就不会在属性编辑器显示了，只能在脚本中编辑
        },
        label1: {
            default: null,
            type: cc.Label
        },
        label2: {
            default: null,
            type: cc.Label
        }
    },

    // use this for initialization
    onLoad: function () {
        this.myNonSerializedText = 'Can only set value in script';
        this.label1.string = this.mySerializedText;
        this.label2.string = this.myNonSerializedText;
    },
});

说明：

• 序列化：解析内存中的对象，将它的信息编码为一个特殊的字符串，以便保存到硬盘上或传输到其它地方。

【案例3：场景 ReferenceType】 引用类型的属性

// MyCustomComponent 脚本
cc.Class({
    extends: cc.Component,

    properties: {
        power: 10
    },

    getPower: function() {
        return this.power;
    }
});

• //ReferenceTypeProperties
  //引用脚本MyCustomComponent
  const MyCustomComponent = require('MyCustomComponent');
  
  cc.Class({
      extends: cc.Component,
  
      properties: {
          myNode: {
              default: null,
              type: cc.Node
          },
          mySprite: {
              default: null,
              type: cc.Sprite
          },
          myLabel: {
              default: null,
              type: cc.Label
          },
  // 脚本 MyCustomComponent
          myComponent: {
              default: null,
              type: MyCustomComponent
          },
          mySpriteFrame: {
              default: null,
              type: cc.SpriteFrame
          },
          myAtlas: {
              default: null,
              type: cc.SpriteAtlas
          },
          myPrefab: {
              default: null,
              type: cc.Prefab
          },
          myAudioClip: {
              default: null,
              type: cc.AudioClip
          },
        
      },
  
      // use this for initialization
      onLoad: function () {
          this.myLabel.string = this.myComponent.getPower().toString();
          
      },
  
      // called every frame
      update: function (dt) {
  
      },
  });
  

   

• 运行时：项目脱离编辑器独立运行时，或者在模拟器和浏览器里预览的时候。

【案例4：场景 ValueType】 值类型的属性

//列举了 一些 属性类型  ，以及如何直接赋值，
//数值写法1，文本写法1，二维数写法1，颜色写法1，数值写法2，文本写法2，二维数写法2，颜色写法1
cc.Class({
    extends: cc.Component,

    properties: {
        // number
        myNumber: {
            default: 0,
            type: cc.Integer
        },
        // string
        myString: {
            default: 'default text',
        },
        myVec2: {
            default: cc.Vec2.ZERO,
        },
        myColor: {
            default: cc.Color.WHITE,
        },
        myOtherNumber: 0,
        myOtherString: 'no type definition',
        myOtherVec2: cc.Vec2.ONE,
        myOtherColor: cc.Color.BLACK
    },

    // use this for initialization
    onLoad: function () {

    },

    // called every frame
    update: function (dt) {

    },
});

备注：对序列化还不是特别明白，序列化的意义和对应例子的意义是什么