HPとHPバーを実装する

こんにちは、simatten(しまってん)と申します。

この記事では、HPとHPバーの実装方法について解説します!

今回の記事ではワールドの基本的なセットアップの手間を省くため、Clusterのサンプルプロジェクト(https://github.com/ClusterVR/ClusterCreatorKitSample)内のAssets/ClusterVR/Scenes内にあるMinimalSampleシーンを活用して作成しています。

1.HPの数値の設定方法

まずはプレイヤーのHPの数値を設定してみましょう。

Playerオブジェクトを作り、HPの初期値に10を入力

プレイヤー設定用に空のオブジェクトを用意したら、On Join Player Triggerコンポーネントを付与しましょう。
On Join Player Triggerコンポーネントはプレイヤーがワールドに入ったときに起動するトリガーです。

次にTriggersのSizeの項目に1を入力します。これでTriggerが起動した場合の処理を一つ書き込めるようになります。

次にHPの値をプレイヤーに設定します。
整数の数値を設定したいので、Parameter TypeをIntegerにします。

これでHPの設定が完了しました。

2.HPバーの実装方法

では次に、HPを量として可視化するためのHPバーを作っていきましょう。

HUD表示のためにPlayerLocalUIを作成

HPバーのような視界に追従する表示物(HUD)を作るにはPlayerLocalUIを作る必要があるので、左上の+ボタンからUI > PlayerLocalUI – clusterを選択し、作成します。

これでHUD作成のための準備が整いました。

編集しやすいようにCanvasにフォーカス、2Dモードに切り替え

今回はHUDの内容を編集しやすいように、オブジェクトをクリックしてからScene上でFキーを押し、そのオブジェクトにフォーカスしています。
また、「2D」ボタンをクリックして平面上での編集モードに切り替えています。

では、次にHPバーにするためのオブジェクトを作っていきます。

SafeAreaにHPバー用のImageを作成

Canvas内にできたSafeAreaを右クリックし、「UI」の項目からImageを選んで作成しましょう。

作成できたら、長さや場所をHPバーらしくしておきます。

次に、HPバーを動くようにしてみましょう。

ImageのSource Imageを設定し、ゲージの満ち欠けを可能にする

Projectウィンドウで右クリックし、Create > Sprites > Squareの順に選択します。

出てきたSquareをHPバーの中にあるImageのSourceImageの欄にドラッグアンドドロップすると、ゲージのように画像を満ち欠けさせることができるようになります。

ちなみに任意の画像をドラッグアンドドロップすると、その画像の形のゲージを作ることができます。

ただし、今のままではプレイヤーに設定したHPの数値をHPバーに伝えるような仕組みを作っていない状態なので、プレイヤーのHPとバーの幅は比例しません。

というわけでプレイヤーのHPの量をHPバーに伝えることで、バーの幅をプレイヤーのHPに応じて変化するようにしてみましょう。

HPバーにSet Fill Amount Gimmickを付与し、プレイヤーのHPに応じて量が変わるようにする

HPバーにSet Fill Amount Gimmickコンポーネントを付与しましょう。
Set Fill Amount Gimmickは、設定した値に応じてImage(画像)の満ち欠けの度合いを変更することができるギミックです。
ゲージを作るのにうってつけです。(他にも活用法はあるかもしれません!)

今回はプレイヤーに設定したHPの残量に応じて変化させたいので、TargetはLocalPlayerを選択することでプレイヤーに設定された値を引き出すようにしています。
Keyには先程プレイヤーに設定したHP用の数値の名前であるhpを入力しています。

これでHPバーにプレイヤーのhpを伝えることが出来ました。

Max Value(画像が欠けなく表示される数値)とMin Value(画像が欠けきって表示される数値)も設定できます。
ここではHPの上限を10にしたいと思ったので、Max Valueに10を入力しています。

これで、Player内部のhpの値を変えてシーンを実行(画面上部の▶ボタンで可能)した時にゲージの残量が変化するようになりました!

プレイヤーのHPを変えて再生するとゲージの量も変わる!

ここまででプレイヤーのHPとHPバーを実装することができました。やったぁ!!

ただし現状ではHPに影響を与えるようなオブジェクトがワールドに存在していないせいでワールドのプレイ中にHPを変化させることができず、折角のHPの実装を活かせていません。
というわけで、次はゲーム内でHPに変化を与える仕掛けを作っていきましょう。

3.触れるとHPが減るトゲの実装方法

Sceneの2Dボタンをクリックして解除し、Playerを選択後にScene内にカーソルを持ってきてFキーでフォーカスしてワールドを編集しやすいようにしましょう。

またワールド本体を編集したくなったので、2Dモードを解除し原点座標に置いてあるPlayerにフォーカスしてシーンを編集しやすくしている

今回はHPに変化を与える仕掛けとして、Sceneに触るとHPが減少するトゲを作ってみます。

トゲっぽい3Dモデルがあればそれを使うとよいのですが、今回はCubeを作って回転させて地面に埋めることでトゲっぽく見せてみます。

これはトゲだ だれがなんといおうとトゲなんだ

トゲを置いたら、触れた相手にHPにダメージを与えるような機能を設定してみましょう。

トゲに触ったものはDamageという名のSignalを受け取る!

トゲにOn Collide Item Triggerコンポーネントを付与します。
On Collide Item Triggerは、そのアイテムに他のアイテムやプレイヤーがぶつかった時に起動されるトリガーです。

付与できたら、On Collide Item TriggerのSizeに1を入れましょう。処理を一つ書けるようになります。
今回はトゲにぶつかってきた相手に対して処理を行いたいので、Targetの項目はCollidedItemOrPlayerを選択します。
ぶつかってきた相手にはダメージを与えたいので、KeyにはDamageと名付けておきます。
Parameter TypeはSignalのままで大丈夫です。

トゲは刺さってほしいので、トゲのBox ColliderのIs Triggerにはチェックを入れておきます。

(記事執筆時点ではこれにチェックをいれていないと、Unity上ではプレイヤーに対しての衝突検知をしてくれない場合があるから だなんて言えない……(ちなみにcluster上にアップロードされた状態だとIs Triggerのチェックが外れた状態でもしっかりと検知してくれます))

Is Triggerにチェックを入れると、他のオブジェクトとの衝突は検知しつつ、ぶつからずにすり抜けるような性質を持つようになります。

On Collide Item TriggerのCollisionTypeもTriggerにしておきましょう。

これで、プレイヤーがトゲと衝突した時にDamageというSignalを受け取るようになりました。

しかしプレイヤーはDamageというSignalを受け取った時にどういう処理を行うかをまだ決めていないので、このままではトゲにぶつかってもHPは減りません。

というわけで、プレイヤーがそのDamageというSignalを受け取った時の処理を決めていきましょう。

プレイヤーがDamageを受け取ったらHPを減らすように

PlayerオブジェクトにPlayer Logicコンポーネントを付与しましょう。
Player Logicはプレイヤーの数値について様々な計算や条件分岐等ができる、「ロジック」に分類されるコンポーネントです。

付与できたら、KeyにDamageと入力しましょう。これでDamageというSignalをプレイヤーが受け取った時に、このロジックの中の処理が実行されるようになります。

次に+ボタンを押して、ロジックの中身を書けるようにしましょう。

今回はプレイヤーのHPを変動させたいので、最初に出てきた入力欄にhpと入力します。
その右のドロップダウンリストは値の型を指定する部分です。ここまでhpを入力する時にInteger型にしていたので、ここでもIntegerを選びましょう。

その一つ下にあるドロップダウンリストは、計算の内容を決めるリストです。ここでは=Subtractを選んでいます。
=Subtractを選ぶとその下に項目が2つ存在する状態になります。1つ目の項目から2つ目の項目を引き算した結果が、一番上に入力したメッセージとして返ってくるようになっています。
このページ=Subtractを参照)

こんなイメージ

今回トゲにぶつかった時に減らすHPは1にしようと思うので、③の値は1を設定しました。

では、実際に動かしてみましょう。

トゲにぶつかると、HPが減少するようになっていますね。

HPが減少するようになった!

これでトゲにぶつかった時にプレイヤーのHPが減少するようになりました!
しかし現状ではHPが0になった時の挙動を決めていないので、HPが0になっても何かが起こるというわけではありません。
というわけで最後に、HPが0になった時の挙動も決めてみましょう。

4.HPが0になった時の挙動の実装

今回は位置とHPが開始時と同じ状態にリセットされるようにしてみます。

まず、プレイヤーの位置を開始時と同じ地点にワープさせるギミックを用意します。

プレイヤーがResetを受け取った時に初期位置にワープするように

PlayerにRespawn Player Gimmickコンポーネントを付与しましょう。
Respawn Player Gimmickは、その名の通りプレイヤーを初期位置に再出現させるギミックです。

リセットする時に実行したいので、KeyにはResetと入力しておきます。

次に、プレイヤーのHPを全回復するような処理を追加します。

プレイヤーがResetを受け取った時にHPが初期値になるように

Playerの中にPlayer Logicを追加し、Keyには先ほどと同じようにResetと入力します。
そして+ボタンを押し、hpに初期値の10を代入する処理をさせるようにします。

これで、ResetというSignalをプレイヤーが受け取るだけでプレイヤーの位置とHPがリセットされるようになりました!

というわけで、次はResetというSignalを発信するための処理を書いていきます。
hpが0以下になった時、ResetというSignalをプレイヤーに伝えるようにしてみます。

ダメージを受けた結果、HPが0以下ならリセット!!

Player内の、KeyにDamageが入力されているPlayer Logic内の+ボタンを押して処理を追加しましょう。

そうしたら追加した部分の一番上の入力欄をResetと書き換え、Signal型にしておきます。

今回は条件分岐のためにLogicを活用しています。

ここで設定している=LessThanOrEqualは、1つ目の値が2つ目の値以下であれば指定したSignalを発信する、という処理に利用されています。
このページ=LessThanOrEqualを参照)

これで、「ダメージを受けた時にHPが0以下になったプレイヤーは位置とHPがリセットされる」という処理が完成しました!

hpがなくなった時にリセットできた!!

ここまででHPとHPバーの作成方法、HPを減少させるためのアイテムの作成方法、HPが0になった時の処理を実装する方法をご紹介しました。

つまり、HPを用いた基本的なゲームを作れるようになっているということです! すばらしい!!!

プレイヤーにHPを実装したい時は、是非この記事で学んだことを活用してみて下さい!