Unity Tutorial: Character UI Health Bar Design in the Battle System

sequence

When playing games, you always pay attention to the health bar from time to time - that is, the health value

How is the health bar [HP] in the game set?

There is a learning exchange group here  to communicate and learn together 

1: How to choose a technical solution

In the Unity combat system, each character often has a health bar and a nickname. How to architecture design is efficient, we list some common practices:

  1. onGUI to make nicknames and health bars;
  2. Create a 3D object in the 3D world to make the health bar and nickname, and then make the health bar and nickname face the camera;
  3. Based on UGUI/NGUI, make the UI nodes of the health bar and nickname separately, and then synchronize the position of the UI node with the character;
  4. other possible practices;

The performance of onGUI in scheme (1) is very poor, and it is generally only used to display some debugging-related information, and is not suitable for formal game objects. In scheme (2), a 3D object is created, and then facing the camera, the function can be realized. The possible problem is that the object such as the nickname of the blood bar may disrupt the batch of objects, making the drawcall relatively high, and the Shader of the nickname and the blood bar is also It may be different from the character, and there is a risk of constantly switching Shaders, set bass call explosions. Therefore, in the official project, the UGUI/NGUI of scheme (3) will be used to create the UI nodes of the health bar and the nickname separately, and then the characters will move and the position of the synchronized UI nodes will be updated at the same time.

In this way, wherever the character goes, the blood bar and nickname will follow. All the health bars and nicknames are under one node of UGUI. When a large number of characters are fighting, these health bars and nicknames can be drawn together in batches to reduce drawcalls as much as possible. After the plan is finalized, it will be implemented based on this idea. It is necessary to solve two major problems: how to manage roles and health bars, and how to synchronize the positions of roles and health bars.

2: How to arrange character nodes and UI health bars

After the 3D character art modeling is completed, the program imports it into the project, and another important thing to do is to add a 3D node mountPoint to the character. The position of this node on the screen is the UI blood bar on the screen. location, this is critical. Many students will be confused, as long as the character position + a fixed offset is enough, why do you need this point? Because 3D games are different from 2D games, the position of the 3D game object on the screen is not only related to itself, but also related to the angle of the camera, so it is not possible to directly add an offset to the position, but to add an offset to the 3D character. A suitable 3D point, the position of this point on the screen is the position of the UI health bar and nickname, as shown in the figure:

After the coordinates of the mountPoint are transferred to the screen coordinates, it is the screen position where the UI health bar and nickname are located. Next, look at the UI node. There will be an operation UI in the battle scene, and all the UI must be covered on the character's blood bar and nickname, so when we make the main UI of the battle scene, we specially make a UIBloodRoot node to hang all the blood in the game. bar and nickname object, as shown in the figure:

Finally, make a UI object with a nickname + blood bar, and when the character is created, create this object, as shown in the figure:

3 UI code design of 3D characters in the battle system

First of all, for each combat unit, we will design a management class to provide strategies, such as player objects, many games will design a Player class to control the player, Boss monsters will design a BossEnemy class to control the Boss, and Player, Boss needs many strategies , Some are shared, and health bar is one of them, so generally Player and Boss will inherit from a strategy base class FightCharactor, we can design the mechanism strategy of fighting blood loss, eating props and adding blood and UI health bar into FightCharactor .

class FightCharactor extends Monobehaviour {
	// 实现掉血,加血,血条的机制;
	private float hp; // 战斗单元的血量
private UICharactor uiCharactor; // 控制ui血条显示,角色昵称显示的组件实例;
// end

public void Init() {} // 
}

Class Player extends FightCharactor {
// 实现玩家特有的策略
// end
}

Class BossEnemy extends FightCharactor {
	// 实现Boss特有的策略
	// end
}

Next, a UICharactor component class is designed, and an instance of the new component class is added to the ui object of the health bar and nickname to provide the function of displaying the progress of the health bar and displaying the character nickname.

Class UICharactor extends MonoBehaviour {
	public void SetBloodPer(float per) {…}
	public void SetUnick(string unick) {…}
}

Provide an interface UICharactor CreateUICharactor() at the control code of the main battle UI interface, and return an instance of the UIChractor object. The pseudo code is as follows:

UICharactor CreateUICharactor() {
    GameObject uiObject = GameObject. Instantiate(UI血条+昵称的预制体);
	// 将血条对象放到UIBloodRoot节点下;
uiObject.transform.SetParent(this.UIBloodRoot, false); 

UICharactor ctrl = uiObject.AddComponent<UICharactor>(); //添加组件实例到UI节点
return ctrl;

}

In the initialization method Init in the FightCharactor class of the combat character, call the CreateUICharactor interface of the UI control code to obtain the component instance of the UICharactor, so that the interface of the UICharactor can be called to display the blood volume and nickname during the battle.

public void Init() {
	this.uiCharactor = 游戏UI界面控制对象实例. CreateUICharactor();
}

In the code, the this.uiCharactor.SetBloodPer interface can display the character's blood volume, and the this.uiCharactor.SetUnick interface can display the player's nickname, etc.

The last thing is that where the character goes, the position of the UI health bar nickname object is updated. How to design this? You can write a LateUpdate method in the FightCharactor class to get the position of the mountPoint mount point in the combat unit, then convert this position, combined with the game camera into screen coordinates, and then write a function ShowAt(Vector3 screenPos) in the UICharactor code; in In UGUI, the screen coordinates are converted into the world coordinates of the ui node, so that the position of the UI blood bar nickname node is placed on the screen point corresponding to the mountPoint, and the player looks synchronized.

class FightCharactor {
	// …
	void LateUpdate() {
		Vector3 worldPos = this.mountPoint.transform.position;
		Vector3 sceenPos = this.gameCamera.WorldToSceen(worldPos);
		this.uiCharactor.ShowAt(sceenPos);
}
	// …
}

class UICharactor {
	// …
	public void ShowAt(Vector3 sceenPos) {
		Vector3 wordPos = ui模式下屏幕坐标转世界坐标;
		this.transform.position = worldPos;
}
	// …
}

The structure and design of the UI blood bar nickname of the battle system in this issue is analyzed here. I recorded a video courseware, which fully explained and realized the structure and design just now, which can be received in the group.

Guess you like

Origin blog.csdn.net/bycw666/article/details/123572414