Skip to main content

脚本组件基础

我们已经成功地在Cocos Creator中创建并运行了脚本，也学习了TypeScript的基础语法，现在让我们回过头来学习脚本组件的基础知识。

2.4.1 组件类 所有继承自Component的类都被称为组件类，其对象被称为组件。我们可以将组件挂载到场景中的节点上，用于控制节点的行为。 需要注意的是，如果没有使用＠ccclass将组件类声明成cc类，则无法将组件添加到节点上。

cc类​

将装饰器ccclass应用在类上时，此类称为cc类。cc类注入了额外的信息以控制Cocos Creator编辑器对该类的序列化和场景编辑器对该类的展示等。 因此，未声明ccclass的组件类无法作为组件被添加到节点上。 装饰器ccclass的参数name指定了cc类的名称，cc类名是独一无二的，这意味着同类名在不同目录下也是不被允许的。 当需要获取相应的cc类时，可以通过cc类名来查找。

属性装饰器​

属性装饰器property可以被应用在cc类的属性或访问器上，并用于控制Cocos Creator编辑器中cc类属性的序列化，以及该属性在属性检查器上的显示等。 这里需要注意的是，属性装饰器property的选项type会指定属性的cc类，若未指定，则Cocos Creator将从属性的默认值中推导其类型，完整的可选择参数可以参考Cocos Creator的官方文档。 我们可以将Game脚本进行修改，分别定义job变量和hp变量，同时在start函数中通过“this.变量名”的方式访问并输出成员变量的值，


import { _decorator, CCInteger, Component, Node } from 'cc';
const { ccclass, property } = _decorator;


 
@ccclass('Game')
export class Game extends Component {
    

    job="法师"

    @property({type:CCInteger})
    hp=10


    start () {
       
        console.log('job:',this.job)
        console.log('hp:',this.hp)
    }


}



属性需要被property修饰才能在属性编辑器中显示​

  • 以普通方式声明的属性不能在编辑器中被访问，只有使用了属性装饰器property修饰的属性才能在编辑器中被访问。

  • 因此，在Node节点的属性检查器中，虽然我们可以查看并编辑在脚本中定义的【hp】属性，却看不到同时定义的【job】属性，

  • 在编辑器中尝试将【hp】的值修改为【50】，再次进行预览运行，我们会发现输出结果已经变成了【50】

脚本与其他节点及组件交互​

  • 在游戏开发的过程中，脚本通常需要与多个节点进行交互。
  • 假设现在有一个需求，需要将Label节点的string属性进行动态调整，使默认的【Hello World】文本在游戏运行后变为【Game Start】。
  • 此时我们就需要让Game脚本与Label节点进行交互，代码修改如下所示。


import { _decorator, CCInteger, Component, Label, Node } from 'cc';
const { ccclass, property } = _decorator;


 
@ccclass('Game')
export class Game extends Component {
    

    @property({type:Label})
    label:Label=null //绑定Label节点


    start () {
       
        this.label.string = "start game"
    }


}


  • 这里需要注意的是，为了能在脚本中正常使用Label类，还需要在脚本的头部对该类进行导入。
  • 与此同时，我们还需要在属性检查器中将Label节点与Game脚本进行绑定，否则在预览运行时会报错。
  • 回到Cocos Creator编辑器，将层级管理器中的Label节点拖动到Game脚本组件中的Label属性上，从而完成对组件的绑定，如图2-19所示。
  • 完成拖动绑定后预览运行，浏览器中显示的文字将会从【HelloWorld】变成【Game Start】。