嗨!大家好,我是小蚂蚁。

今天分享一下如何在微信小游戏制作工具中实现文字逐个出现的打字机效果,这个小功能可以用于游戏中的文字对白的展示,如果你要做的是一个文字类游戏的话,那么肯定用的上。

最终的效果如下。

要实现打字机效果,最重要的是理解两个与字符有关的积木块的使用。

一个是“abc的字符数”,一个是“获取abcd的第2个字符到3个字符”。实现原理是什么呢?我们举个例子,假设要打印出“小蚂蚁教你做游戏”这样的 8 个字。首先,使用第一个积木获得这句话一共有多少个字,得到了 8 个字。然后接着使用一个循环,每次循环都使用第二个积木块去截取这句话中的文字,第一个循环截取的就是“第1个字符到第1个字符”,得到就是“小”,第二个循环截取“第1个字符到第2个字符”,得到“小蚂”,第三个循环截取“第1个字符到第3个字符”,得到"小蚂蚁".....直到截取到最后所有 8 个字都显示为止。

整个截取显示的过程其实是这样的:


小蚂
小蚂蚁
小蚂蚁教
小蚂蚁教你
小蚂蚁教你做
小蚂蚁教你做游
小蚂蚁教你做游戏

我们在游戏里看到的是一个字一个字的出现,而其实是在不断的用多一个字的文本替换原来的文本。

以上就是原理部分了,下面就到微信小游戏制作工具中动手实现一下。

我们要实现这样的一个功能:游戏启动后,使用打字机效果显示对白,一句对白显示结束后,玩家点击屏幕会继续显示下一句对白。如果在对白显示的过程中,玩家点击了屏幕,则这句对白不再以打字机效果逐个显示,而是直接显示出来。

这个也是很多游戏中都有使用的功能,玩家有的时候并没有足够的耐心等待文字一个一个的显示,此时我们就可以增加一种机制,只要玩家快速点击屏幕,就让对白快速的展示。

不要去考验玩家的耐心,通常玩家对于游戏的耐心都很少,一旦玩家失去了耐心,那就意味着要跟你的游戏说拜拜了。

首先,准备一下素材,一个“圆角对话框”和一个“敲击”音效。

圆角对话框位于素材库的“积木小Y”素材中。

接着创建几个全局变量。

文字对白表格:用于存放和编辑要显示的文字对白。

对话索引:记录当前显示的是文字对白表格第几行的文本。

显示间隔时间:每个字显示的间隔时间。

字符索引:记录当前的这句话要截取到第几个字。

正在显示对话:记录当前的对话是否正在以打字机的效果逐个显示。

最后,来看一下圆角对话框上的积木逻辑。

重点理解一下文字打字机效果的显示,只需要使用一个循环,以及两块与字符有关的积木块即可。另外,在下方的逻辑中使用了“停止当前精灵的其它事件”积木,这个积木能够强制的停止当前精灵上的执行积木,例如当前“对话”中的重复执行积木正在执行循环,此时使用停止积木,能够让这个循环立即终止并退出。正是使用这个特性,我们实现了玩家点击屏幕时,对白立即全部显示的效果。

以上就是文字逐个出现的打字机效果的实现了,预览一下最终效果。

除此之外,在讨论的这个功能的时候,我的一位学员还提出了一个使用“遮罩”行为来逐个显示文字的方案。

如图,为文字开启“遮罩”行为,使用循环逐渐增加遮罩的宽度,依次来实现逐个显示文字的效果。

最终显示的是这样的。

效果很不错,可以用于在游戏中显示标题,或者用它做一些更有意思的东西。不过,这个方案有一个弊端,就是最好用于一行文字的显示,因为多行的话会同时从左到右的逐渐显示。

今天的内容就到这里了,如果你的游戏里有显示文字对白的需求,不妨尝试一下这个“打字机”的效果。

如何实现文字逐个出现的打字机效果相关推荐

  1. Creator新手引导 | 限制只能点击一个按钮 | 文字打字机效果

    效果 实现这个非常简单巧妙 源码在文末 实现思路 节点有点多,一个一个讲解下 bg是游戏背景图,主要是为了和灰黑色的遮罩区别 Btn_parent是三个按钮的父节点,加了一个layout,使每个按钮不 ...

  2. hexo中文字实现打字机效果

    文字的打字机效果是不是感觉蛮炫呢,其实是用typed.js这个插件实现的哦~ 下载typed.js With NPM npm install typed.js With Yarn yarn add t ...

  3. 模拟打字机,文字逐个出现

    效果图: 上代码: <!DOCTYPE html> <html><head><meta charset="UTF-8"><ti ...

  4. Unity3D开发(编程)小技巧之二:文字如打字机效果逐字出现

    经过一番折腾(Ctrl C,Ctrl V),整理代码如下: /// <summary>/// 打字机效果/// </summary>/// <returns>< ...

  5. 【组件封装】vue打字机效果和文字发光

    目录 效果如下: 使用 1.下载插件 2.安装组件 3.用法 4.文字高亮和标签高亮 效果如下: 使用 1.下载插件 文档查看及官网:https://github.com/Orlandster/vue ...

  6. Unity 对话系统 文字打字机效果实现

    功能: 1.文字逐个出现 2.支持富文本 3.添加<float>标签可以延迟显示 4.想快速展示完调用函数 ImmediatelyShow 准备: 代码: using System; us ...

  7. 【Unity】带有字符淡入效果的TextMeshPro打字机效果组件

    [Unity]带有字符淡入效果的TextMeshPro打字机效果组件 在TextMeshPro中,可以通过 TMP_Text.maxVisibleCharacters 属性控制可见字符的个数,实现简单 ...

  8. cdn加载插件和npm安装的差别_web开发:打字机效果插件Typed.js

    本文同步发表在我的个人博客中: 沧沧凉凉​www.cclliang.com 打字机效果是非常酷的文字显示效果,视觉表现极佳,而通过Typed.js可以很简单的在web开发中实现打字机效果. 1. 官网 ...

  9. Gamemaker studio2经验(4)——打字机效果

    问题概述 在很多游戏中--算了实在不好意思写引言了,就直说啦.如果你是UT粉,想用gm搞搞UT的同人作品但是又无从下手,那么请看过来. 对于RPG类游戏,文字交流系统是不可或缺的,但是gm的文字系统- ...

最新文章

  1. 51. 顺时针打印矩阵[print matrix in clockwise direction]
  2. 如何在运行时打印出 SAP Spartacus 配置(config)信息
  3. 1万块钱如何理财可以获得最高收益?
  4. pla3d打印材料密度_口腔修复体制作用3D打印金属粉末的成型工艺与性能控制要点概述...
  5. 如何解决高并发,秒杀问题
  6. 前端学习(506):垂直居中的第二种方式
  7. Java 判断是否为汉字 判断是否为乱码 判断字符串是否为双整型数字 整数 数字...
  8. 如何应对缓存穿透和缓存雪崩问题?极其重要
  9. html背景设置为彩色,CSS3 彩色网格背景
  10. iOS 给测试人员测试手机APP的四种方法:真机运行(略),打ipa包,(testFlighe)邮件,蒲公英(三)蒲公英
  11. ubuntu下载python3.8_ubuntu16.04纯净版-安装Python3.8.1/升级pip
  12. 基于js利用经纬度进行两地的距离计算(转)
  13. 百鸡问题的四种(层)解法
  14. 6PSS并联结构的运动学正逆解推导
  15. 六、CSS3的美化字体与段落
  16. goto解密PHP源码解密程序源码下载
  17. 前端开发中PC端和移动端网站的区别
  18. SONET/SDH帧格式
  19. 阿里云云效平台使用——Windows上使用阿里云云效(RDC)Git拉取代码
  20. “健康童乐园”精准帮扶乡村儿童 为乡村振兴未来加码

热门文章

  1. HazelEngine 学习记录 - Layers
  2. STM32之BKP原理
  3. 有趣的推理html,关于有趣的推理评课稿
  4. 人脸识别:路在何方?| 爱莫受邀参加VALSE Webinar报告会
  5. 最近在玩游戏:魔兽世界
  6. iceberg-flink 九:累积窗口按照天统计,数据不是从0:00-11:59 统计。
  7. 2020,我不想奋斗了
  8. 东南亚跨境电商如何做测评自养号
  9. 湖人行--(kobe bryant)
  10. 【杂记】如何利用Python3+you-get快速的下载B站的视频(尤其是多P的教程类视频)