Unity typewriter teaches you three ways

read-ahead

Hello everyone , I'm an orange , What I bring to you today is Unity Tutorial of scene switching progress bar .
Why did you suddenly do this Unity Where's the typewriter , It's one of my teachers , Gave me a question , The main part of the topic is the effect of the typewriter , Read the online tutorial , There are different levels , So today I'm going to write an issue about the effect of this typewriter .

*,*◦*,*◦*,*◦*,-------------------- Gorgeous dividing line --------------------*◦*,*◦*,*◦*,*◦*,*◦

finished product

First, let's see what the finished product looks like

I will divide it into three cases , The depth resolution Unity How the typewriter is made ！ It is better to teach people and fish than to teach people and fish .

First step establish UGUI Layout and Modify adaptation

stay Hierarchy Blank space in the panel , Right click to select Image establish .

stay Inspector Window To find the After clicking Hold down AIt key Click the button in the lower right corner

Let the picture cover the full screen .
Then select Hierarchy Window Canvas

Turn rendering mode , Change it to In the middle of the Screen Space-Camera
If you don't understand why it should be changed to the middle You can see me Previous post （ Click here to jump to ）

And then Drag the camera over

Change this to Middle option And modify it Refrernce Resolution（ Reference resolution ）

Come here Self adaptation is done , Let's continue to design UI level

To create the Image Rename as bg, Then you can do it in his Color In the attribute Change the color of the background .

Use the method just now , stay bg Right click on UI—> Image Create two Image Here's the picture

Then put the character material Add to Image On

And then once you're done It feels a little small … No problem Click here to show the original size of the image

If the feeling is still too small , Choose the first one Image stay Inspector Change his Scale

Why not choose the last Z Because it's a 2D picture Unwanted Z

I set their size to 3 It looks good

The second step Add text box

Still bg Add Image As the background of the text box And move to the right place
Add the background in the future And then build a new one from it Text Components

It's like this

Come here our UGUI The level is almost designed

The third step Write code

The first kind ： Conventional writing

Here's how to write it , More traditional stay FixedUpdate Execute every frame in the , There may be a little friend wondering ？ Why not Update？
because Update Not every frame is fixed , If your computer has good performance , The implementation is faster , If the computer performance is poor , It will jam a little , Can't do a perfect silky catch-up , So here we use FixedUpdate Unity Whether your computer is good or bad , Are fixed for each frame .

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

public class TypeWriterDemo1 : MonoBehaviour
{
    
    [Header(" Typing interval ")]
    public float speedTime = 0.1f;// Typing interval 

    float timer;// Timer time 
    Text TextCompnt;//Text Text components 
    int wordNumber;// The number of words 
    bool isStart;// Whether to start typing 

    string wordContent;//---- Written content 

    void Awake( )
    {
    
        TextCompnt = this.GetComponent<Text>();// Get from the current object Text Components 
        isStart = true;//bool The default value of the value is false  So here we need to reset to true
        wordContent = " Hello ！ I'm an orange ~\n One from China Unity developer , Like programming ！\nHello! I am Orange ~, a Unity developer from China. I like programming！";
    }

    void FixedUpdate( )
    {
    
        StartTyping();
    }
    void StartTyping( )
    {
    
        if (isStart)
        {
    
            timer += Time.deltaTime;// Simple timer 
            if (timer >= speedTime)// If the timer time > Typing interval 
            {
    
                timer = 0;// Reset 
                wordNumber++;// The number of words +1

                //Substring()  Interpretation of official documents ： Retrieve substrings from this instance .  The substring starts at the specified character position and has the specified length .
                TextCompnt.text = wordContent.Substring((0), wordNumber);// The starting character position of the number of digits （ Starting from scratch ）
                if (wordNumber >= wordContent.Length)// Number of figures = The length of the text 
                {
    
                    isStart = false;// Stop typing 
                }
            }
        }
    }
}

The second kind ： coroutines +for loop

What about this one It is much more indirect than the previous one , And used Synergetics , The implementation method is relatively simple

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

public class TypeWriterDemo2 : MonoBehaviour
{
    
    public float delay = 0.1f;
    string fullText = " Hello ！ I'm an orange ~\n One from China Unity developer , Like programming ！\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++)// Traverse the length of the inserted string 
        {
    
            currentText = fullText.Substring(0, i);// see demo1 Code comments for 
            this.GetComponent<Text>().text = currentText;
            yield return new WaitForSeconds(delay);// Time of each delay   The smaller the numerical   The less delay 
        }
    }
}

The third kind ：while loop + coroutines

This pattern uses method passing , This is equivalent to encapsulating the method .
If a project uses typewriters frequently , You can set this code as a singleton , Then go straight to Run Method to transfer values .

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

public class TypeWriterDemo3 : MonoBehaviour
{
    
    [Header(" Typing speed ")]
    public float Speed = 15;

    Text text;

    void Start( )
    {
    
        text = this.GetComponent<Text>();
        Run(" Hello ！ I'm an orange ~\n One from China Unity developer , Like programming ！\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;// Time passed 
        int charIndex = 0;// String index value 
        while (charIndex < textToType.Length)
        {
    
            t += Time.deltaTime * Speed;// A simple timer is assigned to t
            charIndex = Mathf.FloorToInt(t);// hold t To int Type assigned to charIndex
            charIndex = Mathf.Clamp(charIndex, 0, textToType.Length);
            textLabel.text = textToType.Substring(0, charIndex);

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

Mount script

Choose one of the three that you think is the best written , Then save him , Mount to this Text On

This is the time Click on the run You can achieve a perfect typewriter effect ！~

summary

On the whole , It is not difficult to realize the effect of typewriter , Mainly used Substring, Interpretation of official documents ： Retrieve substrings from this instance . The substring starts at the specified character position and has the specified length .
In fact, vernacular is The starting character position of the number of digits starts from zero . Then compare the length of the string .

Conclusion

Inferior to silicon step , A thousand miles .
Don't product the little stream , Beyond into the sea .
Make a little progress every day Thank you for watching .

Feel helpful to yourself , Welcome to your attention 、 Collection 、 forward ！ See you next time