Unity打字机 三种方式教会你

Unity打字机教程

  • 预读
    • 成品
    • 第一步 创建UGUI布局 并 修改自适应
    • 第二步 添加文本框
    • 第三步 写代码
      • 之第一种:常规写法
      • 之第二种:协程+for循环
      • 之第三种:while循环 + 协程
      • 挂载脚本
    • 总结
    • 结束语

预读

大家好,我是橙子,今天为大家带来的是Unity场景切换进度条的教程。
为什么突然搞这个Unity打字机呢,是我的一位老师,给我了一个题,题目主要涉及的一部分内容就是打字机的这个效果,看了看网上的教程,层次不齐,所以我今天给大家来写一期这个打字机的效果。

★,♫◦★,♫◦★,♫◦★,--------------------华丽的分割线--------------------♫◦★,♫◦★,♫◦★,♫◦★,♫◦

成品

先来看下成品是什么样

我将分成三个案例,深度解析Unity打字机到底是如何做成的!授人与渔不如授人与渔。

第一步 创建UGUI布局 并 修改自适应

Unity打字机 三种方式教会你_第1张图片
在Hierarchy面板中的空白处,右击直接选择Image创建。

在Inspector窗口中 找到这个 点击后 按住AIt键 点击右下角的按钮
Unity打字机 三种方式教会你_第2张图片
让图片铺满全屏。
然后选中Hierarchy窗口中的Canvas
Unity打字机 三种方式教会你_第3张图片
把渲染模式,改为中间的Screen Space-Camera
如果这里不懂为什么要改成中间的 可以看我之前的文章(点击此处跳转)
Unity打字机 三种方式教会你_第4张图片
随后把摄像机拖拽过去
Unity打字机 三种方式教会你_第5张图片
把这里改成中间选项 并修改Refrernce Resolution(引用解析)
Unity打字机 三种方式教会你_第6张图片
到这里 自适应就做好了,咱们继续设计UI层面

Unity打字机 三种方式教会你_第7张图片
把创建的Image重新命名为bg,然后你可以在他的Color属性里 更改背景的颜色。
Unity打字机 三种方式教会你_第8张图片
再用刚才的方法,在bg上右击 UI—> Image 创建两个Image 如下图
Unity打字机 三种方式教会你_第9张图片
然后把人物素材 添加到Image上
Unity打字机 三种方式教会你_第10张图片
添加完成以后 感觉有点小… 没关系 点击这里让图片显示原始大小即可
Unity打字机 三种方式教会你_第11张图片
如果感觉还是太小,选中第一个Image 在Inspector里更改他的Scale
Unity打字机 三种方式教会你_第12张图片
为什么不选最后的Z 因为它是一个2D图片 不需要Z
Unity打字机 三种方式教会你_第13张图片
我把他们大小设置为了3 看起来不错

第二步 添加文本框

还是在bg上添加 Image 作为文本框的背景 并移动到合适的位置
添加完背景 以后 再从它的身上新建Text组件
Unity打字机 三种方式教会你_第14张图片
大概就像这样
Unity打字机 三种方式教会你_第15张图片
到这里 我们的UGUI层面就设计的差不多了

第三步 写代码

之第一种:常规写法

下面这种写法,比较传统 在FixedUpdate里每帧执行,这里可能有小伙伴疑惑?为什么不用Update?
因为Update不是每帧固定执行的,如果你电脑性能好,执行的就快一些,如果电脑性能差,就会卡顿一点,做不到完美丝滑的赶脚,所以这里用FixedUpdate Unity不管你电脑好与坏,都是每帧固定执行。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class TypeWriterDemo1 : MonoBehaviour
{
    [Header("打字间隔时间")]
    public float speedTime = 0.1f;//打字间隔时间

    float timer;//计时器时间
    Text TextCompnt;//Text文字组件
    int wordNumber;//文字数量
    bool isStart;//是否开始打字

    string wordContent;//----文字内容

    void Awake( )
    {
        TextCompnt = this.GetComponent<Text>();//从当前物体获取到Text组件
        isStart = true;//bool值的默认值是false  所以这里要重置为true
        wordContent = "你好!我是橙子~\n来自中国的一名Unity开发者,喜欢编程!\nHello! I am Orange ~, a Unity developer from China. I like programming!";
    }

    void FixedUpdate( )
    {
        StartTyping();
    }
    void StartTyping( )
    {
        if (isStart)
        {
            timer += Time.deltaTime;//简单的计时器
            if (timer >= speedTime)//如果计时器时间>打字间隔时间
            {
                timer = 0;//重置
                wordNumber++;//文字数量+1

                //Substring() 官方文档解释:从此实例检索子字符串。 子字符串从指定的字符位置开始且具有指定的长度。
                TextCompnt.text = wordContent.Substring((0), wordNumber);//数字数量的起始字符位置(从零开始)
                if (wordNumber >= wordContent.Length)//数字数量=文字的长度
                {
                    isStart = false;//停止打字
                }
            }
        }
    }
}

之第二种:协程+for循环

这一种呢 比上一种间接了很多,并用上了协程,实现方法相对简单

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class TypeWriterDemo2 : MonoBehaviour
{
    public float delay = 0.1f;
    string fullText = "你好!我是橙子~\n来自中国的一名Unity开发者,喜欢编程!\nHello! I am Orange ~, a Unity developer from China. I like programming!";
    string currentText;
    void Start()
    {
        StartCoroutine(ShowText());
    }
    IEnumerator ShowText( )
    {
        for (int i = 0; i < fullText.Length; i++)//遍历插入字符串的长度
        {
            currentText = fullText.Substring(0, i);//看demo1的代码注释
            this.GetComponent<Text>().text = currentText;
            yield return new WaitForSeconds(delay);//每次延迟的时间 数值越小 延迟越少
        }
    }
}

之第三种:while循环 + 协程

这种使用了方法传递的模式,此种相当于封装了方法。
如果一个项目种频繁使用打字机,即可把此代码设置为单例,然后直接向Run方法进行传值。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class TypeWriterDemo3 : MonoBehaviour
{
    [Header("打字速度")]
    public float Speed = 15;

    Text text;

    void Start( )
    {
        text = this.GetComponent<Text>();
        Run("你好!我是橙子~\n来自中国的一名Unity开发者,喜欢编程!\nHello! I am Orange ~, a Unity developer from China. I like programming!", text);
    }
    public void Run(string textToType, Text textLabel)
    {
        StartCoroutine(TypeText(textToType, textLabel));
    }
    IEnumerator TypeText(string textToType, Text textLabel)
    {
        float t = 0;//经过的时间
        int charIndex = 0;//字符串索引值
        while (charIndex < textToType.Length)
        {
            t += Time.deltaTime * Speed;//简单计时器赋值给t
            charIndex = Mathf.FloorToInt(t);//把t转为int类型赋值给charIndex
            charIndex = Mathf.Clamp(charIndex, 0, textToType.Length);
            textLabel.text = textToType.Substring(0, charIndex);

            yield return null;
        }
        textLabel.text = textToType;
    }
}

挂载脚本

在三种选择一种你认为写的最好的,然后把他保存下来,挂载到这个Text上
Unity打字机 三种方式教会你_第16张图片
这个时候 点击运行 即可完美实现打字机效果!~

总结

总体来说,打字机的效果实现不难,主要就是用到了Substring,官方文档解释:从此实例检索子字符串。 子字符串从指定的字符位置开始且具有指定的长度。
其实大白话就是 数字数量的起始字符位置是从零开始的。然后就是去比对字符串的长度。

结束语

不及硅步,无以至千里。
不积小流,无以成江海。
每天进步一点点 谢谢您的观看。

觉得对自己有帮助,欢迎关注、收藏、转发!我们下期再见

你可能感兴趣的:(Unity3D,Unity小技巧,unity,游戏引擎)