Unity learning record - UI design

Unity learning record - UI design

Preface

​ This article is an assignment 8 for the 2020 class of 3D game programming and design at the School of Software Engineering, Sun Yat-sen University

Programming question: health bar production

1.Related resources

​ The character model in this project comes fromStarter Assets - Third Person Character Controller | Essential Tools | Unity Asset Store

​ The following path is used herePlayerArmature prefabrication. This prefabricated character model can perform actions such as walking, running and jumping, which is very suitable for health bars. Demo

​ Since this character prefab has some codes for implementing actions, includinghiding the mouse cursor, which will affect subsequent Demo, so you need to find the code in the following path and open it

​ Comment out the code in the function SetCursorState() to facilitate subsequent clicks on the button in the health bar UI

private void SetCursorState(bool newState)
{
	// Cursor.lockState = newState ? CursorLockMode.Locked : CursorLockMode.None;
}

2.Basic introduction

​ The following introduction (bilingual in Chinese and English) is from the official unity manual, which explains the general content of IMGUI and UGUI.

​ The purpose is to quickly locate and understand the main knowledge content of this course and assignments.

(1)IMGUI

​ The “Immediate Mode” GUI system (also known as IMGUI) is an entirely separate feature to Unity’s main GameObject-based UI System. IMGUI is a code-driven GUI system, and is mainly intended as a tool for programmers. It is driven by calls to the OnGUI function on any script which implements it.

​ The "immediate mode" GUI system (also known as IMGUI) is a completely separate functional system from Unity's main game object-based UI system. IMGUI is a code-driven GUI system primarily used as a tool for programmers. In order to drive the system, the OnGUI function needs to be called on the implementation script.

(2)UGUI

​ Unity UI is a set of tools for developing user interfaces for games and applications. It is a GameObject-based UI system that uses Components and the Game View to arrange, position, and style user interfaces.

​ Unity UI is a set of tools for developing user interfaces for games and applications. It is a GameObject-based UI system that uses components and Game views to arrange, position and style the user interface

3. Question requirements

Pre-made design of Health Bar. Specific requirements are as follows:

• Implemented using IMGUI and UGUI respectively
• Using UGUI, the health bar is a sub-element of the game object and needs to face the main camera at any time
• Analyze the advantages and disadvantages of the two implementations
• Gives how to use prefabricated

4. Detailed explanation of operation and code

(1)IMGUI

​ Relatively simple. The health bar is a horizontal scroll bar. The function of adding blood and subtracting blood through button binding and linear interpolation realize the smooth change of the blood bar.

​ Some API calls:

• Horizontal Scrollbar:GUI-HorizontalScrollbar - Unity Scripting API
• Linear interpolation real:Mathf-Lerp - Unity scripting API

code show as below:

public class Blood_IMGUI : MonoBehaviour
{
    public float now = 10f;         //现在的血量
    private float target = 10f;     //将要达到的目标血量
    private Rect blood_area = new Rect(20, 20, 200, 50);        //血条所处位置
    private Rect up_area = new Rect(20, 50, 40, 20);            //加血按钮所处位置
    private Rect down_area = new Rect(180, 50, 40, 20);         //扣血按钮所处位置
    // 加血函数
    public void blood_up(float num)
    {
        target = target + num > 10f ? 10f : target + num;
    }
    //扣血函数
    public void blood_down(float num)
    {
        target = target - num < 0f ? 0f : target - num;
    }

    private void OnGUI()
    {
        if (GUI.Button(up_area, " + "))
            blood_up(1);
        if (GUI.Button(down_area, " - "))
            blood_down(1);
        // 线性插值
        now = Mathf.Lerp(now, target, 0.1f);
        // 创建水平滚动条,此处即血条
        GUI.HorizontalScrollbar(blood_area, 0f, now, 0f, 10f);
    }
}

The final effect is as follows:

(2)UGUI

operate

Right-click in the Scene to create a new Plane as the ground (here I made the lower four walls of the platform by the way), and then drag the previously mentioned character prefab PlayerArmature into it.

Right-click PlayerArmature, select UI, Canvas, and create a new Canvas

Modify some properties of Canvas

​ Key points:Change the Render Mode of the Canvas to World Space, and the remaining properties are to adjust the size of the Canvas (Width, Height) and Scale, Rotation

​ Right click on Canvas, select UI, Slide, and create a new Slide

​

At this point you can see the prototype of the health bar, as follows:

In order to further shape the health bar, further operations are required, as follows:

1. Disable Handle Slide Area

​ At this point you can find: the ball on the health bar disappears

2. Modify the Rect Transform properties of other components (including BackGround, Fill Area, Fill), and change the color of the img control in Fill to the color of the health bar. Here I chose red

​ At this time, drag the Value property of the Slide and you can see the smooth change of the blood bar.

At this point, the production of the blood bar is basically completed. In order to demonstrate the changes of the blood bar, I added two button subclasses on CanVas to control the increase and decrease of the blood bar.

After adding the button, you still need to modify the corresponding properties in the Rect Transform, as follows

​The text in the button can be modified through the sub-object text in the button. Just change it to ‘+’ ‘-’ here.

The final effect is as shown below:

code

​Write the button event code for adding blood and deducting blood, as follows:

public class Blood_UGUI : MonoBehaviour
{
    private float now = 10f;        //现在的血量
    private float target = 10f;     //将要达到的目标血量
    public Slider blood;            //Slider,即血条
    GameObject up_button, down_button;  //控制加血扣血的两个按钮
    private void Start()
    {
        // 绑定按钮
        up_button = GameObject.Find("Button_up");
        Button a = up_button.GetComponent<Button>();
        down_button = GameObject.Find("Button_down");
        Button b = down_button.GetComponent<Button>();
        a.onClick.AddListener(delegate ()
        {
            this.OnClick(up_button);
        });
        b.onClick.AddListener(delegate ()
        {
            this.OnClick(down_button);
        });
    }
    // 按钮点击事件
    private void OnClick(GameObject sender)
    {
        if (sender.name == "Button_up")
            blood_up();
        if (sender.name == "Button_down")
            blood_down();
    }
    // 加血函数
    public void blood_up()
    {
        target = target - 1f < 0f ? 0f : target - 1f;
    }
    // 扣血函数
    public void blood_down()
    {
        target = target + 1f > 10f ? 10f : target + 1f;
    }

    void Update()
    {
        // 线性插值
        now = Mathf.Lerp(now, target, 0.1f);
        // 更新血量，此处为sliper的value
        blood.value = now;
        // 设置血条一直朝向摄像机
        transform.rotation = Quaternion.LookRotation(Vector3.forward);
    }
}

The final result is as follows:

5.Analysis

Analysis of the advantages and disadvantages of the two UIs:

IMGUI

​IMGUI is an event-based, code-driven GUI system.

It can be seen that IMGUI is obviously more in line with the programmer's logic. That is, various functional GUIs can be created on the page through code. With IMGUI, there is no need to create game objects, manually locate these objects and write a script that handles the object's functions. All operations can be performed immediately with just a few lines of code. For programmers, this is obviously very flexible and easy to use.

At the same time, in IMGUI, the UI will be redrawn every frame. Therefore, when there are too many UI components on the page, the performance efficiency of IMGUI will be greatly reduced, and at the same time, the debugging work of IMGUI will be more difficult. This is why Unity officially does not recommend using IMGUI for in-game runtime UI.

Through this feature, Unity officially provides the following uses of IMGUI:

Immediate mode GUI systems are commonly used for:

• Create in-game debugging displays and tools.

• Create a custom inspection panel for the script component.

• Create new editor windows and tools to extend Unity itself.

from Immediate Mode GUI (IMGUI) - Unity Manual

UGUI

UGUI is a UI system based on GameObject.

It can be seen that UGUI organizes and renders UI elements by using Canvas. As a result, UGUI can not only use a hierarchical structure to organize UI elements, but also use a variety of layout methods to automatically adjust the position and size of UI elements. Therefore, the simple development method and the nature of what you see is what you get make UGUI an easier development model for designers without programming.

At the same time, when faced with creating complex UIs, the hierarchical structure of UGUI may become too complex and difficult to maintain.

Demo

​ The demo video has been uploaded to Station BUI system - health bar_bilibili_bilibili

code location

​ The code and documents have been uploaded tohw8· XiaoChen04_3/3D_Computer_Game_Programming - gitee

Uploaded to Station BUI system - health bar_bilibili_bilibili

code location

​ The code and documents have been uploaded tohw8· XiaoChen04_3/3D_Computer_Game_Programming - gitee