Unity Fill Amountを使って時計タイマーを作る
ゲームの制限時間を表現するのに画像がどんどん埋まっていくような処理ってよくありますよね。
今回はUnityのImageコンポーネントに備わっているFill Amountというものを使って時計のようなタイマーを作ってみたいと思います。
ちなみに以前つくったタイマーは数字が変化していくというものでした。
こちらの応用になります。
この機能を利用して作ったゲームはこちらです。
では早速やっていきましょう。
Unityで新規2Dプロジェクトを作成します。画面サイズは960*540です。
タイマーとなるImageを作成
まずHierarchy上にタイマーのベースとなるImageを作成します。
ClockBaseと名付けました。
更に今作ったClockBaseの子要素にImageを追加します。
こちらはClockInnerとしました。
画像が中心に来るようCanvasとClockBaseのInspactorを調整します。
画像が四角では時計っぽくありませんのでClockBaseとClockInnerのスプライトを丸にしましょう。
タイマー用画像のInspector設定
次に時計っぽくなるようにClockInnerの調整をInspectorから行っていきます。
まずはColorを変更します。今回は赤にしました。
ImageコンポーネントはSorce Imageが設定されるとImage Typeを設定出来るようになります。
ではやっていきましょう。
Image TypeをSimpleからFilledに変更、Fill MethodをRadial 360、Fill OriginをTopにします。
こうするとFill Amountのスライダーを変更することでClockInnerが円を満たすかのうように変化していきます。
ちなみにClockwiseのチェックが入っていると時計回り、外すと反時計回りになります。
時計っぽくてきました。
タイマー処理を書くTimerスクリプト作成
あとはコードからClockInnerのFill Amountの値を操作できれば良さそうな気がします。
それではタイマー用のゲームオブジェクトをHierarhyに追加し、ソースコードを書いていきましょう。
ゲームオブジェクトはClockObj、それにアタッチするC#スクリプトはClockTimerとしました。
最初の段階のコードの中身はこのような感じです。
Fill Amountは0から1の範囲で指定した割合を画像表示してくれますので、経過時間を制限時間で割ることによってそれが求められます。
ではInspectorからTimerLimitを設定します。
今回は60としました。
起動してコンソールを確認してみます。
どんどん数字が増えていってるのがわかります。
この値を利用してClockInnerのFill Amountの値を変えていきましょう。
そのためにClockInner側にもC#スクリプトをアタッチしましょう。
こちらは今回Clockというファイル名にしました。
Clockに持たせる機能はClockTimerの_updateTimer()関数で取得したtimerを受け取りその値をFill Amountの値にしていくというものです。
具体的にはこのようなソースコードになりました。
コメントにも書きましたが実際にはUpdateClock()はClockTimer側から呼ばれます。
ではそれが出来るようにClockTimerの中身も変更しましょう。
ClockのUpdateClock()関数を呼び出し、timer変数を渡すため上記のようなコードになりました。
最後にClockObj、ClockInnerそれぞれの設定をしていきます。
まずClockObjのInspectorです。ClockがアタッチされているClockInnerをアタッチしましょう。
続いてClockInnerのInspectorからFillAmountの値を0にします。
これで実行してみると時間とともに徐々に赤く塗られていくのがわかるかと思います。
これで簡単ですが時計っぽいタイマーができました。
FillAmountの機能はこれ以外にもHPバーなどにも応用出来ますので別の機会で紹介できればと考えています。
FillAmountはとても便利な機能ですので是非いろんな場面で使ってみて下さい。
関連記事
Unityの学習方法
Unity初心者の方にオススメの学習方法をいくつか紹介します。
Unity本【kindle unlimited】
私も利用しているAmazonが提供する電子書籍読み放題のサービスです。
月額980円で約200万冊以上が読み放題でとてもお得です。
また30日無料体験もできるのが魅力です。当然Unityに関する書籍もたくさん揃っています。
またC#関連の書籍や、プログラミングのものも多数あります。
プログラミング関連の書籍は値段が結構しますので、それらが無料で読めるのはかなりお得なサービスです。
30日無料体験もありますので気に入らなければその期間に解約すれば料金は発生しません。
通常のUnity本
kindle unlimitedは全部のUnity関連書籍が読めるわけではありません。
通常に購入しなければ読めない本もありますので、その中から私が参考になった書籍を紹介します。
Udemy
Udemyの動画講座にもUnity関連のオススメの動画がたくさんあります。
その中でも私が特に気に入っている動画を紹介します。
どの動画も初心者でも完成することが出来るように丁寧に解説しています。
オンラインで学習
質問が出来るおすすめのUnity学習方法ページです。
・Unityでゲーム作りたいけど何から初めたら良いかわからない。
・独学でゲームを完成させられるか不安。
・ゲーム開発でわからないことを一人で解消できない。
・入門書を一通りやってみたが次に何していいかわからない。
こんな人におすすめしたい内容になっています。
関連記事

UnityでGoogleスプレッドシートの読み込みと書き込みを行う
今回はUnityとGoogleのスプレッドシートを連携させて、スプレッドシートの内容を表示させたり、Unity側からスプレッドシートに情報を追記して行く方法を作ってみたいと思います。 ちなみにこの仕組みを実装する経緯は業 […]

ゲーム素材を作成するときに使えるAIイラストツール
個人開発でゲームを作っていると素材をどうするか苦労しませんか?
私は絵心が無いのでいつもキャラクター等の画像で頭を悩ませます。
そんなときに使えるのがAIがイラストを作ってくれるツールです。

自作ゲームのプレスリリースを受け付けてくれるサイト
個人制作のゲームでもプレスリリースを受け付けてくれるサイトを紹介してみようと思います。
必ず掲載してくれるというわけではありませんが、参考にしていただければと思います。

ドラクエ風 簡単な名前入力システムを作る
ドラクエをはじめ、名前などを入力するシステムを作っていきます。
非常にシンプルな作りになっています。

【初心者向け】ButtonのOnClickをC#スクリプトで登録する
ButtonのクリックイベントをInspectorではなくC#スクリプトから登録する方法です。
初心者の方でも簡単に出来る内容です。

URP 2Dで複数のカメラを使って描画する
UnityのURP2Dで複数のカメラを使ってゲーム画面に表示させる方法を紹介したいと思います。
ミニマップなどを表示したいときに便利です。

ウィザードリィのような疑似3Dダンジョンを作る
ウィザードリィのような疑似3DダンジョンをUnity2Dで作成してみたいと思います。

穴掘り法で2D迷路を作る
穴掘り法を使って2Dマップを作成してみます。
プレイヤーの移動まで実装しています。

見下ろし2Dマップ上でプレイヤーを動かす
プレイヤーを2Dマップ上で移動させてみます。
見下ろし型のRPGとかでありそうなやつです。
最後までご覧頂いてありがとうございました。