【Unity】Sliderの色の変更方法とHPバーの作り方

Unity

はじめに

この記事ではHPバーの作り方を紹介します。

Sliderコンポーネントの基本的な使い方が分からない方は前回の記事もご覧ください。

前回の記事

【Unity】Sliderの使い方とリアルタイムで値を取得する方法

 

— YouTubeなら14分52秒で学べます ―

 

準備

GameObject > UI > SliderよりSliderを設置。

そのスライダーに使用したいスクリプトをアタッチしてください。

 

今回はSlider内の「Background」「Fill」「Handle」を変更します。

 

 

Sliderの色を変更する方法

Sliderの子オブジェクト主に3種類です。

「Background」「Fill」「Handle」の色を変更していきます。

 

・Backgroundの色の変更

Background のImageコンポーネントのColorをクリック。

これで、色を変更してください。

 

・Fillの色の変更

Fill のImageコンポーネントのColorをクリック。

これで、色を変更してください。

 

・Handleの色の変更

HandleのImageコンポーネントのColorをクリック。

これで、色を変更してください。

 

 

HPバーの作り方

・Handleを非表示にする

HPバーにはつまみ部分はいらないので非表示にします。

 

HandleのImageのチェックを外してください。

これで、つまみ部分が非表示になります。

 

ただし、つまみが無くなってもドラッグすれば値を変更することができます。

 

・HPバーを操作できなくする

HPバーをマウスで操作できなくするには、

Sliderの「Interactable」のチェックを外してください。

これでマウスで操作できなくなります。

 

・HPバーを完全に満たす

Sliderの初期設定では、

valueの値を最大にしても、バーは完全に端まで達しません。

 

これはつまみがあった分、最大領域が少なく見積もられているからです。

 

Hierarchyの「Fill Area」クリックし、

左上の「Rect Tool」でFill Areaの領域を

広げてください。

 

これで、Fillの色が右端まで満たされます。

 

・HPを減らしてみる

 

前回の記事のコードを使っています。

今回も、Sliderにスクリプトをアタッチしています。

 

上記のコードを使用すると、

クリックしたときにSliderのvalueが10減ります。

 

このように、攻撃を受けたらvalueを減らせば、

HPバーを実装できます。

 

忙しい人のためのUnity入門講座へ戻る

 

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