Unityチュートリアル:バトルシステムでのキャラクターUIヘルスバーのデザイン

順序

ゲームをプレイするときは、常にヘルスバーに注意を払う必要があります。つまり、ヘルスバリューに注意を払う必要があります。

ゲームセットのヘルスバー[HP]はどうですか?

ここには、 一緒にコミュニケーションを取り、学ぶため の学習交流グループがあります

1:技術的な解決策を選択する方法

Unityの戦闘システムでは、各キャラクターにヘルスバーとニックネームが付いていることがよくあります。アーキテクチャ設計が効率的である方法について、いくつかの一般的な方法をリストします。

  1. ニックネームとヘルスバーを作成するonGUI。
  2. 3Dワールドで3Dオブジェクトを作成してヘルスバーとニックネームを作成し、ヘルスバーとニックネームをカメラに向けます。
  3. UGUI / NGUIに基づいて、ヘルスバーとニックネームのUIノードを別々に作成し、UIノードの位置を文字と同期します。
  4. 他の可能な慣行;

スキーム(1)のonGUIのパフォーマンスは非常に低く、通常、デバッグ関連の情報を表示するためにのみ使用され、正式なゲームオブジェクトには適していません。スキーム(2)では、3Dオブジェクトを作成し、カメラに向けて機能を実現できます。考えられる問題は、血液バーのニックネームなどのオブジェクトがオブジェクトのバッチ処理を中断し、ドローコールを行う可能性があることです。比較的高く、ニックネームやブラッドバーのシェーダーもキャラクターとは異なる場合があり、シェーダーを絶えず切り替えたり、バスコールを爆発させたりするリスクがあります。そのため、公式プロジェクトでは、スキーム(3)のUGUI / NGUIを使用して、ヘルスバーのUIノードとニックネームを別々に作成し、キャラクターを移動させて、同期されたUIノードの位置を更新します。同時に。

このように、キャラクターが行くところはどこでも、血の棒とニックネームが続きます。すべてのヘルスバーとニックネームはUGUIの1つのノードの下にあります。多数のキャラクターが戦っている場合、これらのヘルスバーとニックネームをまとめて描画して、ドローコールを可能な限り減らすことができます。計画が完成したら、この考えに基づいて実施します。役割とヘルスバーの管理方法と、役割とヘルスバーの位置の同期方法という2つの大きな問題を解決する必要があります。

2:キャラクターノードとUIヘルスバーを配置する方法

3Dキャラクターアートモデリングが完了すると、プログラムはそれをプロジェクトにインポートします。もう1つの非常に重要なことは、3DノードmountPointをキャラクターに追加することです。画面上のこのノードの位置は、画面上のUIブラッドバーです。場所、これは重要です。キャラクターの位置+固定オフセットで十分である限り、多くの学生は混乱しますが、なぜこのポイントが必要なのですか?3Dゲームは2Dゲームとは異なるため、画面上の3Dゲームオブジェクトの位置は、それ自体だけでなく、カメラの角度にも関連しているため、位置にオフセットを直接追加することはできません。ただし、3D文字にオフセットを追加します。適切な3Dポイントの場合、画面上のこのポイントの位置は、図に示すように、UIヘルスバーとニックネームの位置になります。

mountPointの座標が画面座標に転送された後、UIヘルスバーとニックネームが配置される画面位置になります。次に、UIノードを確認します。バトルシーンには操作UIがあり、すべてのUIはキャラクターの血のバーとニックネームで覆われている必要があるため、バトルシーンのメインUIを作成するときは、特別にUIBloodRootノードを作成してすべての血を吊るします。図に示すように、game.barとニックネームオブジェクト:

最後に、ニックネーム+ブラッドバーを使用してUIオブジェクトを作成し、キャラクターが作成されたら、次の図に示すように、このオブジェクトを作成します。

バトルシステムにおける3Dキャラクターの3UIコードデザイン

まず、戦闘ユニットごとに、プレイヤーオブジェクトなどの戦略を提供する管理クラスを設計します。多くのゲームでは、プレイヤーを制御するためのPlayerクラスを設計し、ボスモンスターは、ボスを制御するためのBossEnemyクラスを設計し、Player 、ボスには多くの戦略が必要です、いくつかは共有されており、ヘルスバーはその1つです。したがって、通常、プレーヤーとボスは戦略ベースクラスのFightCharactorから継承し、失血と戦い、小道具を食べ、血液を追加するメカニズム戦略を設計できます。 UIヘルスバーを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
}

次に、UICharactorコンポーネントクラスを設計し、新しいコンポーネントクラスのインスタンスをヘルスバーとニックネームのuiオブジェクトに追加して、ヘルスバーの進行状況を表示し、キャラクターのニックネームを表示する機能を提供します。

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

メインのバトルUIインターフェイスのコントロールコードにインターフェイスUICharactorCreateUICharactor()を提供し、UIChractorオブジェクトのインスタンスを返します。擬似コードは次のとおりです。

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

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

}

戦闘キャラクターのFightCharactorクラスの初期化メソッドInitで、UI制御コードのCreateUICharactorインターフェイスを呼び出して、UICharactorのコンポーネントインスタンスを取得します。これにより、UICharactorのインターフェイスを呼び出して、血液量とニックネームを表示できます。戦い。

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

コードでは、this.uiCharactor.SetBloodPerインターフェイスはキャラクターの血液量を表示でき、this.uiCharactor.SetUnickインターフェイスはプレーヤーのニックネームなどを表示できます。

最後に、キャラクターが行く場所で、UIヘルスバーのニックネームオブジェクトの位置が更新されます。これをどのように設計しますか?FightCharactorクラスにLateUpdateメソッドを記述して、戦闘ユニット内のmountPointマウントポイントの位置を取得し、この位置をゲームカメラと組み合わせて画面座標に変換してから、関数ShowAt(Vector3 screenPos)を記述できます。 UICharactorコード;UGUIでは、画面座標がuiノードのワールド座標に変換されるため、UIブラッドバーニックネームノードの位置がmountPointに対応する画面ポイントに配置され、プレーヤーは同期しているように見えます。

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;
}
	// …
}

本号のバトルシステムのUIブラッドバーニックネームの構造とデザインを分析し、グループで受けられる構造とデザインを今すぐ十分に説明・実現したビデオコースウェアを録画しました。

おすすめ

転載: blog.csdn.net/bycw666/article/details/123572414