关键词

属性脚本初始化注释组件赋值含义基本类型引用类型

文字记录

好，接下来我们来演示属性的应用。前面我们已经学会了添加属性，属性基本上就分为两种类型

• 一种称之为基本类型
• 另一种称之为引用类型

那基本类型就是基本的数据了，比如说

• string 类型
• number类型
• boolean类型
• bigint 类型

那引用类型就是对象了

• cc.node 这个表示的是节点
• cc.SpriteFrame 这个表示图片帧
• cc.AudioClip 表示的是一个音频资源对象

那我们这节课先做一个最简单的演示，也就是基本类型的应用。比如说在上节课里边我们已经见识了，这样就可以来定一个基本类型。

@property
text : string = "i am a text";

那么基本类型为什么要这么样定义呢？或者说在实际的应用里边该怎么样来使用它呢？下边我们就来做一个练习。我们添加了两个属性，一个叫 step 表示的是步长，另一个表示的是方向。

什么意思呢？那我们要实现的是这样的一个游戏，在这里边要有一个角色就是小猪佩奇，那当我们点它的时候，首先，它能够向左移动，那每一步的步长，就是每一步移动的距离，称之为步长，那方向称之为那就是方向了。这两个参数是由我们这两个属性来控制的。这就是我们这两个参数的含义。

你看 step ，step 这个属性表示的是一个步长的概念，类型为 number

然后 towardsLeft 这是一个boolean类型的，如果为true的话表示的是向左，如果为 false 的话表示为向右。

当我们添加这两个属性之后，那在这 cocos 里面它会自动刷新。你可以看一下佩奇这个节点。下边就有这两个参数了，有两个属性，第一个是 step 属性，第二个是 Towardsleft 属性。

然后我们就可以来修改来实现这个移动，我们在这里边添加一个 move 方法
当这个鼠标点击的时候，我们响应下鼠标点击事件，对应的处理方法**this.move**，

然后在这里边我们按照这两个属性的设置，如果向左的话就是 this.node.x减去这个步长，如果向右的话就是 this.node.x+，x 坐标添加，向右，这是我们整个的这个写法

move(evt:cc.Event.Evenmouse){
  if(this.towardsLeft)
  {
    this.node.x -= this.step;//向左走
  }
  else
  {
    this.node.x += this.step;//向右走
  }
}

第二步的话我们就可以在属性面板里边来初始化这两个的值。

也就说如果我们想修改它的初始值的话，其实可以在这个属性面板里边对它进行修改。比如说你看我们现在的值是步长为 20 像素，向左，我们运行一下这个程序。

那如果你想让它向右移动的话，你不用改这个代码。如果想向右移动的话，直接把这个值Towards Left设置一下就可以了，我们再运行程序，点击这个小猪可以发现它现在就是向右移动的了，也就是说我们通过直接在属性面板里边就可以对它的属性来进行初始化的赋值，这就是这个属性的含义，可以在这个界面里边直接对它进行赋值。

这个初始值是不需要在这个脚本里边来改的，直接在面板里面改一下就行了，再比如说我们想它移动的步子大一点，把它改成40，然后向左移动，就是每一步向左移动 40 个像素，再执行一下。可以发现当这时候我们点小猪的时候，它每次移动的距离那就变大了。

通过这个演示，大家应该是已经明白了这个属性是怎么用的，也就是在这里边定一个属性。然后我们就可以在这个面板里边对它进行来初始化，调整它的各个属性参数

接下来我们可以再添加一个新的节点，比如说我们添加一个乔治的角色。我们可以从前面的章节里边把这个素材给拷贝过来。 添加一个节点，把乔治移动到这个位置，佩奇移动到这个位置。

现在我们有了一个新的节点乔治，那我希望乔治也能够移动，那这时候我们说是不是要写一个新的脚本，没有必要，我们只需要把这个脚本附加给这个乔治就可以了，让他也添加这个同样的一个脚本组件。

那我们想乔治向左移动还是向右移动，让它向右移动。那乔治是一个小朋友，所以它每次移动的距离会小一些，所以我们可以把它的步长改为10，然后我们保存一下，然后再运行一下。那这时候我们这个场景里边就有两个角色，小猪点它一下是向左移动的，每次移动 40 个像素。然后这个乔治点它一下之后就是向右移动，每次移动 10 个像素，达到这样的一个效果。

通过这个演示，我们就明白了这个属性是怎么样使用的。同时我们也明白了一个脚本其实是可以重复利用的脚本，相当于一个类，就是一个功能。这个脚本是可以附加于多个节点的。那在我们的例子里边，同样的一个pigscript 的脚本，那么它既可以附加在佩奇身上，让佩奇可以移动，同时它也可以附加在这个乔治身上，让乔治也可以移动。

然后我们也看到了这个脚本组件的属性，属性是可以在面板里边直接进行初始化的，这样就可以达到一个脚本多次使用的效果。那么相关的参数你把它做成属性，然后在这个面板里边给它进行初始化就可以了。

好的，我们这节课就讲这么多，大家对照我们这个视频自己来练习一下，谢谢。