Unity Fill Amountを使って時計タイマーを作る
ゲームの制限時間を表現するのに画像がどんどん埋まっていくような処理ってよくありますよね。
今回はUnityのImageコンポーネントに備わっているFill Amountというものを使って時計のようなタイマーを作ってみたいと思います。
ちなみに以前つくったタイマーは数字が変化していくというものでした。
こちらの応用になります。
この機能を利用して作ったゲームはこちらです。
では早速やっていきましょう。
Unityで新規2Dプロジェクトを作成します。画面サイズは960*540です。
タイマーとなる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をアタッチしましょう。
続いてClockInnerのInspectorからFillAmountの値を0にします。
これで実行してみると時間とともに徐々に赤く塗られていくのがわかるかと思います。
これで簡単ですが時計っぽいタイマーができました。
FillAmountの機能はこれ以外にもHPバーなどにも応用出来ますので別の機会で紹介できればと考えています。
FillAmountはとても便利な機能ですので是非いろんな場面で使ってみて下さい。
関連記事
おすすめUnityオンライン学習
一人でゲーム開発が不安な方はオンラインスクールで学習すると効率が良いと思います。
以下に当てはまる人は検討してみると良いかもしれません。
「入門書をの次に何をしたらいいの?」
「疑問や問題を一人で解決出来ない。。」
「ゲームを完成させる自信がない。。」
「気軽に質問できる環境が欲しい。。」
自分で学習することに限界を感じたら
オンライン学習しましょう!
Udemy
テックアカデミー
テックスタジアム
ゲーム開発に特化したオンラインスクールですので、Unityはもとより、他のゲームエンジンやゲーム業界に興味がある方にはオススメです。
デジハリONLINE
関連記事
UnityでCSVを活用したメッセージウィンドウの作り方
ゲーム開発では、プレイヤーに重要な情報を伝えるためにメッセージウィンドウを頻繁に使います。 しかし、ゲーム内で表示するメッセージが増えてくると、それらを一つ一つ管理していくのは非常に大変な作業になります。 メッセージの内 […]
Unity2D ドット絵の簡単なアニメーションを作ってみる
Unity2Dで簡単なドット絵のアニメーションを作成します。スプライトを切り替えることでプレイヤーが歩いているように見えるアニメーションを作成してみます。
この方法を応用することでキャラクターに色んな動きや表示を付け加えることができると思います。
ChatGPTの指示通りUnityゲームを作ってみる
最近ではChatGPTを始め様々な大規模言語モデルの対話型AIが公開されていますね。
そこで今回はChatGPTの指示に従ってゲームを作ってみる実験をしてみます。
Unityで9-sliceテクニックを使った効果的なUI作成方法
UI作成時に非常に便利なテクニック9-sliceをやってみます。
とても簡単に使える技です。
Transform.RotateとQuaternion.Eulerでオブジェクト回転
Unity2Dで簡単なゲームオブジェクトの回転を実装してみたいとおもいます。
Transform.RotateとQuaternion.Eulerの二種類の回転方法を実験します。
ルーレットとか、方位をコンパス。またはプレイヤーがやられた時に回転させるなどに使えそうです。
Unity2Dで背景の無限スクロールを実装する
色んなゲームで背景がスクロールする仕組みは使われています。
今回はタイル状の背景を並べて上下左右に無限にスクロールする仕組みを作ってみたいと思います。
最後までご覧頂いてありがとうございました。