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



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

アセットストア
Asia Pacific Pack

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

◆◆◆◆


Unity2018.1.5f1
Windows10

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

今回はRPGでもFPSでもお馴染みのHPゲージを作ります。
HPゲージを表現する方法はいくらでも工夫次第で作れますが、Unityには「fill Amount」という便利な機能があるので紹介します。

■ImageにSpriteを入れる

fill AmountはImageにSpriteをセットすることで使えるようになります。
Spriteとは動かすために用意された画像と言ったところでしょうか。
なのでまずHierarchyにImageを出してください。

Create > UI > Image

Spriteは他から持ってきた画像でも良いのですがあえてUnityの機能から生み出します。

Assets > Create > Sprite

 Assets > Create > Sprite

画面上部のメインメニューのAssetsからアクセスしてください。
色んな形が選べますがどれをImageに入れても長方形にしかならないのでどれでも良いです。

次はそのSpriteをImageのInspectorにセットします。

Image > Source Image

ImageにSpriteセット

セットするとImage Typeという項目が出てくるのでそこをFilledにしてください。

Image Type/Filled

■fill Amountの5つのタイプ

fill Amountは数値により画像の形を変えられるのですが、その変え方は5種類ありFill Methodから選べます。

Image/Fill Method

Fill Amountの項目のスライダーを動かすと数値を1~0まで変えることができ、それに伴いImageの方も変わるのでチェックしてください。

Fill Amount/Inspector/スライダー

以下が5種それぞれの見た目の変わり方です。

Horizontal

Fill Amount/Horizontal

Vertical

Fill Amount/Vertical

Radial 90

Fill Amount/Radial 90

Radial 180

Fill Amount/Radial 180

Radial 360

Fill Amount/Radial 360

スポンサーリンク

■スクリプトでHPを減らす

最大HPを設定してそれに合わせて0になるようにします。
そのHPを数字で表すためのTextを出してください。

Hierarchy > Create > UI > Text

ImageとTextを適当な大きさにしてください。
Fill Methodも好きなものにしてもらって大丈夫です。

HPゲージ

次に空のオブジェクトとスクリプトを2つずつ作ってもらいます。
オブジェクトとスクリプトの名前はどちらも「HPSystem」と「DamageSystem」の2つです。

Hierarchy > Create > Create Empty

Project > Create > C# Script

これで数字が0になる時Imageも一緒に消えるようになります。

HP減少/fillAmount

今回はこれで終わりです。
お疲れ様でした。

■関連記事

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

スポンサーリンク

目次に戻る


コメントを残す

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

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