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

  1. let richText = this.viewNode.getChildByName('richText').getComponent(cc.RichText);
  2. const str = "<u>hello</u><color=#ff0000>Red Text,</color><br/>"+
  3. "<size=60>enlarge me,</size>"+
  4. "<br/><outline color=red width=4>A label with <i>outline,</i></outline>"+
  5. "<br/><b>This text will be rendered as bold,</b>"+
  6. "<br/><i>This text will be rendered as italic。</i>";
  7. this.richText(richText,str);
  8.  
  9. private richText(richTextNode,str: string = "") {
  10. const regex = /<.+?\/?>/g; // 匹配尖括号标签
  11. const matchArr = str.match(regex);
  12. const specialChar = "│";
  13. const replaceStr = str.replace(regex, specialChar); // 标签数组
  14. const textArr: string[] = replaceStr.split(specialChar); // 文字数组
  15. const strArr: string[] = []; // 存放处理过的文字数组
  16. let paraNum = 0; // 待替换参数个数
  17. for (let text of textArr) {
  18. // 非空字符替换成类似 $[0-n] 参数
  19. if (text !== "") {
  20. text = `$[${paraNum}]`;
  21. paraNum += 1;
  22. }
  23. strArr.push(text);
  24. }
  25. let templetStr: string = strArr.join(specialChar); // 数组转成待替换字符串
  26. for (let index = 0; index < textArr.length; index++) {
  27. // 转换代替换字符串之后, 删除文字数组多余空字符
  28. if (textArr[index] === "") {
  29. textArr.splice(index, 1);
  30. index = index - 1;
  31. }
  32. }
  33. while (templetStr.search(specialChar) !== -1) {
  34. // 数组转成的字符串原本 '特殊字符' 位置都是富文本标签的位置, 替换回标签
  35. if (matchArr[0]) {
  36. templetStr = templetStr.replace(specialChar, matchArr[0].toString());
  37. matchArr.splice(0, 1);
  38. } else {
  39. templetStr = templetStr.replace(specialChar, "");// 空字符串替换,防止死循环
  40. console.warn("matchArr not enough");
  41. }
  42. }
  43. const lastStrArr: string[] = []; // 转换后富文本数组
  44. const arrayParm: string[] = new Array(paraNum).fill(""); // 替换参数数组
  45. for (let i = 0; i < textArr.length; i++) {
  46. for (const text of textArr[i]) {
  47. arrayParm[i] = arrayParm[i] + text;
  48. let replaceStr1 = templetStr;
  49. for (let index = 0; index < paraNum; index++) {
  50. replaceStr1 = replaceStr1.replace(`$[${index}]`, arrayParm[index]);
  51. }
  52. lastStrArr.push(replaceStr1);
  53. }
  54. }
  55. let lastStrIndex = 0;
  56. const func = () => {
  57. if (lastStrIndex >= lastStrArr.length) {
  58. return;
  59. }
  60. richTextNode.string = lastStrArr[lastStrIndex];
  61. lastStrIndex += 1;
  62. setTimeout(() => {
  63. func();
  64. }, 100);
  65. };
  66. setTimeout(() => {
  67. func();
  68. }, 1000);
  69. }

我只是战略性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. 获取登录用户ip

    public static String getIpAddr(HttpServletRequest request) { String ipAddress = null; try { ipAddres ...

  2. Laravel - 解决连接MySQL时报"The server requested authentication method unknown to the client”错误

    2019-04-12发布:hangge阅读:934   1,问题描述 最近建了个 Laravel 项目,当配置好 MySQL 数据库进行请求时,页面报如下错误:   SQLSTATE[HY000] [ ...

  3. php文件上传下载组件

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

  4. php利用webuploader实现超大文件分片上传、断点续传

    PHP用超级全局变量数组$_FILES来记录文件上传相关信息的. 1.file_uploads=on/off 是否允许通过http方式上传文件 2.max_execution_time=30 允许脚本 ...

  5. 2019暑期金华集训 Day1 组合计数

    自闭集训 Day1 组合计数 T1 \(n\le 10\):直接暴力枚举. \(n\le 32\):meet in the middle,如果左边选了\(x\),右边选了\(y\)(且\(x+y\le ...

  6. linux环境下固定ip操作

    背景: 使用虚拟机管理软件VMvare workstation 安装好liunx虚拟机(centos)成功,下面为了固定linux的ip进行一系列设置 参考的文件有部分不是很详细,在借鉴它的基础上进行 ...

  7. FOI冬令营 Day 3

    目录 T1.签到题(sort) 传送门 Code T2.送分题(queue) 传送门 Code T3.简单题(game) 传送门 Code 咕咕咕 T1.签到题(sort) 传送门 原题:LOJ 27 ...

  8. C# 获取网络文件 批量压缩成 文件流 并下载 压缩包

    需要的DLL : ICSharpCode.SharpZipLib.dll JS部分 //下载所有文件的 压缩包 function DownAllFile() { //zip文件名 var zipNam ...

  9. zabbix(4)数据库表分区优化

    一.zabbix 数据库存储 zabbix-server将采集到的数据存储在数据库(mysql.oracle等),而数据存储的大小与每秒处理的数量量有关,因此数据存储取决于以下两个因数: (1)Req ...

  10. Linux make menuconfig打开失败

    OS:Ubuntu 16.04 LTS 使用“make menuconfig”配置kernel时,提示make menuconfig打开失败 $ make menuconfig *** Unable ...