零基础入门 14： UGUI 打字机效果实现

长话短说，这期主要分享一篇通过UGUI的Text来实现的打字机效果。

配上音频，先来一发效果吧。

动图和音频更配哦，（文字百度乱找的，不要在意）

如上图，效果大概就是这样，有一段文字，和音频，文字要这种显示效果，并且在文字出现的时候，要有背景键盘音效的声音，来模拟打字机的效果。最好还可以调整文字的出现速度。

那么如何实现呢？

今天就来分享一下利用UGUI Text实现打字机的效果。

进入正题

首先创建一个脚本，名为JiminTextWriter，然后将键盘的音频资源也拖入到项目内，保存到名为scene的场景。此时，Project窗口内容，如下图

双击脚本，增加UnityEngine.UI命名空间，然后公开一个Text。

然后回到Unity里创建一个Text对象，并且将脚本挂到canvas上，然后将Text拖动到脚本上。

然后随便复制一段文本到Text内。如下图。

然后为了让背景像效果图一样纯黑色，我们稍微对摄像机修改一下。如下图，我们修改了摄像机的颜色为纯黑色，然后修改了文字的颜色为白色。稍微调整了一下文字的字号，看起来和效果图有那么点相似了，除了不会动以外。

好了，接下来回到代码来实现打字机效果。

需求是最好可以控制文字的出现速度，所以我们公开一个变量，名为m_speed。然后公开一段打字时播放的音频文件。如下图，m_speed上面增加了[Range(1,30)]代表了一个范围，m_speed只能在1-30之间

然后切回Unity，我们把音频和速度赋值，速度我们设置为13.7。不是必须是这个值，根据自己的感觉和需求来。

然后在代码内增加一个函数，名为BeginTextShow，代表我们开始动画的入口

创建一个私有的bool类型变量，标记是否可以开始动画。

再创建一个string变量，保存Text当前的全部文本。以及float类型的时间的变化变量。

然后我们来完善BeginTextShow的逻辑实现。

代码有注释，这里我就不多说了，大家看图。

最后一句话，设置标记位，可以开始动画。

然后我们在Update函数里增加文本的控制逻辑，只有可以开始动画的时候，update刷新逻辑才有效。

然后，我们需要知道，当前的动画是否已经结束了，所以我们要判断，是否动画已经可以结束了。

subString是文本截取的方法，第一个参数是开始下标，我们写成0，代表从第一个字符开始，然后第二个参数是长度，之所以让m_timeChange += Time.deltaTime，是为了让文字的截取长度是不断增加的。

然后，我们最后再增加一个结束的方法，把标记位和其他的变化值都重置，然后把音频组件也关闭销毁。

然后在Update的逻辑里，加上对TextTweenFinish的调用。然后在Start里开始动画。

如下图，这样我们的代码逻辑就已经结束了，然后再看一次全部逻辑。

好了，此时我们切回Unity，运行看看效果吧。

让我们来调整一下速度，查看一下效果。当速度值特别小的时候，播放的就特别慢，反正就特别快。因为不是视频，所以音频的效果无法让大家体验了，可以点击一下上面的音频，来感受下这个效果。

好了，今天的UGUI Text来实现打字机的分享就结束了。