Unity Fill Amountを使って時計タイマーを作る

ゲームの制限時間を表現するのに画像がどんどん埋まっていくような処理ってよくありますよね。
今回はUnityのImageコンポーネントに備わっているFill Amountというものを使って時計のようなタイマーを作ってみたいと思います。

ちなみに以前つくったタイマーは数字が変化していくというものでした。
こちらの応用になります。

Unityで簡単なカウントダウンタイマーを作る

Unityで残り何秒みたいなタイマー処理を実装してみたいと思います。制限時間は色んな場面で使えると思います。

この機能を利用して作ったゲームはこちらです。

着込むんです。

旅人の服を脱がす対決を始める北風と太陽。彼らの話を聞いてしまった旅人が…。

では早速やっていきましょう。
Unityで新規2Dプロジェクトを作成します。画面サイズは960*540です。

Unityスキルアップ、
始めるなら今

パズル、脱出、RPG...目標のゲームを完成させよう！

人気のUnity講座はこちら

タイマーとなるImageを作成

まずHierarchy上にタイマーのベースとなるImageを作成します。
ClockBaseと名付けました。

更に今作ったClockBaseの子要素にImageを追加します。
こちらはClockInnerとしました。

画像が中心に来るようCanvasとClockBaseのInspactorを調整します。
画像が四角では時計っぽくありませんのでClockBaseとClockInnerのスプライトを丸にしましょう。

画像の設置

CanvasとImageの調整

タイマー用画像のInspector設定

次に時計っぽくなるようにClockInnerの調整をInspectorから行っていきます。
まずはColorを変更します。今回は赤にしました。
ImageコンポーネントはSorce Imageが設定されるとImage Typeを設定出来るようになります。
ではやっていきましょう。
Image TypeをSimpleからFilledに変更、Fill MethodをRadial 360、Fill OriginをTopにします。
こうするとFill Amountのスライダーを変更することでClockInnerが円を満たすかのうように変化していきます。
ちなみにClockwiseのチェックが入っていると時計回り、外すと反時計回りになります。

赤く塗りつぶす

Image Typeの設定

Fill Amountを変えて確認

時計っぽくてきました。

タイマー処理を書くTimerスクリプト作成

あとはコードからClockInnerのFill Amountの値を操作できれば良さそうな気がします。
それではタイマー用のゲームオブジェクトをHierarhyに追加し、ソースコードを書いていきましょう。
ゲームオブジェクトはClockObj、それにアタッチするC#スクリプトはClockTimerとしました。
最初の段階のコードの中身はこのような感じです。

Fill Amountは0から1の範囲で指定した割合を画像表示してくれますので、経過時間を制限時間で割ることによってそれが求められます。

ではInspectorからTimerLimitを設定します。
今回は60としました。
起動してコンソールを確認してみます。
どんどん数字が増えていってるのがわかります。

Fill Amountの値を変化させる

この値を利用してClockInnerのFill Amountの値を変えていきましょう。
そのためにClockInner側にもC#スクリプトをアタッチしましょう。
こちらは今回Clockというファイル名にしました。
Clockに持たせる機能はClockTimerの_updateTimer()関数で取得したtimerを受け取りその値をFill Amountの値にしていくというものです。
具体的にはこのようなソースコードになりました。

コメントにも書きましたが実際にはUpdateClock()はClockTimer側から呼ばれます。
ではそれが出来るようにClockTimerの中身も変更しましょう。

ClockのUpdateClock()関数を呼び出し、timer変数を渡すため上記のようなコードになりました。

最後にClockObj、ClockInnerそれぞれの設定をしていきます。
まずClockObjのInspectorです。ClockがアタッチされているClockInnerをアタッチしましょう。