目录

一、给节点添加脚本

二、VScode编辑脚本

2.1 配置 vscode 环境

2.2 编写脚本

三、有关脚本的知识

3.1 脚本的运行原理

3.2 生命期回调

3.3 查看脚本执行情况

四、事件响应处理

五、调试 JS 代码

六、TypeScript

6.1 TypeScript，强类型的 JavaScript

6.2 JavaScript 是弱类型的语言

6.3 对比写法

七、属性

7.1 在引擎中显示属性

7.2 属性的定义

7.3 属性的应用

7.4 引用类型属性

---

一、给节点添加脚本

 

二、VScode编辑脚本

2.1 配置 vscode 环境

2.2 编写脚本

三、有关脚本的知识

3.1 脚本的运行原理

1、游戏引擎加载所有节点

2、加载节点的所有的组件

var comp = new PigScript();

node["PigScript"]= comp;

comp.onLoad(); 

comp.start();

3.2 生命期回调

生命期回调 Life-Cycle Callback

onLoad() 组件初始化时执行

start() 第一次激活前执行

update() 每帧执行

onEnable() 组件启用时调用

onDisable() 组件禁用时调用

onDestroy()组件销毁时调用

3.3 查看脚本执行情况

1、模拟器

 

2、控制台 

 

四、事件响应处理

事件处理，和 HTML 里的 JavaScript 事件类似

点击事件 mousedown / mouseup / mousemove ...

键盘事件 keyup / keydown

触摸事件 touchstart / touchend / touchcancel ...

上面的效果实现了：点击一下，图片位置就会左移 

五、调试 JS 代码

目前还不会，这个用来占位

六、TypeScript

6.1 TypeScript，强类型的 JavaScript

https://www.typescriptlang.org

6.2 JavaScript 是弱类型的语言

var str = "shaofa"; 
var a = 10;
var node = this.node;

由于没有类型标识，所以编辑器无法精确的提示

6.3 对比写法

1、变量

JavaScript：

var str = "shaofa";

var a = 10;

var node = this.node;

TypeScript:

let str : string = "shaofa";

let a : number = 10;

let node : cc.Node = this.node;

2、方法的参数

JavaScript:

moveLeft(evt) {

}

TypeScript:

moveLeft(evt : cc.Event.EventMouse) {
}

3、方法的返回值

JavaScript:

sum(x, y) {

        return x + y;

}

TypeScript: 

sum(x:number, y:number):number {

        returnx + y;

}

七、属性

7.1 在引擎中显示属性

 

7.2 属性的定义

1、在 TypeScript 添加一个类，类里可以添加属性

形式如下：

@property("string")

time : string="";

其中，@property 称为装饰器（同 Java 中的注解语法）

2、属性的定义规则

(1) 若无 @property 注解，则不会出现在 Cocos Creator 属性面板

(2) @property 中， 应该指明类型

@property("string")

@property(cc.Node)

(3) 基本类型，可以不指定类型

string，number，boolean，bigint

3、TypeScript 里有 number 和 Number 两种类型

number 算是基本类型

Number 算是引用类型（对象）

7.3 属性的应用

属体一般分为两种类型：

1、基本类型

string，number，boolean，bigint

2、引用类型

cc.Node 节点

cc.SpriteFrame 图片帧资源

cc.AudioClip 音频资源

3、应用

 

 

7.4 引用类型属性