Prefabricated 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
• The application method of prefabrication is given

1. Use IMGUI to realize blood bar prefabrication

IMGUI is mainly implemented by code. The code is given below:

public class IMGUI : MonoBehaviour
{
    public float blood;
    private float resultBlood;

    private Rect bloodBar;      // Blood strip
    private Rect addButton;     // Add blood button
    private Rect reduceButton;  // Blood button

    // Start is called before the first frame update
    void Start()
    {
        // Initial value
        blood = 50;
        resultBlood = 50;

        // Fixed position
        bloodBar = new Rect(Screen.width / 2 -100, Screen.height / 4 - 10, 200, 20);
        reduceButton = new Rect(Screen.width / 2 - 160, Screen.height / 4 - 10, 40, 20);
        addButton = new Rect(Screen.width / 2 + 120, Screen.height / 4 - 10, 40, 20);
    }

    // Update is called once per frame
    void Update()
    {
    
    }

    private void OnGUI()
    {
        if(GUI.Button(addButton, "+"))
        {
            resultBlood = resultBlood + 10.0f > 100.0f ? 100.0f : resultBlood + 10.0f;
        }
        if(GUI.Button(reduceButton, "-"))
        {
            resultBlood = resultBlood - 10.0f < 0.1f ? 0.0f : resultBlood - 10.0f;
        }

        GUI.color = new Color(255f / 255f, 0f / 255f, 0f / 255f, 1f);

        //Interpolate HP values
        blood = Mathf.Lerp(blood, resultBlood, 0.05f);

        GUI.HorizontalScrollbar(bloodBar, 0.0f, blood, 0.0f, 100.0f);
    }
}

Here, IMGUI is mainly realized through HorizontalScrollbar, and its width is used as the display value of blood bar. The specific steps are to create a rectangular HorizontalScrollbar as a blood bar and two buttons, so that we can intuitively increase or decrease the blood volume. The event triggered by the button directly changes the blood volume. The linear interpolation function Lerp() is used, which has many uses. Here, mathf The LERP (from: float, to: float, t: float) function returns the interpolation between a and b based on the floating point number T, and t is limited to 0 ~ 1. Returns from when t = 0 and to when t = 1. When t = 0.5, return the average of from and to. Therefore, the smooth change of blood volume can be realized through this function.

2. Use UGUI to realize blood bar prefabrication

The steps of using UGUI to realize blood bar are as follows:

1. Menu assets - > Import package - > characters import people asset
2. In the hierarchy view, add a Plane object from the Context menu - > 3D object - > Plane
3. Expand asset view standard assets:: charactors:: thirdpersoncharater:: prefab
4. Drag and drop the ThirdPersonController prefab into the scene and change its name to Ethan
5. 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)

1. Operation inspection effect
2. Select Ethan, use context menu - > UI - > canvas to add canvas sub objects
3. Select Ethan's Canvas and use context menu - > UI - > slider to add a slider as a blood bar sub object
4. 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)

1. 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

1. Select the Slider component of the Slider

• Set MaxValue to 100
• Set the Value to 75

Using UGUI, the blood bar is a sub element of the game object and needs to face the main camera at any time

In order to make the blood bar face the main camera at any time, you need to add a script to the main camera:

public class LookAtCamera : MonoBehaviour {
	void Update () {
		this.transform.LookAt (Camera.main.transform.position);
	}
}

At the same time, add the following controller code to the sub object Canvas of character Ethan. The principle of blood deduction is the same as that of IMGUI. When the Cube detects a collision, make the flag variable true, and change the blood volume by controlling the value of Slider

public class Controller : MonoBehaviour
{
    // Slider object for UGUI
    public Slider mainSlider;

    // Blood volume
    private float currentBlood;
    private float resultBlood;

    // collision detection 
    private bool flag;

    // Start is called before the first frame update
    void Start()
    {
        // Initial blood volume
        mainSlider.value = 80;
        currentBlood = mainSlider.value;
        resultBlood = currentBlood;
    }

    // Update is called once per frame
    void Update()
    {
        // In case of collision, deduct blood
        if (flag)
        {
            resultBlood = mainSlider.value - 20.0f < 0.1f ? 0.0f : mainSlider.value - 20.0f;
            flag = false;
        }
        // Smooth reduce blood volume
        currentBlood = Mathf.Lerp(currentBlood, resultBlood, 0.1f);
        mainSlider.value = currentBlood;
    }

    public void collision()
    {
        flag = true;
    }
}

3. Analyze the advantages and disadvantages of IMGUI and UGUI

IMGUI

IMGUI generates a UI object through code and defines the events that will occur when interacting with the object. Such programming makes everything under the control of programmers and should be very friendly to programmers. But the disadvantage is that everything is generated by code, so when the UI interface is very complex, it needs a lot of code support. At this time, the efficiency will be relatively low, and it is difficult to debug. At the same time, it is difficult for non programmers to use it.

UGUI

The emergence of UGUI is to solve the dilemma that IMGUI is not friendly to designers. There is no need to code, but only need to create UI components and set corresponding properties. This WYSIWYG design approach allows designers to participate in program development without the help of programmers. The disadvantages are still relatively simple. I don't know what the disadvantages are. Maybe as a programmer, the creation method is relatively complex. There are many attribute settings that need to be clear by viewing the corresponding documents, which is not as intuitive as the method call in the program.

4. Use method of prefabrication

In this project, there are two prefabrications, IMGUI and UGUI, which correspond to their respective blood bar implementations. The method of use is as follows:

• When you need to use the blood bar implemented by IMGUI, you only need to directly drag the prefabrication into the scene.

• When you need to use the blood bar implemented by UGUI, first build the basic scene as described above, such as importing character resources and setting Plane objects. Then drag the UGUI prefab to Ethan object to become its sub object, and then drag the sub object Slider under the UGUI prefab object to the controller of the object The MainSlider attribute in the CS component is sufficient. To achieve the collision effect, you need to create another Cube object and add Collider in the script cs.