【Unity】タイムゲージの作り方その1【小技集その1】
0. 今日作るもの
こんにちは、PlayWao!プログラム担当のかぼちゃです! 今日紹介するのは、 「タイムゲージの作り方」
タイムゲージは、下のように、時間によってゲージが減っていくもの。 もはや、おなじみですね。
ゲージそのものがゲーム画面から消えるわけではないので、ゲージそのものに細工する方針にしましょう。 画像の長さを変えたいとなると、TransformのScaleをいじる他なさそう。ということで、時間がたつ毎に、ゲージのScaleを縮めていく方針で行きましょう。
1. つくってみた
では、早速つくっていきます。 必要になるのは、ゲージの元になる長方形の画像のみ。
1) 画像の追加
まず元となるゲージの画像を用意して、Unityに追加します。 ドラッグ・アンド・ドロップして「Project」に放り込みましょう。
2) 画像の設定
「Project」に追加された画像を選択すると、「Inspector」に画像の設定を行う欄がでてきます。この画像の青い部分、「Pivot*」の部分をみてみると、値が{Center}となっています。
これをBottomに変えて、右下のApplyをクリックして保存します。
- *Pivotとは???
Pivotは、画像の基準点という意味です。正確にはTransformが参照する座標の位置のことです。TransformのPosition,Rotation,Scaleのすべてがこの座標を基準にして計算されます。具体的に見てみましょう。図中で左がPivot=Center、右がPivot = Bottomになっています。 まずはPositionから。以下は2つともY=0にした例
このように基準になる点をy=0にあわせようとします。もう想像付くかと思いますが、Rotationでは基準点を中心に回転され、Scaleも基準点を中心に伸縮が行われます。
伸縮の例を見てみるとわかりますが、タイムバーを作りたい場合、PivotをBottomにしたほうがいいですね!
3) 伸縮スクリプト作成
さていよいよ伸縮。画像を画面上に配置しましょう。画像(スプライト)を選択すると「Inspector」上に画像(スプライト)の詳細がでます。ここでAdd ComponentからNew Scriptを選んで、新しいスクリプトを作ります。
Inspectorでスクリプト名をダブルクリックするとエディタが開くので、以下のコードを打ち込みましょう。
void timerStart(){ float time = 5f; iTween.ScaleTo (this.gameObject,iTween.Hash("y",0f,"time",time)); }
スクリプトでは簡単のため、iTweenライブラリを使いました。(導入や使い方はココとかが詳しいです) ざっと説明すると、「このgameObject(タイムバーのこと)のy軸のScaleを5秒間で0にする」となっています。
4) 実行!!
さて、実行ボタンを押すと…見事5秒で縮むバーが! 今回は縦ですが、横にしたい場合は、PivotをLeftにして、xのScaleを変えましょう。また、例えば、値が減る毎に割合で縮むようにすれば、HPバーも作れますね。
2. 他の実装方法
上の実装は慣れていればものの数分であっという間にゲージが作れるでしょう。 実は、この方法簡単なのですが、デメリットもあります。それは 単純にScaleをいじるだけだと画像の比率がかわってしまうことです。
今回は無地のタイムゲージなので問題はありませんでしたが、上のような例だと、少し不格好です。
実は、これを回避するうまい方法があります。 それはカメラによるマスキングというもの・・・・ 次回はそのテクニックを紹介します。
では今回はこれにて!