Unity 入門 ヘルスバーを作る

アイキャッチ 入門

ゲームを作っていると、プレイヤーキャラのHPゲージを出したいな、ってことが日常的にあります。

というわけで今回は、ヘルスバー(HPゲージ)の作り方を紹介します。

一度知ってしまえば、なんでもないことなので、しっかり覚えましょうね。

それでは、以下、解説。

スプライトを用意する

Unity におけるスプライトとは、UI などに使われる 2D テクスチャのことです。

簡単なスプライトなら画像がなくても、Sprite Creater で作ることができます。

プロジェクトウィンドウで Create → Sprites → Square を選択してみましょう。

スプライト作成

 

小さい四角のスプライトができましたね。

これを使ってヘルスバーを作っていきます。

ヘルスバーを作る

工程を細かく分割して説明していきます。

Canvas を作る

まずはキャンバスを作ります。

ヒエラルキーで Create → UI → Canvas を選択します。

EventSystem というオブジェクトが一緒に作られます。

こいつは、マウスクリックやタッチなどのイベントを通知するやつです。今回は使いません。

あと Canvas Scaler の UI Scale Mode は Scale With Screen Size にしておいてください。

CanvasScaler

 

Image を4つ作る

次に Image を 4つ 作って、下記のように名前をつけます。
・Frame
・Background
・RedBar
・GreenBar

各 Image の色は適当にこんな感じにしました。

ヘルスバー色

 

インスペクターから Image の Color で変更できますので、好きな色をつけてください。

色をつけたら、このように親子関係を設定します。

ヘルスバー親子関係

 

バーのサイズとアンカーを設定する

それぞれの Image のサイズとアンカーを設定します。

サイズは適当に変更してもらって大丈夫ですが、アンカーは下記の図に合わせてください。

Frame

Frameサイズ

RedBar

RedBarサイズ

Background

Backgroundサイズ

GreenBar

GreenBarサイズ
 

上の設定をすると、こんな形になります。

ヘルスバー

 

Image Type : Filled を使う

ゲージなどをつくるときに便利な Filled という Image Type があります。

これを使うには、スプライトを設定する必要があるので、上で作った Squareスプライト を利用します。

インスペクターで RedBar と GreenBar の Source Image に Squareスプライトを設定します。

Image Type を Filled にすると、いくつかプロパティが出てきます。

その中の Fill Method を Horizontal に変更してください。

Filled

 

ぜんぶ設定出来たら、Fill Amount を適当にいじってテスト。

ヘルスバーテスト

 

これで完成です!

あとは、スクリプトなどで Fill Amount を設定するだけです。

RedBar の方は、ダメージ表現用のバーです。こういうふうに使えます。

ヘルスバーダメージ

 

以上です! おしまい。



コメント

タイトルとURLをコピーしました