2013年01月13日

[Unity] NGUIでドーナツ状ゲージを作ってみた(改良編)

前回の記事では目隠しを使いました。
この方法には欠点がありました。

・背景と目隠しが同じ色じゃないといけない
・ゲージが空のときにそこを透けさせて背景を表示できない

それを解消しつつ、もっと簡単に実現できる方法があったので備忘メモ。

やることは、

・ドーナツ状ゲージの「1度」分のゲージをつくる
・それを360個コピーして円状に並べる

これだけです。

前回の画像を編集して、1度分のゲージにします(赤枠で囲ったところ)↓
20130112circle_graph015.png

前回の画像を編集して使いまわしているので、Pivot位置も「Right」のままです。
この小さい画像用にSpriteの縦横幅を小さくしたりPivot位置を変えたりはしません。
変えてしまうと、回転させてもドーナツ状になりません。

これを360個円状に手で並べるのは大変なので、「プレファブにしてプログラムで一気に並べる」方法をとります。

Hierarchyウィンドウでいうと、「PowerGage」の直下に360個を置きます↓
20130112circle_graph016.png


そのプログラムです。
Test.js
---------------------------------------------
var prfb : GameObject; // ここにプレファブ化した「1度分」のSprite画像を読み込む
private static var num : int; // ゲージ管理用番号
function Start () {
num = 0;
var obj : GameObject;
for (var i : int = 0; i < 360; i++) {
// インスタンスを生成
obj = Instantiate(prfb, Vector3(0, 0, 0), Quaternion.identity);
// 親子関係
obj.transform.parent = GameObject.Find("PowerGage").transform;
// リサイズ(オリジナルサイズに)
obj.transform.localScale = Vector3(160, 320, 1);
// 位置
obj.transform.localPosition = Vector3.zero;
// 回転
obj.transform.localEulerAngles.z = i;

// 番号を振り当てる
obj.GetComponent(OneDegree_Controller).SetNum(i);
}
}
function Update() {
// ゲージを増やしていく
if (num < 360) {
num++;
}
}
static function GetNum() : int{
return num;
}
---------------------------------------------

赤で記述したところが、インスタンスを生成して円状に並べているところです。
その他については、これから説明します。

さて、赤い箇所の部分だけで円状に並べることはできましたが、それではただの円。
ゲージとしては機能しません。
そこで、「num」という変数の0〜359の値に合わせてゲージが増減する仕組みを入れます。
それが上記の Update() の部分です。

次に「1度分のゲージ」のインスタンスそれぞれに、0〜359の数値を順番に割り振ります。
あとは、「Test.jsのnum」と各ゲージに与えられた数字とを比較して、

・自分に与えられた数値よりもnumの方が大きいならば自分のゲージを表示
・そうじゃなかったら、自分のゲージは非表示

という条件をつければ完成です。

「1度分のゲージ」に使うSprite画像のプレファブに適用したスクリプトです↓

OneDegree_Controller.js
---------------------------------------------
private var num : int; // 割り振られる番号
private var wg : UIWidget; // 表示/非表示で使用
function Start() {
wg = this.GetComponent(UIWidget);
}
function SetNum(input : int) {
num = input;
}
function Update() {
// 自分の番号以上だったら表示
if (Test.GetNum() >= num) {
wg.color.a = 1;
} else {
wg.color.a = 0;
}
}
---------------------------------------------
それでは、実行してみます。
20130112circle_graph017.png

成功しました。
各インスタンスが「PowerGage」以下に生成されています。

こっちの方がスッキリして良さげです。
posted by be-style at 01:22| Comment(2) | Unity
この記事へのコメント
はじめまして。なめたけと言います。
僕もUnityでゲームを開発しています。

ドーナツ状のゲージをNGUIで作るということですが、
NGUIで通常の「Sprite」ではなく
「Filled Sprite」を使用すると簡単にドーナツ状のゲージを作れます。

1. Widget ToolでTemplateをFilled Spriteにしてウィジェットを作成

2. 生成したウィジェットのInspectorで
UIFilled Spriteの中のFill Amountの値を変更する

多分、NGUIでドーナツ状のゲージを作る場合は、
これが一番簡単だと思います。

あとはFill Dirで塗りつぶしの方向、
Invert Fillで塗りつぶしの方向を逆にするかどうかを変更できるので、
このあたりの値を変更するだけで
いろんな種類のゲージが作れると思います。

参考にして下さい。
Posted by なめたけ at 2013年01月26日 11:30
はじめまして、返信遅れてスミマセン!
HP拝見しました、UnityでiOS/Androidの両方のアプリを作られてますね!
ブログがUnityネタで充実してて羨ましいです。

コメントいただいたNGUI情報、ありがとうございます!
この機能は知らなかったので、試してみますね。

NGUIはよく使っているのですが、同じ機能しか使っていないもので・・・。
今後も気づいたことがありましたらコメントいただけると嬉しいです!
Posted by be-style at 2013年02月24日 07:23
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]