Unity3d--Prefabricated design of health bar

Pre-made design of Health Bar

1. Homework content

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

2. IMGUI implementation

The IMGUI system is a completely independent feature system of Unity's main UI based on GameObject. IMGUI is a code-driven GUI system, primarily used as a programmer's tool. It is driven by calls to the OnGUI function on any script that implements it. There is no graphical design interface.

1. The implementation of the health bar mainly uses the horizontal scroll bar in the GUI. The width of the scroll bar is used as the display of the health bar. The parameters here are to set the depression position, width and height respectively, and then (50, 50, 200, 20)set

GUI.HorizontalScrollbar(new Rect(50, 50, 200, 20), 0.0f, health, 0.0f, 1.0f);

2. Then create two buttons for adding blood and deducting blood, and set a variable to record the adjusted blood volume.

• Add blood button

if (GUI.Button(new Rect(105, 80, 40, 20), "加血"))
		{
			resulthealth = resulthealth + 0.1f > 1.0f ? 1.0f : resulthealth + 0.1f;
		}

• blood deduction button

if (GUI.Button(new Rect(155, 80, 40, 20), "扣血"))
		{
			resulthealth = resulthealth - 0.1f < 0.0f ? 0.0f : resulthealth - 0.1f;
		}

3. Adjust the horizontal scroll bar based on the adjusted health volume. First, use the built-in interpolation function to calculate the next adjustment value, and then assign the obtained value to the current blood volume to achieve smooth changes in the health bar.

health = Mathf.Lerp(health, resulthealth, 0.05f);

4. Create a health bar prefab. First create an empty object, then add the script to the empty object, and then drag the object into Assets to make it a prefab.

   • Add script

• prefabricated

All code

public class Health : MonoBehaviour
{
	// 当前血量
	public float health = 1f;
	// 增/减后血量
	private float resulthealth;
	public Slider healthSlider;


	void Start() {
		resulthealth = health;
	}

	void OnGUI() {
		if (GUI.Button(new Rect(105, 80, 40, 20), "加血"))
		{
			resulthealth = resulthealth + 0.1f > 1.0f ? 1.0f : resulthealth + 0.1f;
		}
		if (GUI.Button(new Rect(155, 80, 40, 20), "扣血"))
		{
			resulthealth = resulthealth - 0.1f < 0.0f ? 0.0f : resulthealth - 0.1f;
		}

		//插值计算health值，以实现血条值平滑变化
		health = Mathf.Lerp(health, resulthealth, 0.05f);
		healthSlider.value = health;

		// 用水平滚动条的宽度作为血条的显示值
		GUI.HorizontalScrollbar(new Rect(50, 50, 200, 20), 0.0f, health, 0.0f, 1.0f);
	}
}

Effect display

3. UGUI implementation

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

1. First, create a character object. The character used last time is used here, and a script for movement is added to the character to facilitate testing whether the health bar is still facing the main camera when moving.

   • Character pre-made

• mobile script

  public class Move : MonoBehaviour{
  	public void Awake() {
  		
  	}
  	public void Update() {
  		if (Input.GetKey(KeyCode.UpArrow)) {
  			move(Direction.UP);
  		}
  		if (Input.GetKey(KeyCode.DownArrow)) {
  			move(Direction.DOWN);
  		}
  		if (Input.GetKey(KeyCode.LeftArrow)) {
  			move(Direction.LEFT);
  		}
  		if (Input.GetKey(KeyCode.RightArrow)) {
  			move(Direction.RIGHT);
  		}
  	}
  	public enum Direction : int {LEFT = 0, UP, RIGHT, DOWN};
  
  		public void move(Direction direction) {
  			gameObject.transform.rotation = Quaternion.Euler(new Vector3(0, ((int)direction - 1) * 90, 0));
  			switch (direction) {
  			case Direction.UP:
  				gameObject.transform.position += new Vector3(0, 0, 0.1f);
  				break;
  			case Direction.DOWN:
  				gameObject.transform.position += new Vector3(0, 0, -0.1f);
  				break;
  			case Direction.LEFT:
  				gameObject.transform.position += new Vector3(-0.1f, 0, 0);
  				break;
  			case Direction.RIGHT:
  				gameObject.transform.position += new Vector3(0.1f, 0, 0);
  				break;
  			}
  		}
  }
  
  

2. Set the camera position

3. Set the location information and start adding the health bar. First, right-click the object to which a health bar needs to be added, then select UI -> Canvas to add a canvas sub-object. After adding the canvas, the character will have an additional Canvas sub-object, which is renamed HeathUI.

   Add canvas

• heathUI

4. Right-click on the canvas just now (HeathUI) and select Add UI -> Slider. Then the canvas will have an additional sub-object slider. At the same time, the slider also has three sub-objects, namely background, fill area and operation button (Handle). Slider Area), there is no need to use the pull button here, so disable it.

   • slider

5. Then set the background color. Because it is a health bar, set it to red, that is, the part where the blood is deducted is red.

6. Then set the color of the fill area sub-object fill to gray, indicating undeducted blood.

7. For convenience, reuse the button created in the previous step, add the slider object in the script, then add the Slider to the button script for adding blood and deducting blood, and at the same time set the value of the slider for each frame in OnGUI.

• Add script

public Slider healthSlider;
void OnGUI() {
	...
	healthSlider.value = health;
	...
}

• Set up the slider object

8. Finally, add a FaceCamera object to HealthUI so that no matter how the character moves, the health bar is always aligned with the camera.

• FaceCamera

public class FaceCamera : MonoBehaviour {
	
	// Update is called once per frame
	void Update () {
		this.transform.LookAt (Camera.main.transform.position);
	}
}

9. The results show

4. Analyze the advantages and disadvantages of the two implementations

IMGUI:

advantage:

1. Programmers like code that is simple and easy to use without making a complicated interface, and it is in line with the traditional habits of game programming.

2. In the classic game loop programming model of modifying the model and rendering the model, after the rendering phase, the UI interface is drawn impeccably.

3. It not only avoids that UI elements can only be set on the front end of the screen, but also has good execution efficiency. All controls can be realized through code, which is very friendly to early game devices with poor computing and storage resources.

shortcoming:

1. Traditional code-driven UI is inefficient.

2. Debugging is difficult, and every debugging requires compilation.

3. It is difficult to write complex interface code because there is no direct interface display.

UGUI:

advantage:

1. What you see is what you get (WYSIWYG) design tools, such as map editors, menu editors and other tools. You can use these tools to directly create game elements. Only simple UI additions and settings are required, allowing designers to participate in game development.
2. Supports multi-mode and multi-camera rendering.
3. Interaction that integrates UI elements with the game scene.
4. Object-oriented programming can better manage objects.

5. Give how to use prefabricated products

1. The first is the creation of the prefab. For IMGUI, drag the empty object with the script placed directly into Assets. For UGUI, drag the canvas (HeathUI) into Assets.

2. Then there are the ways to use the prefabs. Both IMGUI and UGUI directly drag the slider into the character object, but UGUI also needs to entrust the slider of the object to a script for management. As mentioned above, the slider is entrusted to the button created in IMGUI for management.

   • Add or subtract blood button

• UGUI

5. Game pictures, videos, and code addresses.

Video website: https://www.bilibili.com/video/av76512160/

or hw9.mov

Code address: https://github.com/ouzj5/3dgame/tree/master/hw9