こんにちは、simatten（しまってん）と申します。
この記事では、HPとHPバーの実装方法について解説します！
今回の記事ではワールドの基本的なセットアップの手間を省くため、Clusterのサンプルプロジェクト(https://github.com/ClusterVR/ClusterCreatorKitSample)内のAssets/ClusterVR/Scenes内にあるMinimalSampleシーンを活用して作成しています。
1.HPの数値の設定方法
まずはプレイヤーのHPの数値を設定してみましょう。
プレイヤー設定用に空のオブジェクトを用意したら、On Join Player Triggerコンポーネントを付与しましょう。
On Join Player Triggerコンポーネントはプレイヤーがワールドに入ったときに起動するトリガーです。
次にTriggersのSizeの項目に1を入力します。これでTriggerが起動した場合の処理を一つ書き込めるようになります。
次にHPの値をプレイヤーに設定します。
整数の数値を設定したいので、Parameter TypeをIntegerにします。
これでHPの設定が完了しました。
2.HPバーの実装方法
では次に、HPを量として可視化するためのHPバーを作っていきましょう。
HPバーのような視界に追従する表示物(HUD)を作るにはPlayerLocalUIを作る必要があるので、左上の+ボタンからUI > PlayerLocalUI – clusterを選択し、作成します。
これでHUD作成のための準備が整いました。
今回はHUDの内容を編集しやすいように、オブジェクトをクリックしてからScene上でFキーを押し、そのオブジェクトにフォーカスしています。
また、「2D」ボタンをクリックして平面上での編集モードに切り替えています。
では、次にHPバーにするためのオブジェクトを作っていきます。
Canvas内にできたSafeAreaを右クリックし、「UI」の項目からImageを選んで作成しましょう。
作成できたら、長さや場所をHPバーらしくしておきます。
次に、HPバーを動くようにしてみましょう。
Projectウィンドウで右クリックし、Create > Sprites > Squareの順に選択します。
出てきたSquareをHPバーの中にあるImageのSourceImageの欄にドラッグアンドドロップすると、ゲージのように画像を満ち欠けさせることができるようになります。
ちなみに任意の画像をドラッグアンドドロップすると、その画像の形のゲージを作ることができます。
ただし、今のままではプレイヤーに設定したHPの数値をHPバーに伝えるような仕組みを作っていない状態なので、プレイヤーのHPとバーの幅は比例しません。
というわけでプレイヤーのHPの量をHPバーに伝えることで、バーの幅をプレイヤーの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に変化を与える仕掛けを作っていきましょう。
3.触れるとHPが減るトゲの実装方法
Sceneの2Dボタンをクリックして解除し、Playerを選択後にScene内にカーソルを持ってきてFキーでフォーカスしてワールドを編集しやすいようにしましょう。
今回はHPに変化を与える仕掛けとして、Sceneに触るとHPが減少するトゲを作ってみます。
トゲっぽい3Dモデルがあればそれを使うとよいのですが、今回はCubeを作って回転させて地面に埋めることでトゲっぽく見せてみます。
トゲを置いたら、触れた相手にHPにダメージを与えるような機能を設定してみましょう。
トゲに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にはチェックを入れておきます。
Is Triggerにチェックを入れると、他のオブジェクトとの衝突は検知しつつ、ぶつからずにすり抜けるような性質を持つようになります。
On Collide Item TriggerのCollisionTypeもTriggerにしておきましょう。
これで、プレイヤーがトゲと衝突した時にDamageというSignalを受け取るようになりました。
しかしプレイヤーはDamageというSignalを受け取った時にどういう処理を行うかをまだ決めていないので、このままではトゲにぶつかってもHPは減りません。
というわけで、プレイヤーがそのDamageというSignalを受け取った時の処理を決めていきましょう。
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が0になった時の挙動を決めていないので、HPが0になっても何かが起こるというわけではありません。
というわけで最後に、HPが0になった時の挙動も決めてみましょう。
4.HPが0になった時の挙動の実装
今回は位置とHPが開始時と同じ状態にリセットされるようにしてみます。
まず、プレイヤーの位置を開始時と同じ地点にワープさせるギミックを用意します。
PlayerにRespawn Player Gimmickコンポーネントを付与しましょう。
Respawn Player Gimmickは、その名の通りプレイヤーを初期位置に再出現させるギミックです。
リセットする時に実行したいので、KeyにはResetと入力しておきます。
次に、プレイヤーのHPを全回復するような処理を追加します。
Playerの中にPlayer Logicを追加し、Keyには先ほどと同じようにResetと入力します。
そして+ボタンを押し、hpに初期値の10を代入する処理をさせるようにします。
これで、ResetというSignalをプレイヤーが受け取るだけでプレイヤーの位置とHPがリセットされるようになりました！
というわけで、次はResetというSignalを発信するための処理を書いていきます。hpが0以下になった時、ResetというSignalをプレイヤーに伝えるようにしてみます。
Player内の、KeyにDamageが入力されているPlayer Logic内の+ボタンを押して処理を追加しましょう。
そうしたら追加した部分の一番上の入力欄をResetと書き換え、Signal型にしておきます。
今回は条件分岐のためにLogicを活用しています。
ここで設定している=LessThanOrEqualは、1つ目の値が2つ目の値以下であれば指定したSignalを発信する、という処理に利用されています。
（このページの=LessThanOrEqualを参照）
これで、「ダメージを受けた時にHPが0以下になったプレイヤーは位置とHPがリセットされる」という処理が完成しました！
ここまででHPとHPバーの作成方法、HPを減少させるためのアイテムの作成方法、HPが0になった時の処理を実装する方法をご紹介しました。
つまり、HPを用いた基本的なゲームを作れるようになっているということです！ すばらしい！！！
プレイヤーにHPを実装したい時は、是非この記事で学んだことを活用してみて下さい！
