【UnityC#講座】SliderでHPバーを作る


Unity2019.1.0f2
Windows10

SliderHPBar/トップ

今までにHPバーの記事を2本書きました。

【UnityC#講座】HPゲージをfill Amountで作る

【UnityC#講座】RawImageでHPバーを作る

今回はUnityUIのSliderを使ったHPバーの作り方を紹介します。
画像を別に用意しなくて良いので今までで一番楽な方法だと思います。
それなら一番先に紹介しろって話しですね(笑)

■画面上にHPバーを設置する

まずはSliderを出しましょう。

Hierarchy > Create > UI > Slider

SliderHPBar/初期

Sliderの子オブジェクトにHandle Slide Areaがありますが、これはSliderのつまみ部分です。
いらなので右クリックでDeleteしてください。

SliderHPBar/Handle Slide Area

SliderのSliderコンポーネントのValueを操作することでバーの中身を動かすことができます。
Directionで方向を変えられます。
Whole NumbersでValueの数値を整数に替えられます。

SliderHPBar/Value、Direction、Whole Numbers

現段階ではValueを0にしてもバーは少し残り、マックスの1にしても完全に埋まりません。
削除したつまみの部分が空きになっているせいで余計な余りや隙間ができます。

SliderHPBar/余りあり

SliderHPBar/隙間あり

解決するにはまずSliderの子オブジェクトのFill AreaのRect TransformでLeftとRightを0にします。
これで満タンになります。

SliderHPBar/Fill Area/Rect Transform

次はFill Areaの子オブジェクトのFillのRect TransformのWidthを0にします。
これでValueを0にした時の余計な部分が消えました。

SliderHPBar/Fill/Rect Transform

次は色を変えましょう。
Sliderの子オブジェクトのBackgroundとFillにあるImageコンポーネントのColorで変えられます。

SliderHPBar/Background/Imageコンポーネント

SliderHPBar/Fill/Imageコンポーネント

SliderHPBar/着色完了

バーが丸っこいデザインですが、これは先ほどの2つのImageコンポーネントのSource ImageをNoneにすると四角くなります。
お好みで決めてください。

SliderHPBar/Source ImageをNoneで四角くなる

あとこのままだと画面のサイズが変わるとSliderはそのままで相対的に大きくなったり小さくなったりします。
なのでCanvasのCanvas ScalerコンポーネントのUI Scale ModeをScale With Screen Sizeにすると画面に合わせて一緒に大きさが変わります。

SliderHPBar/Canvas Scaler/RenderMode/Scale With Screen Size

あるいはSliderのRect Transformのcenterと書かれている部分の十字のアイコンをクリックするとAnchor Presetsが開きます。
その中のstretchという青矢印のものはCanvasに合わせてUIの形を変えられるようにしてくれます。

SliderHPBar/Anchor Presets/stretch

スポンサーリンク

次はスクリプトで動かします。

【UnityC#講座】無料アセットで一人称視点に剣を振らせる

ここで動かしたCapsuleに新たにスクリプトを追加します。

これを操作するオブジェクトに入れ、InspectorからSliderをセットします。

SliderHPBar/Inspector/PlayerHPBar

あとOnTriggerEnterのためにCapsuleColliderコンポーネントのIsTriggerにチェックを入れてください。

SliderHPBar/Inspector/CapsuleCollider/IsTrigger

そしてCubeを設置し、Rigidbodyの追加、Enemyタグの設定をします。
そうするとこのようにCubeに触れるとHPが減って行きます。

SliderHPBar/OnTriggerEnter/HP減る

無事このようになったでしょうか?

■キャラクターごとにHPバーを設置する

次はキャラクターごとにHPバーを設置してみましょう。
完成図はこのようになります。

SliderHPBar/キャラクターごとに設置する完成図

PlayerのHPバーは左上に持って行きました。

さて、こうするためには新たにCanvasを出してもらいます。
先ほどはUnityUIを出したら自動で出てきましたが、今回は手動で出してください。

Hierarchy > Create > UI > Unity

名前はEnemyCanvasにしました。
キャラクターごとに設置するポイントはEnemyCanvasのCanvasコンポーネントのRenderModeをWorldSpaceにすることです。
そして現れたEvent CameraにMain CameraタグがついたCameraを入れてください。
こうするとCanvasはオブジェクトのように遠近感が出るようになります。

あとRect Transform下部のScaleをがっつりと小さくしてください。
通常のCanvasのサイズだと大きすぎます。

SliderHPBar/Canvas/RenderMode/WorldSpace/Rect Transform/Scale

次につけたいオブジェクトの子オブジェクトにし、さらに先ほどのSliderをDuplicateで複製しEnemyCanvasの子オブジェクトにしてください。
EnemyCanvasの位置の調整は、子オブジェクトにしてからPosX,Y,Zを0にするとやりやすいです。

SliderHPBar/EnemyCanvasは子オブジェクトに

そしてそのSliderのサイズ、位置、Anchor Presetsを調整してください。

SliderHPBar/EnemyCanvas/Slider/Anchor Presets

次にスクリプトを書き、常にこちらを向くようにします。

これを今回はCubeに入れて使います。
そしてInspectorのこのスクリプトのCanvas変数の空欄にEnemyCanvasを入れてください。

そうすると常にこちらを向くようになります。

SliderHPBar/EnemyCanvas/常にこちらを向く

あとは先ほどの最初のスクリプトと同じようにSlider.Valueを動くようにすればHPバーとして機能します。

今回はこれで終わりです。
お疲れさまでした。

追記 7月14日

追記終わり

■関連記事

【UnityC#講座】角度と力を決めてボールの飛距離を競うゲーム【Flying Ball】

こちらではSliderを加える力のメーターとして利用しています。

スポンサーリンク

目次に戻る