TS+cocos creator实现打字机效果，单字出现

最近在做游戏时遇到了需要将文本内容一个字一个字出现的需求，就想着添加一个组件实现打字机的效果，方法比较简单，我这里用的是cocos creator 2.4版本。

const { ccclass, property } = cc._decorator;

@ccclass

export default class TypewriterComponent extends cc.Component {
  @property(cc.Node)
  textLabel: cc.Node = null;

  @property({ displayName: "打字速度" })
  typingSpeed: number = 1; // 打字速度，每秒多少个字符

  @property({ displayName: "文本内容"})
  content: string = ""; // 完整的文本内容
  
  private currentIndex: number = 0; // 当前打字到的索引
  private typingFinish: boolean = false; // 打字是否完成

  start() {
    this.textLabel.getComponent(cc.Label).string = ""; // 清空文本内容
    this.typingFinish = false;
    this.typewriterEffect();
  }

  typewriterEffect() {
    this.schedule(this.typeNextCharacter, 1 / this.typingSpeed);
  }

  typeNextCharacter() {
    if (this.typingFinish) {
      this.unschedule(this.typeNextCharacter);
      return;
    }

    // 添加下一个字符到文本内容
    this.textLabel.getComponent(cc.Label).string += this.content[this.currentIndex];

    // 更新当前索引
    this.currentIndex++;

    // 判断是否打字完成
    if (this.currentIndex >= this.content.length) {
      this.typingFinish = true;
    }
  }
}

我们创建了一个名为 Typewriter 的组件，其中包含一个 cc.Label 类型的属性 textLabel，用于显示打字机效果的文本。还有一个 typingSpeed 属性，用于设置打字速度，即每秒钟打多少个字符。

在 start 方法中，我们进行了一些初始化工作，包括清空文本内容、重置打字状态，并调用 typewriterEffect 方法开始打字机效果。

在 typewriterEffect 方法中，我们使用 schedule 方法来定时执行 typeNextCharacter 方法，每隔一定时间打印下一个字符。

typeNextCharacter 方法负责实现逐个添加字符的逻辑，每次将下一个字符添加到文本内容中，并更新当前索引。当打字到最后一个字符时，打字完成。

代码比较简单，把组件挂载到label节点下就行了，可以调节打字的速度，注意要将想要打出来的文本内容写在这个组件下面而不是label里面，string里面的内容我在start方法中清空了。