专栏首页韩东吉的Unity杂货铺零基础入门 14: UGUI 打字机效果实现

零基础入门 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来实现打字机的分享就结束了。

本文分享自微信公众号 - 韩东吉的Unity杂货铺(DeveloperJimin),作者:Jimin

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-01-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 零基础入门 13: UGUI Text

    前几篇介绍了UGUI里的Image,今天来说下UGUI 的Text,显示文本的组件。因为有了之前代码创建Image的铺垫,所以对Text的使用就都在这篇介绍了。

    韩东吉
  • 零基础入门 17: UGUI Toggle

    很久没更,最近公司的手游准备二测,加上蛮牛上教程的同步更新,所以一直到现在才开始恢复公众号的内容更新。之后会在游戏蛮牛和公众号上同步更新。

    韩东吉
  • Unity各版本资源文件

    韩东吉
  • 用python代码模拟键盘输入

    今天在写代码时遇到一种情况,代码只能通过外部操作来判断,这时我就想到用python的代码来模拟一个键盘输入的值。

    py3study
  • Beam Search、GREEDY DECODER、SAMPLING DECODER等解码器工作原理可视化

    与翻译模型类似,我们的图像字幕模型通过输入图像张量和特殊的句首标记(即<start>)来启动字幕生成过程。这个模型生成了我们单词的概率分布(实际上是logits...

    deephub
  • 使用NATS实现服务网格功能,第2部分:安全性

    继续我的第一篇文章关于服务网格的概念和讨论,接下来我将关注NATS 2.0和服务网格在安全领域的概念。服务网格的安全部分包括端到端加密(相互TLS)、身份验证、...

    CNCF
  • 在代码中封装变化

    软件开发是一种独特的人类活动,但与其他活动,如:数学、写作和工程等相似。我认为编写软件是一个建模过程,但是,与在空间中建模物理事物不同,我们建模的是在时间中发生...

    程序你好
  • Hacking with iOS: SwiftUI Edition - Word Scramble 项目——当APP启动时运行代码

    当Xcode构建一个iOS项目时,它会将编译的程序、Info.plist文件、资源目录和任何其他资源放在一个名为bundle的目录中,然后将该bundle命名为...

    韦弦zhy
  • PsiXBot:模块化.NET僵尸网络的进化

    本文中我们将分享我们对模块化恶意软件 PsiXBot 的分析。该恶意软件于 2017 年首次出现,最近一段时间核心代码与模块有了很大改变。其中包括键盘记录与 O...

    FB客服
  • leetcode 30 Substring with Concatenation of All Words

    @坤的

扫码关注云+社区

领取腾讯云代金券