官方文档

关键词

计时器脚本日志子节点文字颜色左对齐锚点文字节点

计时器 API

image.png
下边我们讲一下计时器的用法。在 cocos 里边，我们除了可以使用 update 方法按帧来进行绘制，实现动画效果，也可以使用另外一套计时器的 API 。

schedule

这个和我们在 javascript 里边的写法基本上是一个意思，提供了一个方法叫** schedule **，可以来启动一个定时器。然后 **unschedule **就是停止一个定时器。启动定时器的时候，可以最多传入四个参数
image.png
分别是

  • callback 表示的是计时器的回调
  • interval 表示的是计时器的间隔
  • repeat表示的是重复运行少次
  • delay 表示是首次运行的时候需要得等多长时间

那么这个 schedule 方法还有 unschedule 方法都是定义在cc.component里边的。所以如果只要使用计时器的话，直接在脚本里边使用就可以了。因为我们的脚本就是继承于 cc.component ，既然是在父类里边定义好的方法，所以我们在这里边都是可以直接调用的。
image.png
image.png

计时器的应用

我们将使用计时器来实现一个渐变的气泡提示，可以看到下边有一个文字提示， 这个提示是一个字一个字动态的显现出来的，那么这样的一个动态显现的效果，我们可以使用计时器来实现。
image.png
先看一下这个布置，首先后边应该有一个背景，背景上面有个 label ，label 显示文字，但是 label 显示的是静态的文字，我们可以用另外一个脚本来控制这个 label 来显示这几个文字

首先我把这个背景图片给拖过来，这就是我们要显示这个提示文字的地方。
image.png
然后在下边添加一个子节点，因为我们要显示文字
image.png
所以在上面添加一个 label 的子节点，右边把string属性设置一下，把它的文字颜色也稍微改得明显一些，目前来说，这个只是一个静态的展示。
image.png
如果你想让提示动态的显示出来的话，就需要使用脚本来控制它，这里边有一个 showtips 脚本，直接把它添加给 label 节点。
image.png
看一下show tips 的写法。先显示恭，然后恭喜，然后恭喜请，把每一个字逐个的把它排出来，中间的时间间隔你可以自己定一下，比如说每隔 0.1 秒蹦一个出来，或者是每隔 0.2 秒蹦一个出来都是可以的，自己来调节一下。

schedule

show tips 这个脚本在这里边有一个** this.schedule **这个方法我们只传入两个参数，表示它会无限的运行下去，每次运行0.3 秒，最多可以传入四个参数，后边你要不传的话都有默认的行为。我们这里边是每隔 0.3 秒运行一下。 

  1. label:cc.Label = null;
  2. text:string = null;
  3. index:number = 0;
  5. onLoad(){
  6.   this.label = this.getComponent(cc.Label);
  7.   this.text = this.label.string; //取得完整的文本
  8.   this.label.string = ''; //清空文本，从头显示
  10.   this.schedule(this.onTimer,0.3);
  11. }

substr/unschedule

onTimer方法里面只需要把字符串原文先取出来，一共要显示的是七个字，一开始这个 label 一个字都不显示，过 0.3 秒之后显示第一个字，恭，再过 0.3 秒显示恭喜，再过 0.3 秒显示恭喜请。 

  1. onTimer(){
  2.   this.index ++;
  4.   let str:string = this.text.substr(0,this.index);
  5.   this.label.string = str;
  7.   if(this.index >= this.text.length)
  8.      this.unschedule(this.onTimer);
  9. }

ontimer 里面写一下index 用来记录显示第几个字，获取前面的子串，然后显示出来。如果已经全部显示完了的话，再停止这个计时器，可以加一个日志。 

  1. onTimer(){
  2.   this.index ++;
  4.   let str:string = this.text.substr(0,this.index);
  5.   this.label.string = str;
  6.   cc.log('显示label = '+ str);
  7.   if(this.index >= this.text.length)
  8.      this.unschedule(this.onTimer);
  9. }

我们把 label 显示的文字，可以把它通过日志给打印出来，方便我们的调试，保存一下脚本，重新运行，通过日志来看更清楚。

显示效果还需要优化，我们希望字从左侧弹出来，这样的话我们可以来控制一下这个 label 的显示，文字节点 label 组件下面有好多属性，把这个 水平对齐设置为左，锚点基准点设置在左侧，现在显示的时候就是从左到右一次显示了。
image.png
重点学习一下** this.schedule **和** this.unschedule **，schedule 就是启动一个定时器。那么当你把这个事情做完之后，如果不是无限循环的话，那么就可以在适合的时候把它给停止一下。我们调unschedule 这个方法，把回调方法的名字传进来，就可以来停止定时器