こんにちは、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を実装したい時は、是非この記事で学んだことを活用してみて下さい!