cocos creator——TypeScript

cocos creator中的TypeScript中的相关语法以及相关的内容。

// Learn TypeScript:
//  - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {
	//@property为装饰器（同Java中的注解语法）
	//加上该注解后会在cocos creator中显示相关的属性
	//然后就可以在相关的属性面板中对其进行初始化设置
    @property(cc.Label)
    label: cc.Label = null;
	//完整的写法应该为@property("string")
	//但是对于基本类型，这个可以进行相关省略
    @property
    text: string = 'hello';

    // LIFE-CYCLE CALLBACKS:
	// 初始化时进行调用
    onLoad () {

	}
	//第一次进行启用之前调用
    start () {
    	//cc是一个全局对象，log()是一个方法，可用其输出一个日志
		cc.log("hello");
    }

    update (dt) {

	}
}

一、脚本的运行

1、脚本的运行原理：

• 游戏引擎加载所有节点
• 加载节点的所有的组件

2、生命期回调

• onLoad()组件初始化时执行
• start()第一次激活前执行
• update()每帧执行，每一秒执行60次
• onEnable()组件启用时调用
• onDisable()组件禁用时调用
• onDestroy()组件销毁时调用

二、属性的定义

在TypeScript添加一个类，类里面可以添加属性。

属性的定义规则：

• 若无@property注解，则不会出现在Cocos Creator属性面板中
• @property中，应该指明类型，但是对于基本类型可以不指明类型
• 基本类型：string, number, boolean, bigint
• 在注解中写入其基本类型时应该加上双引号

三、属性的应用

属性一般分为两种类型：

• 基本类型：string, number, boolean, bigint
• 引用类型：cc.Node 节点；cc.SpriteFrame 图片帧资源；cc.AudioClip音频资源

注意：

• 一个脚本，可以重复使用，应用于多个节点
• 脚本组件的属性，可以在属性面板里指定初始值

四、引用类型的使用

引用类型的属性，常用的有：

• cc.Node 节点
• cc.SpriteFrame图片帧资源
• cc.AudioClip音频资源

五、API获取节点

使用API，可以获取和操作每一个节点和组件。

API获取相关节点：

• 当前节点 this.node : cc.Node 。例如let node : cc.Node = this.node;
• 父节点this.node.parent
• 子结点this.node.children : cc.Node[]
• 全局查找。例如target = cc.find(“Canvar/node1/node2”)
• 查找子结点。例如target = cc.find(“xx/yy”, someNode) 其中someNode为指点在哪个节点下查找相关的子结点。

六、API获取组件

若得到其相关的节点node，可以获取到它所挂在的组件对象

获取组件：let label = node.getComponent(cc.Label);

获取自定义类型的组件（脚本组件）：let script = node.getComponent(“ScriptName”);

七、脚本组件的访问

组件：
系统自带的组件有：如cc.Label, cc.Sprite等。
自定义组件，如脚本组件。

对于脚本组件，也是可以在代码中进行访问的。

相关访问过程：

• 获取到相关的脚本组件
• 调用脚本组件中的相关方法