先看一段代码:
cc.Class({extends: ponent,properties: {userID: 20,userName: "Foobar"}});
这是一个CCClass类,用关键字 properties 声明了两个属性:userID和userName。
这种写法大家很熟悉,官方文档和范例教程里面都是用 JS 的项目,这种代码随处可见。
然后再看看属性声明的TS版:
注解式声明
// 声明一个Sprite属性@property(cc.Sprite)backGround: cc.Sprite = null;// 声明一个Label属性@property(cc.Label)label: cc.Label = null;
是不是瞬间感觉简洁多了,看着也舒坦。
接着看,还有更屌的:
使用中文名称
// 声明一个Sprite属性@property({type: cc.Sprite,displayName: "背景"})backGround: cc.Sprite = null;
属性面板如下:
使用tooltip给属性增加提示说明
// 声明一个带说明的属性@property({type: cc.Node,displayName: "底座",tooltip: "底部炮台的父节点"})baseNode: cc.Node = null;
属性面板如下:
限制整数输入和取值范围
// 带说明,只能输入整数,最大值10,最小值0@property({type: cc.Integer,displayName: "血量",min: 0,max: 10,tooltip: "人物当前血量"})HP = 10;
中文内容的下拉列表
先定义一个自定义枚举
let SexyType = cc.Enum({未知: 0,男: 1,女: 2});
然后声明一个枚举类型的属性
// 自定义枚举,下拉框属性,中文显示@property({type: cc.Enum(SexyType),displayName: "性别"})sex = SexyType.未知;
定义文本框
只需要默认值设置为字符串,不需要显示定义type
// 声明文本框@property({displayName: "作者" })author = "大掌教";@property({displayName: "Q群" })QQ = "704391772";
属性面板如下:
定义ValueType类型
包括Vec2,Vec3,Rect,Color等,只需要默认值设置对象实例,不需要定义type
// 声明cc.ValueType子类型,Vec2,Vec3等@property({displayName: "坐标"})pos: cc.Vec2 = new cc.Vec2(0);
定义滑动条
// 声明滑动条,不加type就是浮点值@property({type: cc.Integer,min: 0,max: 120,step: 1,slide: true,displayName: "年龄"})age = 32;
定义事件回调
// 声明事件回调,类似button的点击事件回调@property({type: ponent.EventHandler,displayName: "双杀"})doubleKill = new ponent.EventHandler();
完整代码如下:
// Author:lerry(大掌教)// 微信公众号ID:darkpalm// Q群:704391772const {ccclass, property } = cc._decorator;let SexyType = cc.Enum({未知: 0,男: 1,女: 2});@ccclassexport default class MainGame extends ponent {// 声明一个Sprite属性@property({type: cc.Sprite,displayName: "背景"})backGround: cc.Sprite = null;// 声明一个Label属性@property({type: cc.Label,displayName: "标题"})label: cc.Label = null;// 声明一个带说明的属性@property({type: cc.Node,displayName: "底座",tooltip: "底部炮台的父节点"})baseNode: cc.Node = null;// 带说明,只能输入整数,最大值10,最小值0@property({type: cc.Integer,displayName: "血量",min: 0,max: 10,tooltip: "人物当前血量"})HP = 10;// 自定义枚举,下拉框属性,中文显示@property({type: cc.Enum(SexyType),displayName: "性别"})sex = SexyType.未知;// 声明文本框@property({displayName: "作者" })author = "大掌教";@property({displayName: "Q群" })QQ = "704391772";// 声明cc.ValueType子类型,Vec2,Vec3等@property({displayName: "坐标"})pos: cc.Vec2 = new cc.Vec2(0);// 声明滑动条,不加type就是浮点值@property({type: cc.Integer,min: 0,max: 120,step: 1,slide: true,displayName: "年龄"})age = 32;// 声明事件回调,类似button的点击事件回调@property({type: ponent.EventHandler,displayName: "双杀"})doubleKill = new ponent.EventHandler();onLoad() {cc.Rect}start() {}}
有没有感觉TS写代码还是很爽的。
这一篇基础属性讲到这里,下一篇将会讲一下高级用法,声明自定义组件属性方法。
欢迎关注我的公众号,回复【ts好牛逼】就可以获取demo源码。
公众号ID:darkpalm