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



アセットストアで「平成最後応援セール」開催中!
日本時間2月11日9時から22日まで

アセットストア
Asia Pacific Pack

クーポンコード「LNY10PERCENT」ですべてのアセットが10%オフになります。
クーポンコード「LNY30PERCENT」でIconとAsia Pacific Packが30%オフになります。

◆◆◆◆


Unity2018.1.5f1
Windows10

RawImage/トップ

以前こんな記事を書きました。

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

今回はRawImageという仕組みでHPバーを作ります。
それにしてもHPバーとHPゲージ、どちらが正しい言い方なのでしょうか?
分からないのですが今回は棒状なのでHPバーとしておきます。

UnityにはImageという機能もありますが、RawImageとの違いはTextureが使えないけどもより多機能なのだそうです。
ちなみに画像にはTextureとSpriteがありますが、前者は生の画像で後者はアセットとして使えるように加工されたものなのだとか。

■画像とRawImageをセットする

画像を用意する

さて、まずは画像を用意しましょう。
このようにHPを表す緑の部分とダメージを表す赤い部分が半分ずつの画像をイラストソフトでさっと作りUnityのAssetsフォルダに入れます。

RawImage/画像

RawImageを設定する

次はRawImageを出します。

Hierarchy > Crate > UI > Raw Image

出たら真ん中に来るようにしましょう。

RawImage/位置

RawImage/位置/Scene

次はRawImageコンポーネントのTextureに先ほどの画像を入れます。

RawImage/画像をセット

RawImage/画像をセット/Scene

RawImageの形を整える

そしてHPバーっぽく左右に長くして形を整えます。
WidthとHeightをいじってください。

RawImage/大きさ/

RawImage/大きさ/Scene

次はRawImageコンポーネントのUV Rectを見てください。

RawImage/UV Rect

RawImageの画像を整える

Xは画像の横の位置、Yは縦の位置を変えます。
そしてWは横の大きさ、Hは縦の大きさです。
今回の画像ではYは数値を変えても変化しませんし、Hは極端に変えないと変わりません。
今回使うのはXとWです。

Xを変えるとこのように画像はスライドします。

RawImage/UV Rect/X

Wを変えるとこのように画像が伸び縮みします。

RawImage/UV Rect/W

数値はXが0.005、Wは0.49にします。
Xは0、Wは0.5にした方がすっきりしますがこちらの方が緑の部分がきれいに出ます。

RawImage/UV Rect/設定

RawImage/UV Rect/緑だけ

■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にアタッチしたら先ほどのスクリプトのチェックは外してください。

RawImage/スクリプトのチェック

ダメージのバーの現在の長さと目指す長さの2つをFloat変数にし、それをMathf.Lerpで徐々に同じ数値にしてバーを動かします。

■キャラクターにセットする

Canvasの設定

ついでにゲームによくあるキャラの頭上に表示されるようにしてみましょう。
それはRawImageの親オブジェクトであるCanvasを設定してからキャラクターの子オブジェクトにすることでできます。

まずは親オブジェクトのCanvasのCanvasコンポーネントを見てください。
そこでRender ModeをWorldSpaceにしてください。
そうすると距離によって大きさが変わります。

RawImage/Canvas/WorldSpace

次はそのCanvasをRawImageごとHPバーをつけたいキャラクターの子オブジェクトにします。
そうするとCanvasとRawImageがかなり大きいのでがっつりと小さくしなくてはいけません。
本来は最初に子オブジェクトにし、それから大きさと形を決めるべきでしょう。

RawImage/Canvas/大きさ

RawImage/RawImage/大きさ

RawImage/ユニティちゃんに設定

さてこれを動かしてみると・・・

RawImage/ユニティちゃん/HPバー/未完成

残念ながらキャラクターと一緒に向きを変えてしまいます。

スクリプトを書く

なのでスクリプトで常にカメラを向くようにしましょう。
名前は「Direction」にしました。

これをRawImageにアタッチしてください。
するとこうなります。

RawImage/ユニティちゃん/HPバー/完成

どこからでも見えますがカメラの中央を離れると斜めになってしまいますね。
常に水平に保ちたいならもう一工夫いるようです。
おそらく一人称視点のゲームなら気にならないと思いますが・・・

少し中途半端かもしれませんが今回はここで終わりにします。
お疲れさまでした。

ユニティちゃんライセンス

この作品はユニティちゃんライセンス条項の元に提供されています

スポンサーリンク

目次に戻る


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください