ゲームでよく見かける「ドーナツ状ゲージ」。
みんなどうやって実現しているんだろうーと思いながら、自分なりに実現させてみました。

NGUIの各所の詳細は割愛します。

はじめに、半円のドーナツ画像を用意します。
赤い方がゲージに使う画像。
白い方が目隠しに使う画像です。



アルファチャンネルも用意↓


この画像をNGUIにSpriteとして読み込みます。
この後の作業のため、画像のPivotは「right」にしておきます。
それぞれの画像の並べ方はこんな感じ。

目隠し用画像(名前は HalfCircle)


左半分(名前は HalfCircleColor1st)


右半分(名前は HalfCircleColor2nd)


3つを重ねて並べるとこうなります↓


NGUIの各Depthは、このとおり。
HalfCircle = 1
HalfCircleColor1st = 0
HalfCircleColor2nd = 2

各画像はこんな意味があります。
HalfCircleColor1st : 全体を100とすると、0〜50を表示するために使用
HalfCircleColor2nd : 全体を100とすると、50〜100を表示するために使用

この2つの半円を回転させて、ドーナツ状ゲージを表示します。
ですが、このままだと単に半円が回転しているだけなので、
半円が徐々に見えるように0のときは「HalfCircleColor1stをすべて隠す」必要があります。
その隠すために使うのが「HalfCircle」です。

次は、回転させるためのスクリプトです。
「HalfCircleColor1st」「HalfCircleColor2nd」に適用します。

PowerGage_Controller.js
-----------------------------------------------------
var firstHalf : boolean;  // 前半バーかどうか
private static var changeNext : boolean; // 全後半バトンタッチ用静的フラグ
private var wg : UIWidget;
function Start () {
	if (!firstHalf) {
		// 前半は非表示
		wg = this.GetComponent(UIWidget);
		wg.color.a = 0;
	}
}
function FixedUpdate() {
	if (firstHalf) {
		if (transform.localEulerAngles.z <= 180) {
			transform.localEulerAngles.z += 1;
		} else {
			transform.localEulerAngles.z = 180;
			// 後半バーにバトンタッチ
			changeNext = true;
		}
	} else {
		if (!changeNext) {
			return;
		}
		if (transform.localEulerAngles.z >= 180 && transform.localEulerAngles.z <= 360) {
			wg.color.a = 1;
			transform.localEulerAngles.z += 1;
		} else {
			transform.localEulerAngles.z = 360;
		}
	}
}
-----------------------------------------------------

詳細の説明は割愛しますが、「transform.localEulerAngles.z」を徐々に増やすことで回転させています。
「HalfCircleColor1st」かどうかを区別するために、「firstHalf」というフラグを用意して、Inspector上で true にしておきます↓

HalfCircleColor1stのInspector


HalfCircleColor2ndのInspector


「HalfCircleColor2nd」の初期位置だとはじめから見えてしまうので、
UIWidgetでアルファチャンネルを0に設定して非表示にしています。
ゲージが増えてきて半分を超えたらアルファを1にして(wg.color.a = 1)表示します。

では、実行してみます。

スタート時↓


前半↓


後半↓


↑HalfCircleColor2ndのDepthを一番大きく設定しているので、目隠し画像の手前に見えます。

ゲージいっぱい↓


説明のために背景を別色にしましたが、背景色と目隠し画像の色を合わせるとそれっぽく見えます↓


ということで、NGUIでドーナツ状ゲージを作ってみました。
今回はシンプルなものを作りましたが、
さらに手前に格好良い「枠」を用意するともっとゲームっぽいデザインのゲージになると思います。

プログラムを載せるのって、緊張するなー。
自分の力不足を晒しているようで……。
それでも情報共有の意味はあると思います。

何かのヒントになれば幸いです m(_ _)m