Unity2018.1.5f1
Windows10
□
以前こんな記事を書きました。
【UnityC#講座】HPゲージをfill Amountで作る
今回はRawImageという仕組みでHPバーを作ります。
それにしてもHPバーとHPゲージ、どちらが正しい言い方なのでしょうか？
分からないのですが今回は棒状なのでHPバーとしておきます。
UnityにはImageという機能もありますが、RawImageとの違いはTextureが使えないけどもより多機能なのだそうです。
ちなみに画像にはTextureとSpriteがありますが、前者は生の画像で後者はアセットとして使えるように加工されたものなのだとか。
■画像とRawImageをセットする
画像を用意する
さて、まずは画像を用意しましょう。
このようにHPを表す緑の部分とダメージを表す赤い部分が半分ずつの画像をイラストソフトでさっと作りUnityのAssetsフォルダに入れます。
RawImageを設定する
次はRawImageを出します。
Hierarchy > Crate > UI > Raw Image
出たら真ん中に来るようにしましょう。
次はRawImageコンポーネントのTextureに先ほどの画像を入れます。
RawImageの形を整える
そしてHPバーっぽく左右に長くして形を整えます。
WidthとHeightをいじってください。
次はRawImageコンポーネントのUV Rectを見てください。
RawImageの画像を整える
Xは画像の横の位置、Yは縦の位置を変えます。
そしてWは横の大きさ、Hは縦の大きさです。
今回の画像ではYは数値を変えても変化しませんし、Hは極端に変えないと変わりません。
今回使うのはXとWです。
Xを変えるとこのように画像はスライドします。
Wを変えるとこのように画像が伸び縮みします。
数値はXが0.005、Wは0.49にします。
Xは0、Wは0.5にした方がすっきりしますがこちらの方が緑の部分がきれいに出ます。
■RawImageのスクリプトを書く
さて次はC#スクリプトを書きましょう。
Project > Create > C# Script
名前は「HPBar」にしました。
| using System.Collections; | |
| using System.Collections.Generic; | |
| using UnityEngine; | |
| //UIを使うときに必要 | |
| using UnityEngine.UI; | |
| public class HPBar : MonoBehaviour { | |
| //Raw Imageを変数にする | |
| RawImage rawImage; | |
| //Raw ImageのUV Rectを変数にする | |
| Rect uvRect; | |
| //HPバーのダメージの部分の範囲 | |
| //基準は1で緑が0.49なので赤は0.51になる | |
| const float maxHPBar = 0.51f; | |
| //最大HP、自由に設定OK | |
| const float maxHP = 100; | |
| //HPバーの現在の位置 | |
| [SerializeField] float currentHPBar; | |
| //ダメージのバーの長さ | |
| [SerializeField] float damageBar = 0f; | |
| void Start () | |
| { | |
| rawImage = GetComponent<RawImage>(); | |
| //引数は順にX,Y,W,H | |
| rawImage.uvRect = new Rect(0.005f, 0f, 0.49f, 1f); | |
| //バーの長さを最大HPで割り、 | |
| //HP1当たりのバーの長さを割り出す | |
| currentHPBar = maxHPBar / maxHP; | |
| } | |
| void Update () { | |
| rawImage.uvRect = new Rect(damageBar, 0f, 0.49f, 1f); | |
| //Aキー押すと10のダメージ | |
| if (Input.GetKeyDown(KeyCode.A)) | |
| { | |
| damageBar += currentHPBar * 10; | |
| } | |
| //Sキー押すと55のダメージ | |
| if (Input.GetKeyDown(KeyCode.S)) | |
| { | |
| damageBar += currentHPBar * 55; | |
| } | |
| //Dキー押すと全回復 | |
| if (Input.GetKeyDown(KeyCode.D)) | |
| { | |
| damageBar -= currentHPBar * maxHP; | |
| } | |
| //ダメージのバーの長さが最大HPのバーの長さを超えたら | |
| //最大HPのバーの長さに等しくなる | |
| if (damageBar > maxHPBar) | |
| { | |
| damageBar = maxHPBar; | |
| } | |
| //ダメージのバーの長さが最低値より低くなったら | |
| //その最低値に等しくなる | |
| if(damageBar < 0.005f) | |
| { | |
| damageBar = 0.005f; | |
| } | |
| } | |
| } |
by できたらHierarchyのRawImageにアタッチしてください。
constは値を変えない変数を宣言する時につけます。
ASDキーでダメージと回復を操作します。
UV RectのXの長さは1なのですが、緑が0.49で赤が0.51になります。
設定した最大HPをその0.51で割るとHP1の長さが導き出され、それにダメージを掛け合わせて加算することでダメージが表現されます。
スポンサーリンク
■HPが徐々に増減するスクリプトを書く
さて、HPバーと言えば徐々にバーが動く様子を思い描く人もいるでしょう。
そのようになるスクリプトも書いてみました。
名前は「HPBarAnim」です。
| using System.Collections; | |
| using System.Collections.Generic; | |
| using UnityEngine; | |
| using UnityEngine.UI; | |
| public class HPBarAnim : MonoBehaviour { | |
| RawImage rawImage; | |
| Rect uvRect; | |
| const float maxHPBar = 0.51f; | |
| const float maxHP = 100; | |
| [SerializeField] float currentHPBar; | |
| //現在のダメージのバーの長さ | |
| [SerializeField] float currentDamageBar = 0f; | |
| //目指すダメージのバーの長さ | |
| [SerializeField] float nextDamageBar; | |
| //バーが移動するスピード | |
| [SerializeField] float speed = 2f; | |
| void Start() | |
| { | |
| rawImage = GetComponent<RawImage>(); | |
| rawImage.uvRect = new Rect(0.005f, 0f, 0.49f, 1f); | |
| currentHPBar = maxHPBar / maxHP; | |
| } | |
| void Update() | |
| { | |
| rawImage.uvRect = new Rect(currentDamageBar, 0f, 0.49f, 1f); | |
| //Mathf.LerpでcurrentDamgeBarからnestDamageBarに移動させる | |
| currentDamageBar = Mathf.Lerp(currentDamageBar, nextDamageBar, | |
| speed * Time.deltaTime); | |
| if (Input.GetKeyDown(KeyCode.A)) | |
| { | |
| nextDamageBar += currentHPBar * 10; | |
| } | |
| if (Input.GetKeyDown(KeyCode.S)) | |
| { | |
| nextDamageBar += currentHPBar * 55; | |
| } | |
| if (Input.GetKeyDown(KeyCode.D)) | |
| { | |
| nextDamageBar -= currentHPBar * maxHP; | |
| } | |
| if (nextDamageBar > maxHPBar) | |
| { | |
| nextDamageBar = maxHPBar; | |
| } | |
| if (nextDamageBar < 0.005) | |
| { | |
| nextDamageBar = 0.005f; | |
| } | |
| } | |
| } |
RawImageにアタッチしたら先ほどのスクリプトのチェックは外してください。
ダメージのバーの現在の長さと目指す長さの2つをFloat変数にし、それをMathf.Lerpで徐々に同じ数値にしてバーを動かします。
■キャラクターにセットする
Canvasの設定
ついでにゲームによくあるキャラの頭上に表示されるようにしてみましょう。
それはRawImageの親オブジェクトであるCanvasを設定してからキャラクターの子オブジェクトにすることでできます。
まずは親オブジェクトのCanvasのCanvasコンポーネントを見てください。
そこでRender ModeをWorldSpaceにしてください。
そうすると距離によって大きさが変わります。
次はそのCanvasをRawImageごとHPバーをつけたいキャラクターの子オブジェクトにします。
そうするとCanvasとRawImageがかなり大きいのでがっつりと小さくしなくてはいけません。
本来は最初に子オブジェクトにし、それから大きさと形を決めるべきでしょう。
さてこれを動かしてみると・・・
残念ながらキャラクターと一緒に向きを変えてしまいます。
スクリプトを書く
なのでスクリプトで常にカメラを向くようにしましょう。
名前は「Direction」にしました。
| using System.Collections; | |
| using System.Collections.Generic; | |
| using UnityEngine; | |
| public class Direction : MonoBehaviour { | |
| void Update () { | |
| //常にメインカメラと同じ向きになる。 | |
| transform.rotation = Camera.main.transform.rotation; | |
これをRawImageにアタッチしてください。
するとこうなります。
どこからでも見えますがカメラの中央を離れると斜めになってしまいますね。
常に水平に保ちたいならもう一工夫いるようです。
おそらく一人称視点のゲームなら気にならないと思いますが・・・
□
少し中途半端かもしれませんが今回はここで終わりにします。
お疲れさまでした。
■関連記事
この作品はユニティちゃんライセンス条項の元に提供されています
スポンサーリンク