2013年01月12日

[Unity] NGUIでドーナツ状ゲージを作ってみた

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

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

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

20130112circle_graph001.png

アルファチャンネルも用意↓
20130112circle_graph002.png

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

目隠し用画像(名前は HalfCircle)
20130112circle_graph003.png

左半分(名前は HalfCircleColor1st)
20130112circle_graph004.png

右半分(名前は HalfCircleColor2nd)
20130112circle_graph005.png

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

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
20130112circle_graph007.png

HalfCircleColor2ndのInspector
20130112circle_graph008.png

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

では、実行してみます。

スタート時↓
20130112circle_graph009.png

前半↓
20130112circle_graph010.png

後半↓
20130112circle_graph011.png

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

ゲージいっぱい↓
20130112circle_graph012.png

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

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

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

何かのヒントになれば幸いです m(_ _)m
posted by be-style at 18:04| Comment(2) | Unity

2012年12月22日

[Unity] 実行時エラー(INSTALL_FAILED_MEDIA_UNAVAILABLE)の対処

Unity(Androidアプリ)で[Build and Run]を押したときに、

INSTALL_FAILED_MEDIA_UNAVAILABLE

というエラーが出てハマったので備忘メモ。

他の端末では問題なくインストールも動作もするのに、とある端末だけはこのエラーが出ていました。

UnityのBuild Settingsを見ると
「Install Location」は参考サイトにもあるとおり「Automatic」になっているし、問題ないはず。
というか、他の端末で動作している時点で、この端末独自の問題かなと思いました。

20121222oneshot002.png

【参考】
INSTALL_FAILED_MEDIA_UNAVAILABLE:
http://jetter2.blog47.fc2.com/blog-entry-63.html

端末の状況を調べてみたら、SDカードが読み取り専用になっていました↓
20121222oneshot001.png

予想ですが、
・インストール先がAutomatic → SDカードを認識 → SDカードにインストールを試みる
・SDカードに問題があって読み取り専用になっているためインストール失敗
・結果、INSTALL_FAILED_MEDIA_UNAVAILABLE

SDカードを抜いて、再度差し込んだらSDカードをちゃんと認識できました。
その状態で[Build And Run]を実行したら、アプリをインストールできました。

SDカードが原因だったとは。。。
エラーパターンとして、今回のパターンも覚えておこう。
posted by be-style at 19:04| Comment(0) | Unity

2012年12月20日

[Unity] GUI.Labelで改行したい

画面に文字を表示するときにGUI.Labelを使うことがあるのですが、
「テキストを好きな位置で改行するにはどうしたらいいんだろう」ことで備忘メモ。

Windowsと同じ感覚で「¥n」でいけるかと思ったら、「¥n」がそのまま表示されてしまいました orz
調べたら、「¥」ではなく「\」を使えばいけました。
function OnGUI() {
GUI.Label(Rect(100, 200, 200, 100), "改行\nしてみた");
}
結果はこのとおり↓

スクリーンショット 2012-12-20 10.49.49.png

参考サイトには、他にもタブを表現したりとか他の文字についても掲載されています。

【参考】
How to make a line break in a GUI Label:
http://answers.unity3d.com/questions/138464/how-to-make-a-line-break-in-a-gui-label.html
posted by be-style at 10:57| Comment(0) | Unity