Cocos Creator中的脚本组件

Hello，大家好，我是麒麟子。欢迎回来。 接下来，我们将开启全新的学习阶段。 在这一节课中，大家将学会Cocos Creator引擎中的脚本组件，掌握脚本代码的编写流程。

很多朋友一听编程，就觉得很难。 但其实不是这样的！

编程的本质是翻译，因为计算机听不懂人类的语言，所以需要你把想让计算机做的事，用它能懂的方式告诉它。

所以，编程最重要的是思维，语言只是工具。

只要你有清晰的逻辑思维，多多练习工具的使用，就可以很快掌握编程技巧。

话不多说，我们直接开始！

Cocos Creator中的脚本组件

我们先来看看，Cocos Creator 中的脚本组件的样子。

每一个脚本组件其实就是一个文件，所以它是通过资源管理器进行创建的

在Assets目录下，点击鼠标右键->创建->脚本（TypeScript）->NewComponent

可以看到，Assets 目录下多出了一个文件，并且是处于输入名字的状态，我们需要给它取一个名字，这个名字最好是能代表它的作用。 假如我们要把它用来控制Player的移动，就可以命名为 PlayerMovement

在右边的属性面板中可以看到，我们生成的文件中，也有 PlayerMovement 相关内容。

创建好脚本组件后，我们可以直接把它拖动到 Player 节点上使用。 可以看到， Player 节点下多了一个 PlayerMovment 组件。

如果不想要这个组件，也可以在右边的菜单中移除。

当然，作为组件，我们同样可以点击 添加组件， 在 自定义脚本 中找到它，并使用。

再次选择我们的 PlayerMovement 脚本组件，可以发现，右边的属性面板中，是不可以编辑的。

想要编辑脚本组件，我们还需要借助一个非常强大的代码编辑器： Visual Studio Code。

安装与配置VS Code

Visual Studio Code，通常大家简称 VS Code。 是微软公司推出的一款免费的代码编辑器，现在已被各大公司的程序员使用，是当下非常流行的一款编程工具。

接下来，我们讲讲它的安装与配置。

打开 visualstudiocode.com 官网，中找到下载链接并下载。 下载好之后，点击安装。 安装的时候要记住它的安装位置，我们后面会使用。 如果记不住，建议先截个图。

安装成功之后，我们找到我们回到Cocos Creator，打开 Cocos Creator 菜单中的偏好设置面板。

找到， 默认脚本编辑器，点击这个查找，找到vs code程序，并点击确认。

配置好之后，回到我们的 Assets 窗口，双击 PlayerMovement ，就可以启动我们的脚本编辑器了。

基本概念

在正式讲解编程之前，我们需要理解一些编程需要的基础概念。

Cocos Creator 使用的是TypeScript， 是一种面向对象编程语言。

由于需要面向对象，那么，没有对象的朋友，可能得先找个对象再来学后面的内容。 （插入哭泣的表情）

类

类的定义

我们先来看看第一个术语。 类是从英文术语 class 翻译过来的，它代表某一类事物。 比如，老师、学生、它们是不同的类。

如果把上面的不同类，写成TypeScript代码，会是这样（切换成PPT）

class Teacher {
}

class Student {
}

可以看到，类由三个部分组成 class 关键字，类名(Teacher、Student)，花括号 {}

对应到引擎中，我们在组件面板中看到的 Node，MeshRenderer, RigidBody，BoxCollider 等，它们都是类的名字。

不难看出，类就是用来描述某一类事物的抽象概念，使我们可以很容易的管理某一类事物。

属性

比如，老师有姓名、年龄，最喜欢的学生等信息，学生有姓名、年龄、最喜欢的老师、最喜欢的同学等信息 这些信息，在程序设计中，我们称为属性。 写成TypeScript就像下面这样:

class Teacher{
  name:string;
  age:number;
  favoriteStudent:Student;
}

class Student{
  name:string;
  age:number;
  favoriteTeacher:Teacher;
  favoriteClassmate:Student;
}

可以看到，属性的定义要注意几点。 第一、需要写在类名的大括号内 {} 第二、它的形式是 名字 + 冒号 + 类型 名字一般是一些可以代表这个属性特征的词，而类型中 string 用来表示文字属性，比如 姓名，简介等等。 而 number 用来表示数值属性，比如 年龄，学号 等等。

并且，可以看到，我们自己定义的Techer和Student，也是可以用来当用类型使用的。

第三、末尾要有分号，这个不要忘了，否则编译器会报错的。

方法

事物除了具备属性以外，还会具备一些行为。 这些行为，我们称为方法。 比如， 老师会讲课，学生会学习。写成 TypeScript 会像下面这样。

class Teacher{
  name:string;
  age:number;
  favoriteStudent:Student;
  
  teaching():void {}
}

class Student{
  name:string;
  age:number;
  favoriteTeacher:Teacher;
  favoriteClassmate:Student;
  
  studying():void {}
}

可以看到，方法由三个部分组成 名字，括号，返回值，函数体。

好了，上面就是关于类的全部内容了。 理解了上面的内容，基本上是可以确保顺利学习后面的课程的。

由于时间有限，不能深挖，有兴趣的同学可以在此基础上，多查询相关资料。

继承

如果说，类用来定义事物的类别，那么继承，就是用来描述不同类别之间的共性！

我们知道，事物之间并不是独立的，它们之间还是会有许多共同的特征。 比如。老师和学生，都属于人类，人类都有名字、年龄、可以走，可以说话。 如果上面的这些内容，都要在Teacher和Student类里写一次的话，就会像下面一样。

class Teacher{
  name:string;
  age:number;
  favoriteStudent:Student;
  
  teaching(){}
  
  walk():void {}
  say():void {}
}

class Student{
  name:string;
  age:number;
  favoriteTeacher:Teacher;
  favoriteClassmate:Student;
  
  studying():void {}
  
  walk():void {}
  say():void {}
}

人类的基本属性当然不只这些，并且也不单单有老师和学生这两个分类。 如果都要写到不同的类中，就会非常的臃肿。

为了解决这个问题，我们可以把他们共同的特性写成一个单独的类

class Human {
  name:string;
  age:number;
  
  walk():void {}
  say():void {}
}

然后再使用关键字 extends 进行复用。
class Teacher extends Human {
  favoriteStudent:Student;

  teaching(){}
}

class Student extends Human {
  favoriteTeacher:Teacher;
  favoriteClassmate:Student;
  
  studying():void {}
}

我们可以说，Teacher继承自Human，Student 继承自 Human。 可以看到，有了继承机制 所有的类都简化了不少。 如果我们还要新增一个 跑的动作，只需要在Human类中去添加，不用去改动 Teacher 和 Student类。

如果我们要在Teacher和 Student 之外再新增一个类，比如 家长。 也可以继承自Human，减少代码编写。

对象

对象是类的实例。

对象这个术语，是来自英文 Object 的翻译。类用来描述的是某一类事物，而某一类事物中具体的个体实例，就是对象。 比如，我们都是人的实例对象，王老师，是Teacher的实例对象，小明同学是Student的实例对象。

在TypeScript中，创建一个类的实例对象非常简单，只需要使用new关键字即可， 像下面这样：

new Human();
new Teacher();
new Student();

对应到项目中，我们的 Ground 和 Player 都是对象，它们都是来字节点（Node）类 的对象。

引用

继承用来描述不同类之间的共同特性，引用则用来描述不同对象之间的关联。

毕竟，在这个充满烟火的人间，对象和对象之间总是有着千丝万缕的联系，不是孤立的。

简单来说，引用就是：对象之间彼此不拥有，但是有关系。

比如，小明同学最喜欢的老师是王老师，最喜欢的同学是小红。

小红最喜欢的老师也是王老师，最喜欢的同学是小张。

王老师最喜欢的学生是小张，但小张性格比较内向，他喜欢谁我们不知道。

那么他们之间就形成了一种引用关系。 写成代码就是下面这样。

let wang = new Teacher();
wang.name = '王老师';
wang.age = 32;

let ming = new Student();
ming.name = '小明';
ming.age = 17;

let hong = new Student();
hong.name = '小红';
hong.age = 18;

let zhang = new Student();
zhang.name = '小张';
zhang.age = 18;

ming.favoriteTeacher = wang;
ming.favoriteClassmate = hong;
hong.favoriteTeacher = wang;
hong.favoriteClassmate = zhang;
zhang.favoriteTeacher = null;
zhang.favoriteClassmate = null;

这里的 let xxx = new xxxx，就是创建一个对象，并且存入临时变量中。

临时变量可以理解为一个牌子。 这个牌子可以被传递到不同的地方，只要有了这个牌子，我们就可以通过它访问到对应的对象信息。

以 let wang = new Teacher(); 为例， 我们创建了一个王老师的对象，并且用一个叫 wang 的临时变量存下来，方便使用。

有了牌子，我们就可以访问对象对应的属性了。

访问一个对象属性的办法 就是 变量名 点 属性名，比如 ming.favoriteTeacher 就是访问 小明的最喜欢的老师 这个属性。

值得注意的是，一个对象可以有多个牌子。比如：

let hong1 = new Student();
let hong2 = hong;
let hong3 = hong;
let hong4 = hong3;

这里的 hong1 hong2 hong3 hong4 都是一样的，因为它们指向同一个对象。

还要注意的是，牌子丢了，对象信息还是存在的。

系统会判断这个信息还会不会有其他牌子在使用。 如果所有地方都不再使用，真正的对象信息会在适合的时候被释放掉。

回到Cocos Creator编辑器中，我们左边面板上的每一个节点，都是 Node 类的一个对象。

再看看我们的 Player 节点的属性面板上，我们可以看到，它有 MeshRenderer, RigidBody，BoxCollider 等组件，这些组件名其实都是 类 的名字。而它们都继承自基础组件类 Component。 写成代码就是：

class MeshRenderer extends Component {
}

class RigidBody extends Component {
}

class BoxCollider extends Component {
}

当我们在层级管理器中创建一个节点，并改名为Player时，相当于执行了下面的代码：

let node = new Node();
node.name = 'Player';

当我们在界面上向 Player 节点添加一个组件时，其实执行的流程是，先生成对应组件的对象，然后被 Player 引用。 对应的代码类似下面这样：

//创建
let node = new Node();
//改名
node.name = 'Player';
//添加 MeshRenderer 组件
player.meshRenderer = new MeshRenderer();
//添加 RigidBody 组件
player.rigidBody = new RigidBody();
//添加 BoxCollider 组件
player.boxCollider = new BoxCollider();

好了，有了上面的基础知识，我们来看看脚本组件的内容。