タニスゲームス

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

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

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

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

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

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

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

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

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

人気のUnity講座はこちら

Udemy講座

タイマーとなる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のチェックが入っていると時計回り、外すと反時計回りになります。

赤く塗りつぶす
Color

Image Typeの設定
ImageType

Fill Amountを変えて確認
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をアタッチしましょう。
ClockInnerをアタッチ

続いてClockInnerのInspectorからFillAmountの値を0にします。
FillAmountを0に設定

これで実行してみると時間とともに徐々に赤く塗られていくのがわかるかと思います。
赤く塗られていくのを確認

これで簡単ですが時計っぽいタイマーができました。
FillAmountの機能はこれ以外にもHPバーなどにも応用出来ますので別の機会で紹介できればと考えています。
FillAmountはとても便利な機能ですので是非いろんな場面で使ってみて下さい。

関連記事

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

おすすめUnityオンライン学習

一人でゲーム開発が不安な方はオンラインスクールで学習すると効率が良いと思います。
以下に当てはまる人は検討してみると良いかもしれません。

「ゲーム作りけど何から初めればいい？」
「入門書をの次に何をしたらいいの？」
「疑問や問題を一人で解決出来ない。。」
「ゲームを完成させる自信がない。。」
「気軽に質問できる環境が欲しい。。」

自分で学習することに限界を感じたら
オンライン学習しましょう！

Udemy

Udemy
特徴：教材動画買い切り型
レッスン方法:動画教材/Q&Aで質問
習得スキル:教材動画によって異なる
コース概要: ピンポイントで作りたいゲームジャンルの動画を見つけることができるかもしれません。 また頻繁にセールを開催していますのでゲーム開発講座が1500円～で購入することも可能です。
ゲームジャンル別おすすめ講座はこちら Udemy 詳細

テックアカデミー

テックアカデミー
特徴：現役エンジニア伴走型レッスン
レッスン方法:チャット（週2回）/テキストチャット/課題レビュー
習得スキル:オリジナルゲームアプリの作成
コース概要: 途中で挫折しないためにメンター（相談者）が週2回、マンツーマンであなたの質問・相談に答えてくれるので、ゲーム開発・プログラミング未経験の人でも安心してゲーム開発に取り組めます。転職したい人向けのサポートもあります。無料体験もあります。
テックアカデミー 詳細

テックスタジアム

テックスタジアム
特徴：ゲーム開発の為のオンラインスクール
レッスン方法:動画教材,Slackでの質問（24時間）
習得スキル: Unity,UnrealEngine、CG、企画、サーバー、AI、XR等
コース概要: ゲーム業界で必須な技術の習得が可能です。Slack上で待機している先生への24時間、何度でも質問できます。またIT・ゲーム業界への就職サポートが無料で受けられます。
ゲーム開発に特化したオンラインスクールですので、Unityはもとより、他のゲームエンジンやゲーム業界に興味がある方にはオススメです。
テックスタジアム 詳細

デジハリONLINE

デジハリONLINE
特徴：動画カリキュラム型レッスン
レッスン方法:動画講座/Slack/予約制Zoom相談
習得スキル:Unity基礎,実践/ハイクオリティ3Dゲーム
コース概要: デジタルハリウッド大学・大学院などを通じたデジタルコンテンツ業界とのつながりを活かし、最新かつ実践的なカリキュラムを提供しています。【基礎編】【実践編】とカリキュラムが分かれていて、それぞれに課題があり、ご自身の理解度を把握できます。最終的にはハイクオリティの3Dゲームが作れるようになります。
デジハリONLINE 詳細

関連記事

最後までご覧頂いてありがとうございました。

セール中!
ノンフィールドRPG

基礎からリリースまで！

オリジナルRPGを作ってストアに公開しよう！