UIを使用してHPを表現する方法【知識ゼロから始めるUnity入門⑥】

• ゲーム画面にHPを設置したい。
• HPが減少する仕組みを知りたい。

この記事はこんな方に向けて書いています。

こんにちは fab5 です♪

前回の記事では落下するオブジェクトをランダムに生成する方法について説明しました。

前回の記事はこちら↓

manabiya.fab5.work

そして今回は、キャラクターに岩が当たった時にHPを減少させる方法を説明していきたいと思います。

1つずつしっかり説明しますので、一緒に勉強していきましょう！

HPを表現する方法

HPを表現する手順として、

1. HPゲージを設置する
2. 監督オブジェクトを作成する
3. HPの減少を監督オブジェクトに伝える

以上の3つがあります。

HPゲージを設置する

それではゲーム画面にHPゲージを設置する方法を説明していきます。

HPゲージを設置するには、UIオブジェクトのImageというものを使います。

ヒエラルキー欄で｢Create｣→｢UI｣→｢Image｣と進んでください。

そうするとヒエラルキー欄に｢Canvas｣が追加され、その中に｢Image｣が作成されます。

作成された｢Image｣は｢hp｣という名前に変更します。

次に、｢hp｣オブジェクトにゲージの画像を設定しましょう。

まずは、ゲージ画像をプロジェクト欄に取り込みます。

ヒエラルキー欄の｢hp｣オブジェクトを選択し、インスペクター欄のSource Imageの部分にプロジェクト欄から｢hp_gauge｣をドラッグ＆ドロップしてください。

アンカーポイントを設定する

次に、このHPゲージを画面のサイズが変わっても右上に表示させるようにするため、アンカーポイントというものを設定します。

アンカーポイントのアンカーというのは船のイカリの事で、このイカリを軸にして座標を計算します。

例えば右上の角にアンカーポイントを置いて、そこからX座標・Ｙ座標を設定すると、PCやスマホのどのような画面になったとしても右上の角を軸にした場所に設置されます。

アンカーポイントを設置する方法は、まずヒエラルキー欄の｢hp｣を選択し、インスペクター欄のアンカーポイントをクリックします。

すると、｢Anchor Preset｣の欄が表示されるので｢右上｣を選択してください。

最後にRect Transformのposを｢-120, -120, 0｣、Width・Heightを｢200, 200｣に設定します。

これは使う画像によって違うので各自で調整してください。

HPゲージを減少させる

次に｢HPゲージ｣を減少させる方法について説明します。

これを行うには、まずヒエラルキー欄から｢hp｣を選択し、インスペクター欄のImage  Typeを｢Filled｣、Fill Methodを｢Radial 360｣に設定します。

Fill Originは切り取る場所を決めるものなので｢TOP｣にします。

これで、ダメージを受けるとHPゲージが上から切り取られるようになりました。

監督オブジェクトを作成する

次に監督オブジェクトを作成する方法について説明します。

監督オブジェクトというのは〇〇になったらHPゲージを減少させるといった指示を出すオブジェクトのことで、前回説明した工場オブジェクトと同様に｢空のオブジェクト｣になります。

HPが減少する流れを考える

監督オブジェクトを作る際に、まずは何がどうなったらHPが減少するのか考えてみましょう。

この｢オヤジGET！！｣というゲームでは落ちてくる岩にプレイヤーが当たるとHPが減るという流れですね。

これを細かく分けてみると、

1. 岩がプレイヤーと当たった時、｢Iwacontroller｣から｢監督オブジェクト｣に報告する。
2. 報告を受けた｢監督オブジェクト｣がHPゲージを減らすように指示する。

という流れになりますね。

監督スクリプトを作成する

それでは監督スクリプトを作成していきます。

プロジェクト欄から｢右クリック｣→｢Create｣→｢C♯script｣を選択して、作成したファイル名を｢GameDirector｣に変更してください。

｢GameDirector｣スクリプトに以下のコードを書き込んでいきます。

まず、UIオブジェクト用のスクリプトを書く場合は using UnityEngine.UI を書き足します。

this.hp = GameObject.Find("hp")

とは this.hpという変数に｢hp｣オブジェクトを代入する。

public void DecreaseHp( )以降はHPゲージが減っていく処理を示すもので、後ほど｢IwaController｣に呼ばれるようにするためメソッドとして作成しています。

監督オブジェクトを作成する

それでは、監督オブジェクトを作成するため空のオブジェクトを作っていきましょう。

ヒエラルキー欄のCreateからCreate Emptyを選択します。

そうしたら空のオブジェクトが作成されるので｢GameDirector｣に名前を変更します。

プロジェクト欄の｢GameDirector｣スクリプトをドラッグして｢GameDirector｣オブジェクトにドロップしましょう。

HPの減少を監督オブジェクトに伝える

監督オブジェクトが完成したので、次に｢IwaController｣スクリプトから監督オブジェクトに岩がぶつかった事を伝えるようにします。

｢IwaController｣スクリプトに以下の内容を書き加えていきます。

赤枠で囲った部分が今回付け足していく部分です。

GameObject director = GameObject.Find("GameDirector")

この部分は、Findメソッドを使って｢IwaController｣スクリプト内で｢GameDirector｣オブジェクトを探すという意味です。

director.GetComponent<GameDirector>().DecreaseHp()

この部分は、GetComponentメソッドを使って｢GameDirector｣オブジェクトから｢GameDirector｣スクリプトを取得して、HPゲージが減少する処理をするDecreaseHp()メソッドを呼び出すということです。

ちょっとややこしいんですが、別のオブジェクトにアクセスする場合はこういう手順が必要になります。

簡単に言うと岩がプレイヤーに当たったら監督オブジェクトのHPゲージを減らす処理に移動するという事ですね。

上記の手順を全て完了して、ゲームを実行するとこのような画面になります。

ちゃんと岩が当たった時にゲージが減っているのが分かりますね。

まとめ

今回はUIを使ってHPを表現する方法を説明しました。

岩オブジェクトから監督オブジェクトにデータを飛ばす等、少し分かりずらい部分がありましたが理解して頂けたでしょうか？

それでは次回はHPゲージがゼロになった場合に｢GAME OVER｣のシーンに切り替えるという処理について説明します。

今日も最後までありがとうございました´ω`)ﾉ

ゲームの完成品はこちら

オヤジＧＥＴ！！ | フリーゲーム投稿サイト unityroom

関連書籍

Unityの教科書 Unity2019完全対応版 2D&3Dスマートフォンゲーム入門講座 (Entertainment&IDEA)