IshidaGames【UnityC#講座】RawImageでHPバーを作るTweetnoteで管理人イシゲーのゲームの思い出記事を100円で公開しました。以前こんな記事を書きました。Amountで作る今回はRawImageという仕組みでHPバーを作ります。それにしてもHPバーとHPゲージ、どちらが正しい言い方なのでしょうか?分からないのですが今回は棒状なのでHPバーとしておきます。UnityにはImageという機能もありますが、RawImageとの違いはTextureが使えないけどもより多機能なのだそうです。ちなみに画像にはTextureとSpriteがありますが、前者は生の画像で後者はアセットとして使えるように加工されたものなのだとか。スクリプトを書く■画像とRawImageをセットする画像を用意するさて、まずは画像を用意しましょう。このようにHPを表す緑の部分とダメージを表す赤い部分が半分ずつの画像をイラストソフトでさっと作りUnityのAssetsフォルダに入れます。RawImageを設定する次はRawImageを出します。Image出たら真ん中に来るようにしましょう。次はRawImageコンポーネントのTextureに先ほどの画像を入れます。RawImageの形を整えるそしてHPバーっぽく左右に長くして形を整えます。WidthとHeightをいじってください。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#スクリプトを書きましょう。Script名前は「HPBar」にしました。できたらHierarchyのRawImageにアタッチしてください。constは値を変えない変数を宣言する時につけます。ASDキーでダメージと回復を操作します。RectのXの長さは1なのですが、緑が0.49で赤が0.51になります。設定した最大HPをその0.51で割るとHP1の長さが導き出され、それにダメージを掛け合わせて加算することでダメージが表現されます。スポンサーリンク■HPが徐々に増減するスクリプトを書くさて、HPバーと言えば徐々にバーが動く様子を思い描く人もいるでしょう。そのようになるスクリプトも書いてみました。名前は「HPBarAnim」です。RawImageにアタッチしたら先ほどのスクリプトのチェックは外してください。ダメージのバーの現在の長さと目指す長さの2つをFloat変数にし、それをMathf.Lerpで徐々に同じ数値にしてバーを動かします。■キャラクターにセットするCanvasの設定ついでにゲームによくあるキャラの頭上に表示されるようにしてみましょう。それはRawImageの親オブジェクトであるCanvasを設定してからキャラクターの子オブジェクトにすることでできます。親オブジェクトのCanvasのCanvasコンポーネントを見てください。ModeをWorldSpaceにしてください。すると距離によって大きさが変わります。次はそのCanvasをRawImageごとHPバーをつけたいキャラクターの子オブジェクトにします。するとCanvasとRawImageがかなり大きいのでがっつりと小さくしなくてはいけません。本来は最初に子オブジェクトにし、それから大きさと形を決めるべきでしょう。残念ながらキャラクターと一緒に向きを変えてしまいます。スクリプトを書くなのでスクリプトで常にカメラを向くようにしましょう。名前は「Direction」にしました。これをRawImageにアタッチしてください。どこからでも見えますがカメラの中央を離れると斜めになってしまいますね。常に水平に保ちたいならもう一工夫いるようです。中途半端かもしれませんが今回はここで終わりにします。20:30HPバーの向きのスクリプト「Direction」を修正しました。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。