クリックゲーム開発

#8.HPゲージのスクリプトを実装する方法

前回Procedural UI Image を使って、角丸のHPゲージを作りました。
今回は、ゲージのHPを増減できるようなスクリプトを1から実装します。
角丸のHPゲージ

まずはスクリプトの用意

まず、Monobehavior 継承のスクリプトを準備します。
Project ウインドウで右クリック→Script とすると、そのようなスクリプトの雛形ができます。

スクリプトファイル名とスクリプトのクラス名は同じにしておきましょう。
UI名と同じにしておくといいです。

スクリプトの名前

名前について、以下の候補で悩んだんですが
1. UI_HPGauge (アンダースコアを付ける)
2. UIHPGaude(Pが大文字)
3. UIHpGaude (pが小文字)

3にしました。

アンダースコアをやめた理由は、色々なものに 「UI_」に続き大文字小文字が混ざった名前をつけていてしっくりこなかったから。
プログラマー的に言うと、スネークケースとパスカルケースを混ぜるのがよくない
よってパスカルケースにしました。
(以前、1の名前で解説していたので、参考にされた方は3でお願いします)

次に Hp と p を小文字にした理由についてです。
これは、Microsoft の名前付けのガイドライン・大文字の使用規則 にならいました。
Xml などと同様で、一般的な略語の場合は、先頭の文字だけを大文字にします。

スクリプト名とクラス名が一致していないと
アタッチすることができません。
命名規則を決めておくことで間違いを減らしましょう。

スクリプトの初期化でバーを取得

スクリプトでHPのゲージを操作するために、コードを実装します。

おさらいすると、UI HPゲージは
トップのオブジェクト
 └その子にのバーの背景イメージ
  └その子にのバーの前面イメージ
という構成になっています。

緑のバーの Fill Amount を 0~1 に設定できるようにすればいいので、
SetRate というメソッドを作っていきます。

そのためには、バーを private フィールドとして保持しておくと便利です。
private UnityEngine.UI.ProceduralImage fgImage

UIオブジェクトの保持は初期化で一度だけやっておくと処理が稼げます。

すなわち、以下のように、Awake という名前の特殊な初期化メソッドを実装します。
UI HPゲージのスクリプト Awakeメソッド

盛りだくさんですが、FgImage を気合で探すスクリプトの解説。
1. まずスクリプトがアタッチされているオブジェクト UIHpGauge から子を含めて ProceduralImage を探します。
 → 赤の BgImage がひっかかります
2. BgImage オブジェクトの子から探すために、transform の Find で名前引きします。
 → 緑の FgImage がひっかかります
3. FgImage オブジェクトの ProceduralImage を Component から取り出して変数に保持します

Start と Awake メソッドの違いについて

今回、初期化で Start ではなく Awake を使いました。

Start と Update は空です。
Start ではなく Awake

自身の初期化には、Start ではなく Awake を使います
理由は、Awake の方が Start より先に実行されるからです。

こうすることで、この UI を使う他のモノの Start から使えるように・・・
例えば Enemy の Start の時点から UI を使えるようになります。

HPゲージを操作するメソッドの用意

さて、FgImage を保持したことにより、HPゲージを操作するメソッドを実装できます。

UI Hpgauge の public メソッド

FillAmount を0~1に設定するためのメソッドです。
オブジェクトを破棄するメソッドもついでに実装しておきましょう。

スクリプトのアタッチ

最後に、実装したスクリプト UIHpGauge.cs を UIHpGauge オブジェクトにアタッチして関連付けを行えば完成です。

UIスクリプトのアタッチ

終わりに

今回は、UIのスクリプトを1から作り
・初期化で子オブジェクトを取得
・アクセス用メソッドの準備
・オブジェクトにアタッチする方法
について解説しました。

次回は、Enemy がダメージを受けるのに連動して、この HPゲージを操作する方法について解説します。
つづく。