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

Posted 2022-07-21 小蚂蚁教你做游戏

嗨！大家好，我是小蚂蚁。欢迎关注我的微信公众号【小蚂蚁教你做游戏】，学习更多游戏开发原创教程。

嗨！大家好，我是小蚂蚁。

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

最终的效果如下。

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

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

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

小

小蚂

小蚂蚁

小蚂蚁教

小蚂蚁教你

小蚂蚁教你做

小蚂蚁教你做游

小蚂蚁教你做游戏

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

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

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

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

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

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

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

接着创建几个全局变量。

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

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

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

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

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

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

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

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

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

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

最终显示的是这样的。

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

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

---

欢迎关注我的微信公众号【小蚂蚁教你做游戏】，学习更多游戏开发原创教程。