[Unity]落ちゲーの体力ゲージの配置と減少処理について

キャラクターの動きやボールに関する部分は大体完成しました。

後は体力ゲージを配置して、キャラクターがボールに接触したら体力が減るようにしていきます。

スポンサーリンク

HPゲージの配置とゲージの減少について

UIオブジェクト「Image」で体力ゲージを作成する

ゲームの状況がすぐに分かるようにUIを配置します。

体力ゲージは画像なのでヒエラルキーウィンドウから「Create」→「UI」→「Image」でImageを表示させます。

デフォルトだと名前が「Image」のままなので、体力ゲージと分かるような名前に変更します。私はシンプルに「hp」にしました。

今作った「hp」を選択して、Image項目のSource Image欄に、予め用意しておいた体力ゲージの画像をドラッグ&ドロップします。

Imageオブジェクトに体力ゲージを設定

アンカーを設定する

画面サイズが変わっても体力ゲージが正しく表示されるようにアンカーを設定します。

アンカーは、画面サイズが変わった際に、どこを基準にしてUI部品(画像など)の座標を計算するのかを示したものです。

体力ゲージの位置は、アンカーを原点とした値で指定されますので、仮にアンカーを中央に設定した場合、画面サイズが小さくなると画面に表示されない事があります。体力ゲージを左端とか右端とかに設置してた場合ですね。

そうならないためにも、アンカーを適切に設定する必要があるんです。スマホはデバイスごとに画面サイズが異なりますからね。

というわけでアンカーを設定します。

体力ゲージですが、とりあえず左上に表示させることにします。画面中心から遠ざけないとプレイに支障が出るので、設置するとしたら左上か右上でしょうね。

ヒエラルキーウィンドウから体力ゲージを選択して、アンカーのアイコンをクリック。

体力ゲージのアンカーの設定

アンカーの選択画面が表示されます。結構色んなパターンがあるんですね。

左上に配置したいので、左上に固定を選択します。

アンカーを選んだらRect Transform項目のPosの値を「50,-50,0」にします。

幅に関しては、それぞれ100にしています。もっと大きく表示したい場合はポジションも含めて値を変更すればOKです。

体力ゲージを減らす

今表示させた体力ゲージを減らす処理についてです。

体力ゲージが減少するときの処理

ヒエラルキーウィンドウから体力ゲージを選択して、Script内のImage Typeを「Filled」にしてFill Methodを「Radial 360」にします。

Radial 360で円形の画像を切り取る処理になります。他にも横方向や縦方向に切り取る設定もここで行うことが出来ます。今回は円形ゲージなのでRadial 360を使うわけです。

Fill Originは「Top」にします。これで画像を上から切り取ってくれます。

Fill Amountのスライダーを動かすことで体力ゲージの減り方を確認できます。ゲームスタート時は体力MAXの状態なので初期値「1」にしておきます。

★併せて読みたい記事

【Udemy】初心者におすすめなUnityのコース7選
前回、Udemyの魅力について紹介しましたが、いざ始めようと思うとどのコースが良いのか分からないと思うので、今回は初心者の方にオススメなUnityのコースを厳選したいと思います。 何しろコースの数が膨大ですからね。選ぶだけで結構な時間...

体力ゲージを更新する方法について

体力ゲージを更新するための処理を作る必要がありますね。

これは、当たり判定を担当していたボールサイドが、キャラクターにボールが当たったタイミングで体力ゲージを減らすように指示を出せば良いです。

体力ゲージを更新するスクリプトを作成する

新しいスクリプトを作ります。スクリプト名は「HPflu」にしています。

体力ゲージが減少するスクリプト

4行目の「using UnityEngine.UI;」は体力ゲージを操作する際に必要になります。

ゲージを更新するためには、実体を扱う必要があるので、GameObject.Findメソッドでシーンの中からゲージオブジェクトを探してhp変数に代入します。

キャラクターとボールが衝突したときに、15行目のメソッドが呼び出されて体力ゲージを減算することでゲージが減少するようになります。

ボールサイドが呼び出せるようにpublicメソッドにします。

空のオブジェクトを作成してアタッチする

スクリプトを作ったら空のオブジェクトを作成してアタッチします。

ヒエラルキーウィンドウで「Create」→「Create Empty」で空のオブジェクトを作成。

名前を「HPflu」に変更したら、さっき作ったスクリプトをドラッグ&ドロップしてアタッチします。

体力が減った事を伝えるための処理について

以前作ったスクリプトに変更を加えていきます。当たり判定を記述していたスクリプトですね。

ボールが衝突したタイミングで体力が減るので、当たり判定の処理に追記します。

キャラクターとボールが衝突したら体力ゲージが減った事を伝えるスクリプト

HPfluオブジェクトが持っているHPdeleteメソッドを呼び出すために、Findメソッドを使ってHPfluオブジェクトを探します。

そして、GetComponentメソッドを使い「HPflu」スクリプトを取得してHPdeleteメソッドを呼び出しています。

他のオブジェクトのコンポーネントにアクセスする場合は、FindとGetComponentをセットで使うことになりますね。

ゲームを実行して、キャラクターにボールが衝突した際にちゃんと体力が減っていればバッチリ。

次は、スマホで動かせる状態に仕上げていきます。