Unity game production

3D games and programming Homework 7

Experimental content

Prefabrication design of Health Bar. Specific requirements are as follows
- It is implemented using IMGUI and UGUI respectively
- Using UGUI, the blood bar is a sub element of the game object and needs to face the main camera at any time
- The advantages and disadvantages of the two implementations are analyzed
- Give the user of prefabrication

Experimental environment

Windows
Unity 2020.3.18

Technical diary

1, UI System

1. Introduction to unity GUI

Unity currently supports three UI systems with completely different styles:
- 4.0 and before - IMGUI (Immediate Mode GUI) graphical interface in time mode. It is a code driven UI system. There is no graphical design interface. It can only draw various UI elements with GUI series classes in the OnGUI stage, so UI elements can only float on the game interface.
- 5.0 and later - Unity GUI / UGUI is an object-oriented UI system. All UI elements are game objects with friendly graphical design interface. These UI elements can be rendered in the scene rendering stage.
- March 2018 and beyond - UXML (unity Extended Markup Language). AXML packaging based on IMGUI is convenient for mobile application developers to get started.

2. IMGUI

According to Unity's official statement, IMGUI is mainly used for the following scene:

Create a debug display tool in the game
Create a custom Inspector panel for script components.
Create new editor windows and tools to extend the Unity environment.

IMGUI systems are generally not intended for ordinary in-game user interfaces that players may use and interact with. To do this, you should use Unity's GameObject based UGUI system.

Obviously, if you do not make a complex interface, the following simple and easy-to-use code is preferred by programmers:

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

public class IMGUITest : MonoBehaviour {

	void OnGUI (){
		// Make a background box
		GUI.Box(new Rect(10,10,100,90), "Loader Menu");

		// Make the first button. If it is pressed, Application.Loadlevel (1) will be executed
		if(GUI.Button(new Rect(20,40,80,20), "Level 1")) {
			Application.LoadLevel(1);
		}

		// Make the second button.
		if(GUI.Button(new Rect(20,70,80,20), "Level 2")) {
			Application.LoadLevel(2);
		}
	}
}

Therefore, it is necessary to master IMGUI:

The novice UI is easy to get started and helps novices understand the game cycle of the engine
Senior programmer, create online debugging environment
Tool developer, define Unity's new programming tools

3. UGUI

Advantages of UGUI:
- WYSIWYG design tool
- Support multi-mode and multi camera rendering
- object-oriented

2, Experimental part

1. Project configuration process

Create a new 3D unit file, and then directly replace the Assets folder on gitee with the Assets folder of the new project. At the same time, drag myScene from scenes, and directly click Run to start the game.

2. Implementation ideas and core algorithms

1) UGUI

Menu assets - > Import package - > characters import assets
In the hierarchy view, add a Plane object from the Context menu - > 3D object - > Plane
Expand asset view standard assets:: charactors:: thirdpersoncharater:: prefab
Drag and drop the ThirdPersonController prefab into the scene and change its name to Ethan
Check the following properties
- Position of Plane Transform = (0,0,0)
- Position of Ethan's Transform = (0,0,0)
- Position of Transform of Main Camera = (0,1, - 10)
Operation inspection effect
Select Ethan, use context menu - > UI - > canvas to add canvas sub objects
Select Ethan's Canvas and use context menu - > UI - > slider to add a slider as a blood bar sub object
Operation inspection effect
Select Ethan's Canvas in the Inspector view
- Set the Canvas component Render Mode to World Space
- Set the Rect Transform component (PosX, PosY, Width, Height) to (0,2160,20)
- - Set the Rect Transform Component Scale (x,y) to (0.01,0.01)
Run to check the effect. It should be Ethan on the Slider above your head. Move Ethan with the keyboard and observe
Expand Slider
- Select Handle Slider Area and disable the element
- Select Background and disable the element
- Select Fill in the Fill Area and change the Color of the Image component to red
Select the Slider component of the Slider
- Set MaxValue to 100
- Set the Value to 75
Run to check the effect and find that the blood bar rotates with the character
Add the following script to Canvas

LookAtCamera.cs

using UnityEngine;

public class LookAtCamera : MonoBehaviour {

	void Update () {
		this.transform.LookAt (Camera.main.transform.position);
	}
}

2) IMGUI

Menu assets - > Import package - > characters import assets
In the hierarchy view, add a Plane object from the Context menu - > 3D object - > Plane
Expand asset view standard assets:: charactors:: thirdpersoncharater:: prefab
Drag and drop the ThirdPersonController prefab into the scene and change its name to Ethan
Check the following properties
- Position of Plane Transform = (0,0,0)
- Position of Ethan's Transform = (0,0,0)
- Position of Transform of Main Camera = (0,1, - 10)
Create an empty object under Ethan and hang it in the following script:

HealthBar.cs

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

public class HealthBar : MonoBehaviour{
    public float health = 0.5f;

    private float resulthealth;
    private Transform father;

    private Rect healthbar;
    private Rect Add;
    private Rect Minus;

    void Start(){
        resulthealth = health;
        father = this.transform.parent.transform;
    }

    void OnGUI(){
        healthbar = new Rect(Screen.width / 2 + father.position.x * father.localScale.x * 30 - father.localScale.x * 50, 
        Screen.height / 2 + (father.position.z - father.localScale.y * 7) * father.localScale.z * 10, 
        father.localScale.x * 100, father.localScale.z * 10);
         
        Add = new Rect(Screen.width / 2 + father.position.x * father.localScale.x * 30 + father.localScale.x * 55, 
        Screen.height / 2 + (father.position.z - father.localScale.y * 7) * father.localScale.z * 9.5f, 
        father.localScale.x * 20, father.localScale.z * 10);
        
        Minus = new Rect(Screen.width / 2 + father.position.x * father.localScale.x * 30 - father.localScale.x * 75, 
        Screen.height / 2 + (father.position.z - father.localScale.y * 7) * father.localScale.z * 9.5f, 
        father.localScale.x * 20, father.localScale.z * 10);

        if (GUI.Button(Add, "+")){
            resulthealth = resulthealth + 0.1f > 1.0f ? 1.0f : resulthealth + 0.1f;
        }
        if (GUI.Button(Minus, "-")){
            resulthealth = resulthealth - 0.1f < 0.0f ? 0.0f : resulthealth - 0.1f;
        }

        health = Mathf.Lerp(health, resulthealth, 0.05f);
        GUI.HorizontalScrollbar(healthbar, 0, health, 0.0f, 1.0f);
    }
}

Preset usage

Drag the saved scenes HealthBar and HealthBar2 into the.
UGUI only needs to directly drag the preset Ethan to the appropriate position; IMGUI needs to drag out an empty third person object, create a new empty sub object, and then hang the script on the sub object.

3, Advantages and disadvantages

UGUI

advantage:

Friendly to novices, no need to write code
Support multi-mode, multi camera rendering
You can see the changes directly in the game scene

Disadvantages:

Complex operation and complicated steps
Work efficiency is low and it is difficult to connect with the interface

IMGUI