如何实现文字逐个出现的打字机效果

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

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


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


最终的效果如下。



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



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


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

小蚂

小蚂蚁

小蚂蚁教

小蚂蚁教你

小蚂蚁教你做

小蚂蚁教你做游

小蚂蚁教你做游戏

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


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


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


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

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

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



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



接着创建几个全局变量。



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

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

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

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

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


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



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


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



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



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


最终显示的是这样的。



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


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


识别下方小程序码可体验打字机示例Demo。

这里是我的游戏开发课程服务,不只是一门课,而是围绕着新手学习做游戏有关的一整套服务。致力于帮助更多的人学会做游戏并做出自己的游戏,欢迎来跟 67 位同学一起学习做游戏。【点击这里】了解课程服务详情。

另外,最近上线了一门新的进阶课,帮助你进一步提升做游戏的技能。原价199,上线首月优惠价格 139,有需要的朋友可以【点击这里】了解。

这里是小蚂蚁的小游戏系列,闲暇之余希望能给你带来片刻的放松和愉悦。无需下载安装,点击下方的游戏卡片就可以直接玩啦!








也欢迎加个微信,交个朋友,朋友圈每日分享与做游戏有关的知识和内容,可以来围观。备注“学习做游戏”可免费领取学习做游戏的原创教程资料。接受付费咨询,不闲聊,望见谅。



相关文章
|
3月前
|
机器学习/深度学习 算法 数据安全/隐私保护
使用程序去除图片水印的一些思路
使用程序去除图片水印的一些思路
102 0
|
4月前
|
C语言
c语言编程练习题:7-3 输出带框文字
本题要求编写程序,输出指定的带框文字。
53 0
|
4月前
|
索引
在微信小游戏制作工具中实现文字逐个出现的打字机效果
在微信小游戏制作工具中实现文字逐个出现的打字机效果
32 0
|
8月前
|
前端开发 JavaScript
前端——把一大段文字显示在前端并且有文字下面有虚线
前端——把一大段文字显示在前端并且有文字下面有虚线
|
11月前
|
前端开发
前端学习案例2-文本溢出-呈现圆点显示2多行文本溢出
前端学习案例2-文本溢出-呈现圆点显示2多行文本溢出
52 0
|
11月前
|
前端开发
前端学习案例1-文本溢出-呈现圆点显示1
前端学习案例1-文本溢出-呈现圆点显示1
55 0
|
前端开发
巧用滤镜实现高级感拉满的文字快闪切换效果
巧用滤镜实现高级感拉满的文字快闪切换效果
199 0
巧用滤镜实现高级感拉满的文字快闪切换效果
|
自然语言处理 算法
☆打卡算法☆LeetCode 68、文本左右对齐 算法解析
“给定单词数组和一个长度maxWidth,重新排版单词,使其成为恰好有maxWWidth个字符,且左右对齐的文本。”
|
XML 数据格式
AutoTextView实现文字自动翻转效果
AutoTextView实现文字自动翻转效果
AutoTextView实现文字自动翻转效果