Unity:Sliderを使ってボスキャラのHPバーを表現するC#スクリプト

Unity

ボスキャラが登場したときによく出てくるHPバーはUnityのSliderを使うと簡単に表現できます。
この記事ではUnityのUIオブジェクトであるSliderを使って、HPバーを表示する部分を解説します。

今回のシーン作成には、Unity Essentialsの提供するStandard Assetsを利用しています。

一応イメージとしてこんなものを作り上げます。

上記動画でもお分かりのようにシーンは以下のように単純化しました。

シーン Terrainで作った適当な地形(Standard Assetsを利用)
プレイヤー Third Person(Standard Assetsを利用)
ボスキャラ Cube(Unity標準のオブジェクト、要するに手抜き)

手順の概要

作成手順の概要はこんな感じです。

1.create > 3DObject > Terrainで舞台となるシーンを適当に作成。(本記事では取り扱わない
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… を選択します。

Unity:シーンを保存

名前を「scene1」として保存します。

scene1

ではプレイヤーを配置していきましょう。
プレイヤーキャラとしてStandard Assetsに入っているThirdPersonを使います。

Assets > Standard Assets > Characters > ThirdPersonCharacter > Prefabs とたどり、ThirdPersonControllerをシーンにドラッグ&ドロップします。

Unity:ThirdPersonCharacter

そのままだと名前がThirdPersonControllerと分かりにくいので、オブジェクト名をPlayerに変更します。

Unity:Sliderを使ってボスキャラのHPバーを表現する

このまま実行してもキーボード操作できるのですが、カメラがプレイヤーを追いかけてくれないので、StandardAssetsに入っている便利なカメラを使いましょう。

Assets > Standard Assets > Cameras > Prefabs に入っているMultipurposeCameraRigをシーンにドラッグ&ドロップします。このカメラはシーンのどこに配置しても大丈夫です。(キャラに追随するカメラなので)

Unity:Sliderを使ってボスキャラのHPバーを表現する

もしシーンに最初から存在しているMainCameraがあれば削除しておきます。(シーン上にカメラが2つ存在すると表示がうまくいきません)

Unity:Sliderを使ってボスキャラのHPバーを表現する

先ほど配置したMultipurposeCameraRigを選択して、InspectorウインドウのTarget部分を表示しておき、HierarcyウインドウのPlayerをTargetにドラッグ&ドロップします。

Unity:Sliderを使ってボスキャラのHPバーを表現する

Target部分の表示が、こんな風に変わればOKです。
Unity:Sliderを使ってボスキャラのHPバーを表現する

1度実行してプレイヤーを動かすとカメラも一緒に追随するか確認してください。(プレイヤーは、キーボードの十字矢印キーで操作できます。スペースでジャンプします)

ボスキャラ(Cube)を配置

プレイヤーとの当たり判定用ボスキャラとして、Cubeを配置します。
Create > 3D Object > Cubeを選択します。

Unity:Sliderを使ってボスキャラのHPバーを表現する

Playerの前方少し上あたりに配置します。

Unity:Sliderを使ってボスキャラのHPバーを表現する

Cubeに重力をつけると自然に動かせますので、HierarchyウインドウでCubeを選択し、InspectorウインドウのAdd Componentボタンをクリック Phisics > Rigidbodyを追加します。これでCubeが上から落ちてきます。

Unity:Sliderを使ってボスキャラのHPバーを表現する

白はあまり好きではない色なので、Cubeをピンクにしてみました。

Unity:Sliderを使ってボスキャラのHPバーを表現する

ピンクにしてみたい場合(別にいいよ、という方は読み飛ばしてください)
Projectウインドウの何もないところで右クリック(画像ではルートフォルダのAssets上で右クリックしています)して、Create > Materialsを選択してマテリアルを作成。

Unity:マテリアル作成

名前を分かりやすくPinkに変更しておきます。
Unity:マテリアル作成

作成したマテリアルPinkの項目Albedo色選択部分をクリックするとColorウインドウが表示されるので、適当な色を選択して決定する。
Unity:マテリアル作成

作成したマテリアルをシーン上のCube、あるいはHierarchyウインドウのCubeにドラッグ&ドロップするとCubeの色が変更される。(画像はシーン上のCubeにドラッグ&ドロップしています)
Unity:マテリアル作成

こんな感じでCubeの色が変わる。
Unity:マテリアル作成

一度実行確認しましょう!(こうして作ったらすぐに動かして確認するのが学ぶ上で一番いいと私は思います。どこで間違えたか理解し易いので

実行するとCubeが落ちてきます。
プレイヤーがCubeに触れるとCube(ボスキャラのつもり)が動けばOKです。

HPバーをシーンに配置(Sliderを使用)

HPバーの作成に取り掛かります。
がしかし...HPバーなどというものはUnityのオブジェクトには無いため、先人の知恵をかりてSliderを使ったHPバーの作成を実践してみましょう。

実はこの記事内にSliderを使ったHPバーの作成を入れようと思っていたのですが、長くなってしまったので別記事として書きました。以下を参照して作ってみてください。
Unity:スライダーをHPバーっぽく表示する
Unityのスライダー(UI>Slider)の見た目を変えて、敵キャラに表示されるようなHPバーにしてみる記事です。

HPスライダーのスクリプトを作成(C#Script)

ボスのHPが減る」という処理をスライダーの値が最大値から最小値に減少するという処理と見た目に置き換えて実現します。これにはC#スクリプトが必要になります。

Assetsのルートフォルダの何もないところで右クリックして

Create > C# Script を選択します。

Unity:Sliderを使ってボスキャラのHPバーを表現する

名前は「HPbar」としておきます。

Unity:Sliderを使ってボスキャラのHPバーを表現する

早速プログラムを記述、と言いたいところですが、スライダーは基本的に0.0~1.0と実数値をとるため、1.0が最大値となります。これはボスのHPとして利用する場合、なかなか不便です。
スクリプト作成前にHierarchyウインドウのSliderをクリックして設定を変更しておきます。

まずはSliderをクリックして選択。
Unity:Sliderを使ってボスキャラのHPバーを表現するC#スクリプト

実はSliderには値を整数値として扱うためのWhole Numbersという項目があるのでチェックを入れます。今回ボスのHPを最小0~最大100と仮定したので、Min Value, Max Valueの項目はそれぞれ0、100と変更しておきます。

Slider設定例
Unity:Sliderを使ってボスキャラのHPバーを表現するC#スクリプト

では先ほど作成したHPbarスクリプトをダブルクリックしてVisual Studioを開きます。

C#スクリプト入力の注意点

スクリプトファイルHPbarの初期状態は、以下のようになっていると思います。

HPbar.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class HPbar : MonoBehaviour {

	// Use this for initialization
	void Start () {
		
	}
	
	// Update is called once per frame
	void Update () {
		
	}
}

Sliderを使うために

using UnityEngine.UI; // Sliderを扱うために必要

の記述が先頭に必要なるので、追加してください。

今回デフォルトで生成されるUpdateメソッドは利用しません。消去しても大丈夫です。
また、当たり判定に使う OnCollisionEnterメソッドを追加しています。
以下スクリプトを参考に必要部分だけ入力するようにしてください。

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ウインドウ上ではこう見えるようになります。(まだアタッチしていないのでアタッチした後に見て下さい
Unity:Sliderを使ってボスキャラのHPバーを表現するC#スクリプト

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部分にドラッグ&ドロップします。

Unity:Sliderを使ってボスキャラのHPバーを表現する

こんな感じになります。

Unity:Sliderを使ってボスキャラのHPバーを表現する

以上で完成です。実行確認してみてください。

プレイヤーがボス(Cube)に触れるとHPバーが減って、HPがなくなるとボスもHPバーも消えれば成功です。

以上で完成となります。

この方法がベストというわけではないと思います。もっと分かりやすい方法やスクリプトを発見した方はぜひアップしてみてください。(逆に教えて下さい!!)

以上、Sliderを使ってボスキャラのHPバーを表現するC#スクリプトでした。長々とおつきあいありがとうございました。

コメント

タイトルとURLをコピーしました