ボスキャラが登場したときによく出てくるHPバーはUnityのSliderを使うと簡単に表現できます。
この記事ではUnityのUIオブジェクトであるSliderを使って、HPバーを表示する部分を解説します。
今回のシーン作成には、Unity Essentialsの提供するStandard Assetsを利用しています。
一応イメージとしてこんなものを作り上げます。
上記動画でもお分かりのようにシーンは以下のように単純化しました。
シーン | Terrainで作った適当な地形(Standard Assetsを利用) |
プレイヤー | Third Person(Standard Assetsを利用) |
ボスキャラ | Cube(Unity標準のオブジェクト、要するに手抜き) |
手順の概要
作成手順の概要はこんな感じです。
2.作ったシーンにプレイヤー(ThirdPerson)を配置
3.ボスキャラ(Cube)を配置
4.HPバーをシーンに配置(Sliderを使用)
5.HPスライダーのプログラムを作成(C#Script)
6.HPスライダーのプログラムをボスキャラにアタッチ
項目1のシーン作成は正直なところcreate > 3DObject > Planeで単純な白いフィールドを作っても良かったのですが、こうしたサンプルを作るとき気分が上昇しないので、あえて緑の木々が生えたシーンをTerrainとStandard Assetsとを使って作りました。ですから、取り合えずHPバーを試したい方はシーンの土台はPlaneで十分です。
あと、関係ないですが、Standard Assetsは非常に使い勝手のあるアセットです。無料なのでぜひ利用しましょう!
では、項目1のシーンが出来ていると仮定して項目2のプレイヤー配置以降を説明していきます。
作ったシーンにプレイヤー(ThirdPerson)を配置
プレイヤーを配置する前に現在のシーンを保存しておきます。Unityは、シーン単位で画面を作成できるのですがついつい保存を忘れてしまいがちです。最初にシーン保存しておきましょう。
File > Save Scene As… を選択します。
名前を「scene1」として保存します。
ではプレイヤーを配置していきましょう。
プレイヤーキャラとしてStandard Assetsに入っているThirdPersonを使います。
Assets > Standard Assets > Characters > ThirdPersonCharacter > Prefabs とたどり、ThirdPersonControllerをシーンにドラッグ&ドロップします。
そのままだと名前がThirdPersonControllerと分かりにくいので、オブジェクト名をPlayerに変更します。
このまま実行してもキーボード操作できるのですが、カメラがプレイヤーを追いかけてくれないので、StandardAssetsに入っている便利なカメラを使いましょう。
Assets > Standard Assets > Cameras > Prefabs に入っているMultipurposeCameraRigをシーンにドラッグ&ドロップします。このカメラはシーンのどこに配置しても大丈夫です。(キャラに追随するカメラなので)
もしシーンに最初から存在しているMainCameraがあれば削除しておきます。(シーン上にカメラが2つ存在すると表示がうまくいきません)
先ほど配置したMultipurposeCameraRigを選択して、InspectorウインドウのTarget部分を表示しておき、HierarcyウインドウのPlayerをTargetにドラッグ&ドロップします。
Target部分の表示が、こんな風に変わればOKです。
1度実行してプレイヤーを動かすとカメラも一緒に追随するか確認してください。(プレイヤーは、キーボードの十字矢印キーで操作できます。スペースでジャンプします)
ボスキャラ(Cube)を配置
プレイヤーとの当たり判定用ボスキャラとして、Cubeを配置します。
Create > 3D Object > Cubeを選択します。
Playerの前方少し上あたりに配置します。
Cubeに重力をつけると自然に動かせますので、HierarchyウインドウでCubeを選択し、InspectorウインドウのAdd Componentボタンをクリック Phisics > Rigidbodyを追加します。これでCubeが上から落ちてきます。
白はあまり好きではない色なので、Cubeをピンクにしてみました。
ピンクにしてみたい場合(別にいいよ、という方は読み飛ばしてください)
Projectウインドウの何もないところで右クリック(画像ではルートフォルダのAssets上で右クリックしています)して、Create > Materialsを選択してマテリアルを作成。
名前を分かりやすくPinkに変更しておきます。
作成したマテリアルPinkの項目Albedoの色選択部分をクリックするとColorウインドウが表示されるので、適当な色を選択して決定する。
作成したマテリアルをシーン上のCube、あるいはHierarchyウインドウのCubeにドラッグ&ドロップするとCubeの色が変更される。(画像はシーン上のCubeにドラッグ&ドロップしています)
こんな感じでCubeの色が変わる。
一度実行確認しましょう!(こうして作ったらすぐに動かして確認するのが学ぶ上で一番いいと私は思います。どこで間違えたか理解し易いので)
実行するとCubeが落ちてきます。
プレイヤーがCubeに触れるとCube(ボスキャラのつもり)が動けばOKです。
HPバーをシーンに配置(Sliderを使用)
HPバーの作成に取り掛かります。
がしかし...HPバーなどというものはUnityのオブジェクトには無いため、先人の知恵をかりてSliderを使ったHPバーの作成を実践してみましょう。
HPスライダーのスクリプトを作成(C#Script)
「ボスのHPが減る」という処理をスライダーの値が最大値から最小値に減少するという処理と見た目に置き換えて実現します。これにはC#スクリプトが必要になります。
Assetsのルートフォルダの何もないところで右クリックして
Create > C# Script を選択します。
名前は「HPbar」としておきます。
早速プログラムを記述、と言いたいところですが、スライダーは基本的に0.0~1.0と実数値をとるため、1.0が最大値となります。これはボスのHPとして利用する場合、なかなか不便です。
スクリプト作成前にHierarchyウインドウのSliderをクリックして設定を変更しておきます。
まずはSliderをクリックして選択。
実はSliderには値を整数値として扱うためのWhole Numbersという項目があるのでチェックを入れます。今回ボスのHPを最小0~最大100と仮定したので、Min Value, Max Valueの項目はそれぞれ0、100と変更しておきます。
Slider設定例
では先ほど作成したHPbarスクリプトをダブルクリックしてVisual Studioを開きます。
C#スクリプト入力の注意点
HPbar.cs
スクリプト解説
今回のサンプルでは変数が3つ宣言されています。
private const int maxHp = 100; // 敵キャラのHP最大値を100とする
private int currentHp; // 現在のHP
public Slider slider; // シーンに配置したSlider格納用
ボスのHPの最大値をmaxHPとして100を代入します。HPは減っていくため、現在のHPをcurrentHPに保存することにします。
public Slider slider;の部分ですが、先ほどシーンに配置したSliderをC#
スクリプトから参照するために必要な変数となります。
このPublic宣言された変数sliderはHPbarをCubeにアタッチ(ドラッグ&ドロップで追加)した場合、CubeのInspectorウインドウ上ではこう見えるようになります。(まだアタッチしていないのでアタッチした後に見て下さい)
StartメソッドではHPバーの初期状態を設定します。
ボスの現在HP(currentHp)に最大値を設定します。このままではスライダーの表示は変化しませんので、(slider.value)に反映させます。スライダーのvalueプロパティを変えることでスライダーの表示を変化させることが出来ます。
void Start () { currentHp = (int)slider.maxValue; // HPの初期状態は最大 slider.value = currentHp; // Sliderの初期表示(HP満タン) }
プレイヤーとボス(Cube)との当たり判定は、OnCollisionEnterメソッドを使います。
// 当たり判定 private void OnCollisionEnter(Collision col) { // ぶつかったときの処理 : }
実際には、OnCollisionEnterの引数Collision colを用いてオブジェクト名がPlayerのときのみ(プレイヤーとぶつかった時のみ)ボスのHPを10減らしています。
if(col.gameObject.name == "Player") // プレイヤーとぶつかったとき { currentHp -= 10; // HPを減らす :
currentHpはあくまでボスのHPを表す変数として使っているので、このままではHPスライダーに反映されません。
Startメソッド同様に、スライダーのvalueプロパティを変更してHPバーの表示を変化させます。
slider.value = currentHp; // Sliderに現在HPを適用
今回の処理では、スライダーの
表示が0になったら、ボスもスライダーも消去しています。
// Sliderが最小値になったら(例:ボスキャラを倒したら) if (slider.value <= 0) { Destroy(gameObject); // ボスを消去 Destroy(GameObject.Find("Slider")); // Sliderも消去 }
スクリプトをボスキャラにアタッチして完成
C#スクリプトが作成できてもそのままではプログラムは動きません。
プログラムをボスキャラ(今回はCube)にアタッチします。
Hierarchyウインドウでボス(Cube)を選択しておきます。
CanvasのSliderをInspectorウインドウのSlider部分にドラッグ&ドロップします。
こんな感じになります。
以上で完成です。実行確認してみてください。
プレイヤーがボス(Cube)に触れるとHPバーが減って、HPがなくなるとボスもHPバーも消えれば成功です。
以上で完成となります。
この方法がベストというわけではないと思います。もっと分かりやすい方法やスクリプトを発見した方はぜひアップしてみてください。(逆に教えて下さい!!)
以上、Sliderを使ってボスキャラのHPバーを表現するC#スクリプトでした。長々とおつきあいありがとうございました。
コメント