1217 パワーゲージを動かそう！ - mishimatsu/AdventCalendar2014 GitHub Wiki
前回は、テクスチャでパワーゲージを表示しました。
今回は、パワーゲージの長さを変えるアニメーションを行いたいと思います。
いつものように、Unityを起動します。
今回もスクリプトを利用するので、BallスクリプトをダブルクリックしてMonoDevelopを起動します。
今回作成するパワーゲージの長さを変えるアニメーションを実現するために必要なことを考えてみましょう。
1.パワーゲージの長さの変更
2.経過時間の取得
最低限、この2つが必要なようです。
順番に見ていきましょう。
1.パワーゲージの長さの変更
これは、パワーゲージを描画する際の横幅を設定すれば変更できそうです。
GUI.DrawTexture()には、第一引数にRectを与えるので、このRectの幅を変更することで対応できそうです。
2.経過時間の取得
これがなぜ必要かというと、パワーゲージは、時間が経過すると徐々に伸びていくはずです。
そのために、前の処理からどれくらい時間が経過したかを知る必要があります。
経過時間を取得するには、Time.deltaTimeを使います。
Time.deltaTimeは、前回の処理からの経過時間を返します。
Time.deltaTimeの単位は、ミリ秒になります。
1秒は、1000ミリ秒です。
これで、パワーゲージをアニメーションさせるためのパーツが揃いました。
スクリプトを書いてみましょう。
今回は、少しスクリプトの量が増えました。
順番に見ていきましょう。
7行目
private float totalTime;
これは、経過時間の合計を保存しておく変数です。
privateのキーワードが出てきました。
これは、このクラス内でのみ参照可能という意味になります。
8行目
private float gaugeWidth;
現在のパワーゲージの幅を保存しておく変数です。
パワーゲージの幅の最大値と経過時間から求めた幅データを保持しておきます。
9行目
public float gaugeMaxWidth = 256.0f;
パワーゲージの幅の最大値を保存しておく変数です。
Unity側から横幅を調整したいので、publicにしてあります。
256.0fがついていますが、横幅の初期値を256.0fするという意味です。
今回の変数の定義は、この3つのみになります。
続いて、パワーゲージの幅を求める処理について解説します。
経過時間を加算する
17行目
totalTime += Time.deltaTime;
totalTimeにTime.deltaTimeつまり、前回からの経過時間を足し合わせる処理になります。
+=の演算子は、totalTime = totalTime + Time.deltaTimeという意味で、加算して代入する演算子になります。
totalTime = totalTime + Time.deltaTime;と書いても問題ないのですが、totalTime += Time.deltaTime;と記述したほうが簡潔に書け、タイプ量も少ないのでよく使われます。
+演算子の説明が抜けていましたね。
+演算子は、数学と同様に加算を表す演算子です。
19行目
gaugeWidth = gaugeMaxWidth * totalTime;
パワーゲージの幅の最大値と経過時間の合計を掛けあわせて、表示するパワーゲージの幅を求めています。
経過時間が0の場合には、パワーゲージの幅が0になり、
経過時間が1に近づくと、パワーゲージの幅がgaugeMaxWidthの値に近づいていきます。
今回の場合、gaugeMaxWidthの値は、256.0なので、256.0に近づくことになります。
32行目
GUI.DrawTexture(new Rect(10, 10, gaugeWidth, 32), gauge);
変更前
GUI.DrawTexture(new Rect(10, 10, 256, 32), gauge);
変更後
GUI.DrawTexture(new Rect(10, 10, gaugeWidth, 32), gauge);
定数の256がgaugeWidthに変更になっています。
Rectの幅のパラメータを定数から変数へ変更したことで、パワーゲージの幅を自由に変えられるようになりました。
実行してみよう！
・・・
パワーゲージが指定した幅を越えて、画面の端まで描画されてしまいました。
原因は、totalTimeが1.0で折り返されないのが原因のようです。
例:totalTimeが2.0になった場合には、2.0 x 256.0 = 512となってしまいます。
totalTimeが1.0より大きくなったら0に戻す処理を追加しましょう。
Mathf.Repeat()関数を使います。
18行目
totalTime = Mathf.Repeat(totalTime, 1.0f);
これで、totalTimeは、0.0から1.0の間の値で繰り返します。
例えば、1.0の値を50.0に変更すると、totalTimeの値は、0.0から50.0の間の値で繰り返します。
実行してみましょう。
少しパワーゲージのスピードが遅いようです。
スピードをUnity上から調整できるようにしましょう。
10行目
public float gaugeSpeed = 1.0f;
gaugeSpeedをUnity上から調整できるようにpublicのメンバー変数にしてあります。
19行目
totalTime += Time.deltaTime * gaugeSpeed;
追加したgaugeSpeedの変数を掛けることで、進める時間を速めています。
追加したgaugeSpeedは、BallのInspectorで確認できます。
実行してみましょう。
実行中にパワーゲージのスピードを変更することも可能です。
値を変更して、パワーゲージの変化を確認してみましょう。
練習問題
パワーゲージの表示位置をUnityのInspectorから設定できるように、スクリプトを変更してみましょう。
次回は、パワーゲージの値に応じて、ボールを投げるスピードを変化させたいと思います。
それでは、楽しいUnity Lifeを！
参考文献
Mathf.Repeat