Simple virtual training system-UI control application 2

Table of contents

Use file streams to dynamically read hard disk files

This article introduces the simple application of Text and ScrollView, as well as reading the content of .txt text in the hard disk

Text component-text display

1. Add Text: Right-click on mainCanvas->UI->select Text or TextMeshPro.

The following takes TextMeshPro as an example. When you select TextMeshPro for the first time, you will be prompted to import the TMP component. Just click the first button:

2. Modify the name of Text for easier identification:

3. Modify and move the size and position of this text box in the scene:

4. Modify and adjust the displayed text: Find the TextInput of the Text control, enter the desired text in the input box, and adjust the font, size, color, etc. It should be noted that Chinese characters generally cannot be displayed normally and require special settings (for details, please refer to Unity Chinese does not display the problem_Unity Chinese fonts cannot be typed_Chen Shaobo's blog-CSDN blog )

Text component-dynamic display of text

In the system, code is often used to dynamically modify the content of text. When UI controls need to be used, they need to be quoted in the header file:

using UnityEngine.UI; //使用到UI类时需要引用
using TMPro;   //使用TextMeshPro时需要引用

The test code is as follows. As long as the text component on the text is obtained, its content can be modified:

public class TextChange : MonoBehaviour
{
    public TMP_Text titleText;  //TextMeshPro需要使用的类型
    
    void Update()
    {
        //当按下K键时，文字改变
        if (Input.GetKey(KeyCode.K))
        {
            titleText.text = "系统开始运行";
        }
    }
}

Hang this TextChange code on any node of the scene (I created an empty node here, and all codes that have no place to hang are hung here), and drag in the titleText node:

The running results are as follows, the text changes when the K button is pressed:

ScrollView component

When too much text is displayed, it needs to be displayed by sliding in ScrollView. The usage method is as follows:

1. Add ScrollView: Right-click on mainCanvas->UI->Select ScrollView. There are many sub-nodes and components under ScrollView. The important components are introduced below.

In Content, we can put the content that needs to be displayed, including text, pictures or other controls.

2. Add Text to ScrollView->Viewport->Content: right-click on Content and add Text

3. Adjust the size of the Text and enter the content that needs to be displayed in the Text. When there is a lot of text, adjust the size of the Content to the length that all the text can be displayed (the white box on the right):

running result:

4. Place an image in the ScrollView: right-click on ScrollView->Viewport->Content, add Image, and adjust the length of the Content so that it is enough to display all the content.

running result:

Use file streams to dynamically read hard disk files

When a lot of text and pictures are displayed, many Text components need to be established in the UI, and fonts, colors, etc. need to be adjusted, which is troublesome. You can consider using file streams to read TXT files on the hard disk when the scene is running, and dynamically Write into the content of the Text component. Methods as below:

1. Using the ScrollView set up above as an example, use Text (TMP) under Content to display text.

2. Store several TxT texts on the hard disk, and store a txt document for each displayed content. It is recommended to create a folder under Resources to store the folder Notepad. It should also be noted that txt documents should use UTF-8 storage format as much as possible.

3. Edit the code:

The namespaces required for file streams are as follows:

using System.IO;
using System.Text;

code show as below:

public class textShow : MonoBehaviour
{
    public TMP_Text introText;  //载入显示文本的Text控件
    void Start()
    {
        introText.text = ReadTxt("introTxt", "01_systemIntro");
    }

    public static string ReadTxt(string fileName,string txtFile)
    {
        string path= "Assets/Resources/" + fileName + "/" + txtFile + ".txt"; //文本存放的路径
        string content="未读到文件内容";
        FileStream fs = new FileStream(path, FileMode.Open, FileAccess.Read); 
        StreamReader sr = new StreamReader(fs, Encoding.UTF8);
        if (null == sr)
            Debug.Log("读取失败");
        else
            content = sr.ReadToEnd();
        sr.Close();
        return content;
    }
}

4. Hang the code on any node in the scene (this article is hung on an empty node Empty in the scene), and drag Text (TMP) under ScrollView-Content into the Text variable:

running result: