ゲームでよく見る、キャラクターの上にパワーゲージが表示されるGUIを実現したいなぁと
いうことで試してみました。
今回はシンプルに、数字だけを表示します。

まずはキャラクターを用意します。
適当にカプセルを用意して、Mob_Controller.jsを適用しました↓

Mob_Controller.js
-------------------------------------------------
var labelPfb : GameObject;               // NGUIラベル
var myHP : int;                          // HP
private var labelNameObj : GameObject;   // HP用NGUIラベル(プレファブ)

function Start() {
	// ラベル生成
	labelNameObj = Instantiate(labelPfb, Vector3.zero, Quaternion.identity);
	// HP表示を更新
	labelNameObj.GetComponent(Label_Controller).SetMyHP(myHP);
}

function FixedUpdate() {
	// 単純移動
	transform.localPosition.z += 2 * Mathf.Sin(Time.time);
}

function Update() {
	// 本オブジェクトのスクリーン座標をもとにNGUI用の座標を設定
	var screenPos : Vector3 = Camera.mainCamera.WorldToScreenPoint(transform.position);
	labelNameObj.transform.localPosition.x = screenPos.x - Screen.width / 2;
	labelNameObj.transform.localPosition.y = screenPos.y - Screen.height / 2 + 30;
	labelNameObj.transform.localPosition.z = 1;
}
-------------------------------------------------

ここで行っていることは、
Start()
・NGUIのLabelを外部から受け取って、適当な場所に生成(後述)
・LabelをキャラクターのHPに書き換える

FixedUpdate()
・キャラクターをz方向に適当に揺らす

Update()
・Start()で生成した「NGUIのLabelオブジェクト」を、キャラクターのスクリーン座標に合わせて移動
※y座標を +30 しているのは、キャラクターの頭上に表示したいため

肝となるのが、Update()の中の「WorldToScreenPoint()」です。
これで3D空間にいるキャラが、スクリーン上ではどの座標になるのかがわかります。

Inspectorウィンドウの設定を確認してみるとこんな感じ↓



これでキャラクター側の設定は完了です。

次は、キャラのHPを表示する「NGUIのLabel」を用意します。
はじめに、NGUIを表示するための準備をします。

NGUIメニュー > Create a New UI > デフォルト設定のまま[Create your UI]をクリック

こんな階層ができます↓



この中にある「Panel」階層下にNGUIのLabelオブジェクトを置くとGUIとして表示されるようになります。

NGUI > Create a Widget

として、↓のウィンドウが出るので、適当にサンプルフォントを適用してLabelを生成します
※Label生成の詳しい話はこちら



Inspectorウィンドウに「Label」ができます↓



ただ、このままの状態だと問題があります。

【問題1】キャラクターの数だけLabelオブジェクトが必要になる

だったら、Labelオブジェクトをプレファブにして、必要な分だけあとでインスタンスを
生成すればいいじゃん！

【問題2】インスタンスを生成すると、最上位の階層に生成してしまうため、そのままでは表示されない
※NGUIのPanel階層下でしかLabelオブジェクトは表示されないようです(自己確認)

ということで、解決したのはこの形。

【問題1】→ インスタンスを生成する方法(Instantiate())はそのまま採用
【問題2】→ 生成したインスタンスをPanel階層下に移動した

ということで、Labelをプレファブ化しました↓



「Label_Controller.js」を適用しています。

Label_Controller.js
-------------------------------------------------
private var myHP : int;
private var label : UILabel;

function Start () {
	// キャッシュ
	label = gameObject.GetComponent(UILabel);
	// NGUIのPanel階層下に置く
	transform.parent = GameObject.Find("Panel").transform;
	// 初期位置
	transform.localScale = Vector3(30, 30, 1);
	transform.localPosition = Vector3.zero;
}

function Update() {
	// ラベル書き換え
	label.text = "" + myHP;
}

function SetMyHP(input : int) {
	myHP = input;
}
-------------------------------------------------

ここでの肝は、Start()にある

transform.parent = GameObject.Find("Panel").transform;

です。
自分(NGUIのLabelオブジェクト)の親を「NGUI階層の中にあるPanel」にすることで、
↓のように、インスタンスをPanelの直下に移動させることができました。



これで、GUIでも表示されるようになります。
あとは、Update()内で表示を更新したり、SetMyHP()メソッドを用意してLabelを書き換えられるようにしました。

これで準備が整いました。
いざ、実験です。

流れはこんな感じです。

(1)Mob_Controller.js で NGUIのLabelのインスタンスが生成される
(2)インスタンスが生成されると、インスタンス自身がNGUIのPanel階層下に移動
(3)(2)によって、NGUIに表示されるようになったので、キャラクターの移動に合わせて
　インスタンスの座標も移動

キャラクターを2体用意してみました。

HPが70。


HPが50。


これがプレビュー画面です↓



うまくいきました。
キャラの動きに合わせて、HPの表示も移動します。
よかったよかった。

※HPの動的更新とか、Labelオブジェクトの削除処理とかは実装していません。


これまで、必要な分だけLabelを用意していたので
「プレファブ化＆インスタンス生成」という方法は非常に助かります。
まだまだ知らないことは盛りだくさん！