Hi! Hello everyone, I am Little Ant.
Today I would like to share how to realize the typewriter effect of text appearing one by one in the WeChat mini game making tool. This small function can be used to display the text dialogue in the game. If you are going to make a text game, then you must use it. .
The final effect is as follows.
To achieve the typewriter effect, the most important thing is to understand the use of two building blocks related to characters.
One is "the number of characters of abc", and the other is "get the second to third characters of abcd". What is the realization principle? Let's take an example, assuming that we want to print out 8 words like "little ants teach you how to play games". First, use the first building block to get how many words there are in this sentence, and you get 8 words. Then use a loop, each loop uses the second building block to intercept the text in this sentence, the first loop intercepts "the first character to the first character", and the result is "small", The second loop intercepts "the first character to the second character" to get "little ant", and the third loop intercepts "the first character to the third character" to get "little ant"..... Until all 8 characters are displayed at the end of the interception.
The entire interception display process is actually like this:
Little ants
, little ants,
little ants teach
you, little ants teach you,
little ants teach you how
to play, little ants teach you how to play games,
little ants teach you how to play games
What we see in the game is the appearance of one character at a time, but in fact it is constantly replacing the original text with one more character.
The above is the principle part, let’s implement it in the WeChat mini game creation tool.
We want to implement such a function: after the game starts, the dialogue will be displayed using a typewriter effect. After a dialogue is displayed, the player will continue to display the next dialogue by clicking on the screen. If the player clicks on the screen while the dialogue is displayed, the dialogue will no longer be displayed one by one with the effect of a typewriter, but will be displayed directly.
This is also a function that is used in many games. Sometimes players are not patient enough to wait for the text to be displayed one by one. At this time, we can add a mechanism, as long as the player taps the screen quickly, the dialogue will be displayed quickly.
不要去考验玩家的耐心，通常玩家对于游戏的耐心都很少，一旦玩家失去了耐心，那就意味着要跟你的游戏说拜拜了。
首先，准备一下素材，一个“圆角对话框”和一个“敲击”音效。
圆角对话框位于素材库的“积木小Y”素材中。
接着创建几个全局变量。
文字对白表格：用于存放和编辑要显示的文字对白。
对话索引：记录当前显示的是文字对白表格第几行的文本。
显示间隔时间：每个字显示的间隔时间。
字符索引：记录当前的这句话要截取到第几个字。
正在显示对话：记录当前的对话是否正在以打字机的效果逐个显示。
最后，来看一下圆角对话框上的积木逻辑。
重点理解一下文字打字机效果的显示，只需要使用一个循环，以及两块与字符有关的积木块即可。另外，在下方的逻辑中使用了“停止当前精灵的其它事件”积木，这个积木能够强制的停止当前精灵上的执行积木，例如当前“对话”中的重复执行积木正在执行循环，此时使用停止积木，能够让这个循环立即终止并退出。正是使用这个特性，我们实现了玩家点击屏幕时，对白立即全部显示的效果。
以上就是文字逐个出现的打字机效果的实现了，预览一下最终效果。
除此之外，在讨论的这个功能的时候，我的一位学员还提出了一个使用“遮罩”行为来逐个显示文字的方案。
如图，为文字开启“遮罩”行为，使用循环逐渐增加遮罩的宽度，依次来实现逐个显示文字的效果。
最终显示的是这样的。
效果很不错，可以用于在游戏中显示标题，或者用它做一些更有意思的东西。不过，这个方案有一个弊端，就是最好用于一行文字的显示，因为多行的话会同时从左到右的逐渐显示。
今天的内容就到这里了，如果你的游戏里有显示文字对白的需求，不妨尝试一下这个“打字机”的效果。