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」にしました。
できたらHierarchyのRawImageにアタッチしてください。
constは値を変えない変数を宣言する時につけます。
ASDキーでダメージと回復を操作します。
UV RectのXの長さは1なのですが、緑が0.49で赤が0.51になります。
設定した最大HPをその0.51で割るとHP1の長さが導き出され、それにダメージを掛け合わせて加算することでダメージが表現されます。
スポンサーリンク
■HPが徐々に増減するスクリプトを書く
さて、HPバーと言えば徐々にバーが動く様子を思い描く人もいるでしょう。
そのようになるスクリプトも書いてみました。
名前は「HPBarAnim」です。
RawImageにアタッチしたら先ほどのスクリプトのチェックは外してください。
ダメージのバーの現在の長さと目指す長さの2つをFloat変数にし、それをMathf.Lerpで徐々に同じ数値にしてバーを動かします。
■キャラクターにセットする
Canvasの設定
ついでにゲームによくあるキャラの頭上に表示されるようにしてみましょう。
それはRawImageの親オブジェクトであるCanvasを設定してからキャラクターの子オブジェクトにすることでできます。
まずは親オブジェクトのCanvasのCanvasコンポーネントを見てください。
そこでRender ModeをWorldSpaceにしてください。
そうすると距離によって大きさが変わります。
次はそのCanvasをRawImageごとHPバーをつけたいキャラクターの子オブジェクトにします。
そうするとCanvasとRawImageがかなり大きいのでがっつりと小さくしなくてはいけません。
本来は最初に子オブジェクトにし、それから大きさと形を決めるべきでしょう。
さてこれを動かしてみると・・・
残念ながらキャラクターと一緒に向きを変えてしまいます。
スクリプトを書く
なのでスクリプトで常にカメラを向くようにしましょう。
名前は「Direction」にしました。
これをRawImageにアタッチしてください。
するとこうなります。
どこからでも見えますがカメラの中央を離れると斜めになってしまいますね。
常に水平に保ちたいならもう一工夫いるようです。
おそらく一人称視点のゲームなら気にならないと思いますが・・・
□
少し中途半端かもしれませんが今回はここで終わりにします。
お疲れさまでした。
■関連記事
この作品はユニティちゃんライセンス条項の元に提供されています
スポンサーリンク