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

投稿者: | 2018年12月16日

フィア
今回は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バーを実装できます。

 

 

おわりに

フィア
Sliderはゲーム中、かなり使うよね!
カレン
必須の知識だから、しっかり覚えてね!

 

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

 

すくまりゲームズの人気記事