Cocos 打字机效果

版本：2.4.4

参考：cocos论坛-富文本打字机效果

一 功能需求

游戏中有剧情对话时会用到打字机效果

功能需求

1 对话字符串需要逐字显示，那么就得用计时器来获取字符进行显示。

2 关键字需要高亮显示，所以要用到富文本cc.RichText。

3 需要换行，在字符串里加入 \n 就可以换行了，不需要额外处理。

4 点击屏幕空白处，文字会一次性全部显示出来，让急性子玩家快速过剧情。

5 打字结束后需要监听结束事件，以便处理其它事情。

二 打字机实现

我这里高亮关键字是一次性显示出来，并没有像参考的论坛水友那样也是逐字显示，而且只支持一层<color></color>，不能嵌套<color><color></color></color>。

setSpeed()设置显示速度。

finishNow()让文字一次性全部显示出来。

checkFinish()可以检查文字打印效果是否完成，用于对话结束后。

监听PrintEffect.FINISH事件可以在打字结束后处理其它事件。

PrintEffect.ts

const { ccclass, property } = cc._decorator;

/**
 * 打字机效果
 * @author chenkai 2022.8.31
 */
@ccclass
export default class PrintEffect {
    /**消息文本 cc.Label或cc.RichText*/
    private msgLab: any;
    /**需要显示的消息，支持一层richText <color=#ffffffff>xxx</color> */
    private msg: string;
    /**当前显示的消息字符串位置 */
    private curMsgIndex: number;
    /**打字机效果是否已播放完成 */
    private isFinish: boolean = false;
    /**文字显示速度 单位s */
    private textSpeed: number = 0.05;

    /**
     * 播放打字机效果
     * @param msgLab    消息文本 cc.Label或cc.RichText
     * @param msg       消息 支持一层richText <color=#ffffffff>xxx</color>
     * @param textSpeed 打印速度
     */
    public playEffect(msgLab: any, msg: string, textSpeed: number = 0.05) {
        this.isFinish = false;
        this.msgLab = msgLab;
        this.msg = msg;
        this.curMsgIndex = 0;
        this.msgLab.string = "";
        this.textSpeed = textSpeed;
        let sch = cc.director.getScheduler();
        sch.enableForTarget(this);
        sch.schedule(this.onSchedule, this, this.textSpeed);
    }

    /**定时处理 */
    private onSchedule() {
        //如果字符串包含"<color></color>"标签，则查找第一个"<"和第二个">"，一次性显示<color></color>包含的标签内容
        if (this.msg.charAt(this.curMsgIndex) == "<") {
            let flagCount = 0;
            while (this.curMsgIndex < this.msg.length) {
                this.curMsgIndex++;
                if (this.msg.charAt(this.curMsgIndex) == ">") {
                    flagCount++;
                    if (flagCount == 2) {
                        break;
                    }
                }
            }
        }
        //显示字符串
        this.curMsgIndex++;
        this.msgLab.string = this.msg.substr(0, this.curMsgIndex);
        //结束
        if (this.curMsgIndex >= this.msg.length) {
            let sch = cc.director.getScheduler();
            sch.unschedule(this.onSchedule, this);
            this.isFinish = true;
        }
    }

    /**
     * 设置打字速度
     * @param textSpeed 打字速度，单位s
     */
    public setSpeed(textSpeed: number) {
        this.textSpeed = textSpeed;
    }

    /**
     * 检查是否打印完成
     * @returns true打印完成 false打印未完成
     */
    public checkFinish() {
        return this.isFinish;
    }

    /**立即结束，并显示全部消息 */
    public finishNow() {
        let sch = cc.director.getScheduler();
        sch.unschedule(this.onSchedule, this);
        this.msgLab.string = this.msg;
        this.isFinish = true;
    }

    /**停止并清理文本 */
    public clear() {
        let sch = cc.director.getScheduler();
        sch.unschedule(this.onSchedule, this);
        this.msgLab.string = "";
        this.isFinish = true;
    }
}

三 使用打字机

const { ccclass, property } = cc._decorator;

/**
 * 主场景
 * @author chenkai 2022.8.31
 */
@ccclass
export default class MainScene extends cc.Component {

    @property({ type: cc.RichText, tooltip: "消息文本" })
    msgLab: cc.RichText = null;

    onl oad() {
        //创建打字机
        let printEffect: PrintEffect = new PrintEffect();
        //打字结束后输出
        printEffect.on(PrintEffect.FINISH, () => { console.log("打字结束"); }, this);
        //开始播放打字
        printEffect.playEffect(this.msgLab, "打字机效果打字机效果打字机效果\n打字机效果<color=#0fffff>打字机</color>效果打字机效果打字机效果\n打字机效果");
        //点击屏幕，则立刻结束打字
        this.node.on(cc.Node.EventType.TOUCH_END, () => {
            printEffect.finishNow();
        }, this);
    }
}

显示效果

搜索

复制