僕らは偶然性を大切にするためにクソゲーを作り続ける。

なんか気ままにクソゲームを作っています。

【Unity】タイムゲージの作り方その1【小技集その1】

0. 今日作るもの


こんにちは、PlayWao!プログラム担当のかぼちゃです! 今日紹介するのは、 「タイムゲージの作り方」

タイムゲージは、下のように、時間によってゲージが減っていくもの。 もはや、おなじみですね。

f:id:playwao:20150225160208g:plain

ゲージそのものがゲーム画面から消えるわけではないので、ゲージそのものに細工する方針にしましょう。 画像の長さを変えたいとなると、TransformのScaleをいじる他なさそう。ということで、時間がたつ毎に、ゲージのScaleを縮めていく方針で行きましょう。

1. つくってみた


では、早速つくっていきます。 必要になるのは、ゲージの元になる長方形の画像のみ。

1) 画像の追加

まず元となるゲージの画像を用意して、Unityに追加します。 ドラッグ・アンド・ドロップして「Project」に放り込みましょう。

f:id:playwao:20150225154450p:plain

2) 画像の設定

「Project」に追加された画像を選択すると、「Inspector」に画像の設定を行う欄がでてきます。この画像の青い部分、「Pivot*」の部分をみてみると、値が{Center}となっています。

これをBottomに変えて、右下のApplyをクリックして保存します。

f:id:playwao:20150225160325p:plainf:id:playwao:20150225160326p:plain

  • *Pivotとは???
    Pivotは、画像の基準点という意味です。正確にはTransformが参照する座標の位置のことです。TransformのPosition,Rotation,Scaleのすべてがこの座標を基準にして計算されます。具体的に見てみましょう。図中で左がPivot=Center、右がPivot = Bottomになっています。 まずはPositionから。以下は2つともY=0にした例

f:id:playwao:20150225155823p:plain

このように基準になる点をy=0にあわせようとします。もう想像付くかと思いますが、Rotationでは基準点を中心に回転され、Scaleも基準点を中心に伸縮が行われます。

f:id:playwao:20150225155836p:plain f:id:playwao:20150225155901p:plain

伸縮の例を見てみるとわかりますが、タイムバーを作りたい場合、PivotをBottomにしたほうがいいですね!

3) 伸縮スクリプト作成

さていよいよ伸縮。画像を画面上に配置しましょう。画像(スプライト)を選択すると「Inspector」上に画像(スプライト)の詳細がでます。ここでAdd ComponentからNew Scriptを選んで、新しいスクリプトを作ります。

f:id:playwao:20150225160545p:plain f:id:playwao:20150225160546p:plain f:id:playwao:20150225160547p:plain

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をいじるだけだと画像の比率がかわってしまうことです。

f:id:playwao:20150225160706p:plain

今回は無地のタイムゲージなので問題はありませんでしたが、上のような例だと、少し不格好です。

実は、これを回避するうまい方法があります。 それはカメラによるマスキングというもの・・・・ 次回はそのテクニックを紹介します。

では今回はこれにて!