作为一个萌新,我只想说我是没有感情的粘贴工具!

let richText = this.viewNode.getChildByName('richText').getComponent(cc.RichText);
const str = "<u>hello</u><color=#ff0000>Red Text,</color><br/>"+
"<size=60>enlarge me,</size>"+
"<br/><outline color=red width=4>A label with <i>outline,</i></outline>"+
"<br/><b>This text will be rendered as bold,</b>"+
"<br/><i>This text will be rendered as italic。</i>";
this.richText(richText,str); private richText(richTextNode,str: string = "") {
const regex = /<.+?\/?>/g; // 匹配尖括号标签
const matchArr = str.match(regex);
const specialChar = "│";
const replaceStr = str.replace(regex, specialChar); // 标签数组
const textArr: string[] = replaceStr.split(specialChar); // 文字数组
const strArr: string[] = []; // 存放处理过的文字数组
let paraNum = 0; // 待替换参数个数
for (let text of textArr) {
// 非空字符替换成类似 $[0-n] 参数
if (text !== "") {
text = `$[${paraNum}]`;
paraNum += 1;
}
strArr.push(text);
}
let templetStr: string = strArr.join(specialChar); // 数组转成待替换字符串
for (let index = 0; index < textArr.length; index++) {
// 转换代替换字符串之后, 删除文字数组多余空字符
if (textArr[index] === "") {
textArr.splice(index, 1);
index = index - 1;
}
}
while (templetStr.search(specialChar) !== -1) {
// 数组转成的字符串原本 '特殊字符' 位置都是富文本标签的位置, 替换回标签
if (matchArr[0]) {
templetStr = templetStr.replace(specialChar, matchArr[0].toString());
matchArr.splice(0, 1);
} else {
templetStr = templetStr.replace(specialChar, "");// 空字符串替换,防止死循环
console.warn("matchArr not enough");
}
}
const lastStrArr: string[] = []; // 转换后富文本数组
const arrayParm: string[] = new Array(paraNum).fill(""); // 替换参数数组
for (let i = 0; i < textArr.length; i++) {
for (const text of textArr[i]) {
arrayParm[i] = arrayParm[i] + text;
let replaceStr1 = templetStr;
for (let index = 0; index < paraNum; index++) {
replaceStr1 = replaceStr1.replace(`$[${index}]`, arrayParm[index]);
}
lastStrArr.push(replaceStr1);
}
}
let lastStrIndex = 0;
const func = () => {
if (lastStrIndex >= lastStrArr.length) {
return;
}
richTextNode.string = lastStrArr[lastStrIndex];
lastStrIndex += 1;
setTimeout(() => {
func();
}, 100);
};
setTimeout(() => {
func();
}, 1000);
}

我只是战略性mark 打扰了~~

cocos creator 实现打字机的效果的更多相关文章

  1. cocos creator 中的粒子效果

    途中的粒子效果,通过plist文件和png两个文件,创建一个粒子节点,将plist文件拖入到粒子节点的file属性中,然后给custom属性打钩,把png文件拖入到texture属性中即可.

  2. Cocos Creator 的实现拖尾效果

    在游戏中,有时会需要在某个游戏对象上加上移动后的轨迹若隐若现的效果.使得游戏的效果较好,比如游戏大招,刀光,法术,流星划痕之类. Cocos Creator提供了一种内置的拖尾渐隐效果的实现方法:组件 ...

  3. cocos creator实现棋牌游戏滑动选牌的功能

    最近在玩cocos creator,打算学着做一款类似双扣游戏的棋牌,名字叫文成三星,比双扣还要多一扣,因为需要三幅牌,在我们老家比较流行这种玩法. 目前实现了绝大部分的逻辑效果如下: 有一点不好的体 ...

  4. Cocos Creator—最佳构建部署实践

    这篇文章主要是我们团队在使用Cocos Creator过程中的一些关于部署方面的实践总结,标题党了一回,严格来说,应该是<快看漫画游戏研发团队使用Cocos Creator构建部署最佳实践> ...

  5. Cocos Creator—如何给资源打MD5版本号

    Cocos Creator 是Cocos最新一代的游戏开发者工具,基于 Cocos2d-x,组件化,脚本化,数据驱动,跨平台发布.Cocos Creator的开发思路已经逐步跟Unity 3D靠拢,写 ...

  6. cocos creator入门

    前面的话 Cocos Creator 是一个完整的游戏开发解决方案,包括了 cocos2d-x 引擎的 JavaScript 实现,以及快速开发游戏所需要的各种图形界面工具.Cocos Creator ...

  7. Cocos Creator学习三:生命周期回调函数

    1.目的:学习生命周期回调函数以及回调顺序,更有利于我们逻辑的处理把控. 2.生命周期回调函数: 节点:指cc.Node:组件:指cc.Component. ①onLoad:脚本组件绑定的节点所在场景 ...

  8. Cocos Creator 的Hello World

    1,创建项目[参考来源:官方文档] 在 Dashboard 中,打开 新建项目 选项卡,选中 Hello World 项目模板. 然后在项目路径栏中指定一个新项目存放路径,路径的最后一部分就是项目文件 ...

  9. Cocos Creator实现的《点我+1》

    一.前言 在学习Cocos中,需要一些东西来练手,于是前段时间就开发仿照一款公司之前的产品<点我+1>来做,仿照过程中,所有的算法逻辑都是自己研究的,并没有参考公司代码,也没有使用公司的美 ...

随机推荐

  1. LOJ P10116 清点人数 题解

    每日一题 day13 打卡 Analysis 用简单的树状数组维护单点修改和查询就行了 #include<iostream> #include<cstdio> #include ...

  2. Linux FC/iSCSI存储设备管理系列(一):Linux系统设备驱动入门

    Linux FC/iSCSI存储设备管理系列(一):Linux系统设备驱动入门 转载请在文首保留原文出处:EMC中文支持论坛 - https://community.emc.com/go/chines ...

  3. 分治 FFT学习笔记

    先给一道luogu板子题:P4721 [模板]分治 FFT 今天模拟有道题的部分分做法是分治fft,于是就学了一下.感觉不是很难,国赛上如果推出式子的话应该能写出来. 分治fft用来解决这么一个式子\ ...

  4. yarn 强制孙依赖的版本

    今天博主遇到一个棘手的问题,@vue/cli-service 依赖了一个包 portfiner@^1.0.20,但是 2 天前,这个包更新到了1.0.22,带来了一些问题. 博主第一反应就是想 yar ...

  5. P3986 斐波那契数列——数学(EXGCD)

    https://www.luogu.org/problem/P3986 很久很久以前,我好像写过exgcd,但是我已经忘了: 洛谷上搜EXGCD搜不到,要搜(扩展欧几里得) 这道题就是ax+by=k, ...

  6. python 时间等待

    #coding=utf- import time t1=time.time() time.sleep() t2=time.time() print(t2-t1) 输出 3.00304102898

  7. Nut和nuTilda【翻译】

    翻译自:CFD-online 帖子地址:http://www.cfd-online.com/Forums/openfoam-solving/72176-nut-nutilda.html phile: ...

  8. GitLab安装及备份迁移数据

    centos7安装GitLab 下载相应版本rpm包 https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/ 我此处下载9.3.6版本. # w ...

  9. kafka 讲讲acks参数对消息持久化的影响

    目录 (0)写在前面 (1)如何保证宕机时数据不丢失? (2)多副本冗余的高可用机制 (3)多副本之间数据如何同步? (4)ISR到底指的什么东西? (5)acks参数的含义? (6)最后的思考   ...

  10. 文件CRC和MD5校验

    文件CRC和MD5校验 CRC和MD5用于文件和数据的传输校验,以确认是否接收成功. unit CRCMD5; interface { 获取文件CRC校验码 } function GetFileCRC ...