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) {
},
});
备注:对序列化还不是特别明白,序列化的意义和对应例子的意义是什么