Unity:スライダーをHPバーっぽく表示する

Unity:スライダーをHPバーっぽく表示するUnity
スポンサーリンク

Unityのスライダー(UI>Slider)の見た目を変えて、敵キャラに表示されるようなHPバーにしてみる記事です。

スポンサーリンク

スライダー(Slider)をシーンに配置する

まず、Unityを起動して適当なプロジェクトを作ります。(注:記事中の画像では背景が分かりやすく見えるようにTerrainを使って地形や木を配置しています)

次にスライダーを配置します。

Hierarchyウインドウで、Create > UI > Slider を選択してください。

Unity:スライダーをHPバーっぽく表示する

スライダーのようなUI部品は、Gameタブでしか実際の表示状態を確認できませんので、とりあえずSceneタブで見えている状態とGameタブの見た目を同じにしておきます。

HierarchyウインドウのMain Cameraを選択しておき

Unity:スライダーをHPバーっぽく表示する

GameObjectメニュー > Align With View を選択します。

Unity:スライダーをHPバーっぽく表示する

以下はSceneタブの状態のイメージです。(背景の木などは別です)

Unity:スライダーをHPバーっぽく表示する

Gameタブに切り替えた状態はこんな感じです。

Unity:スライダーをHPバーっぽく表示する

ほとんど変わりませんね!(笑)
Gameタブに切り替えたときにスライダーが見えていれば問題ないのですが、今回わたしの環境の場合Gameタブに切り替えてもSliderがどこにあるか分かりませんでした。
そんな場合は、とりあえずSliderを画面の中央に表示させてみます。

Gameタブ表示であること確認してから、HierarchyウインドウのSliderをクリックして選択します。

Unity:スライダーをHPバーっぽく表示する

Inspectorウインドウの以下の部分をAltキーを押しながらクリックします。

Unity:スライダーをHPバーっぽく表示する

Altキーを押した状態で中央の十字アイコンの部分をクリックします。

Unity:スライダーをHPバーっぽく表示する

すると画面のちょうど真ん中にスライダーが表示されるはずです。

Unity:スライダーをHPバーっぽく表示する

どう見てもスライダーです(笑)

ここから見た目を変えていきます。

スライダーの見た目をHPバーっぽく変える

まずスライダーの丸いつまみ部分を消します。
HierarchyウインドウのSliderをクリックして展開するとHandle Slide Areaという部品があります。
これを選択してDeleteキーで削除します。

Unity:スライダーをHPバーっぽく表示する

スライダーの見た目はこんな感じになります。

Unity:スライダーをHPバーっぽく表示する

この時点でSliderの要素はBackgroundFill Areaの2つになります。

Unity:スライダーをHPバーっぽく表示する

ちなみにBackgroundは、スライダーの背景、Fill Areaはスライダー前面の見た目を表します。

HPバーっぽく色を変更してみます。

Backgroundを選択して、InspectorウインドウのColor要素の白い部分をクリックしてみてください。

Unity:スライダーをHPバーっぽく表示する

このようなColor選択ウインドウが表示されます。

Unity:スライダーをHPバーっぽく表示する

設定した色はバーの背景色になります。(スライダーが最小のとき全部背景色になるということ)

今回は背景色を赤くしてみました。(色はなんでもOKです)

Unity:スライダーをHPバーっぽく表示する

次にHierarchyウインドウで、Fill Areaを展開すると表示されるFillの部分をクリックします。

Unity:スライダーをHPバーっぽく表示する

ここにもColorという項目があります。これはスライダーが満タンの時の色です。背景色とは別の色に変更します。(緑にしてみました)

Unity:スライダーをHPバーっぽく表示する

スライダーが最小値のため緑部分が少ないですが、色の確認はできます。

Unity:スライダーをHPバーっぽく表示する

実行してスライダー動かしてみてください。緑部分の大きさが変化するはずです。

Unity:スライダーをHPバーっぽく表示する

実行後、スライダーを最大値にしてもHPの見た目が満タンに見えません。先ほどのつまみの分の余裕があるためです。以下の3つの要素をすべて0にします。

HierarchyウインドウInspectorウインドウ設定値
Sliderの子要素Fill AreaRect TransformのLeft0
Sliderの子要素Fill AreaRect TransformのRight0
Fill Areaの子要素FillRect TransformのWidth0

Fill AreaのLeftRight
Unity:スライダーをHPバーっぽく表示する

FillのWidth
Unity:スライダーをHPバーっぽく表示する

この状態で実行してスライダーを一番右までスライドしてください。
HPの見た目が満タンになります。

Unity:スライダーをHPバーっぽく表示する

スライダーの丸みをとってスクエアな感じにする

わたしはこのちょっと丸みがかった見た目が好きになれなかったので、スクエアな感じにしてみました。
これはBackgroundとFill2箇所のImage要素の中にあるSource Image項目をNoneにすることで変更できます。

Unity:スライダーをHPバーっぽく表示する

Source Imageの右端の小さな◎の部分をクリックすると以下のような選択ウインドウが開きますので、一番左上にあるNoneを選択してください。

Unity:スライダーをHPバーっぽく表示する

これをBackgroundFillSource Image項目2箇所に適用します。

こんな感じの見た目になります。

Unity:スライダーをHPバーっぽく表示する

ここまでの作業で、ある程度HPバーのように見えますが、もう少しこだわりたいので追加で見ていきます。

最小値、最大値の設定と方向設定

HierarchyウインドウのSliderをクリックしてInspectorウインドウの以下の5項目が見える位置までスクロールさせてください。

Direction値の増える方向を表す
Left To Right(左から右、デフォルト)
Right To Left(右から左)
Bottom To Top(下から上)
Top To Bottom(上から下)
Min Value最小値(float型)
Max Value最大値(float型)
Whole Numbersスライダーを整数の値に制限するかどうか
Value現在値(float型)

Sliderを選択して表示されるInspectorウインドウのDirection要素をクリックすると4種類の増分方向が選択できます。

Unity:スライダーをHPバーっぽく表示する

例)Bottom To Topを選択して実行した様子

Unity:スライダーをHPバーっぽく表示する

スライダーのデフォルトは実数値をとるのでゲームなどでは使いにくいかもしれません。
モンスターのHPが最小値 0~最大値 100として、整数値のみの値で十分ならこんな感じの設定になります。(Whole Numbersにチェックをつけるとスライダーの値は整数値となる。デフォルトは小数点を含む実数値)

Unity:スライダーをHPバーっぽく表示する

幅と高さ、透明化

スライダーの大きさは、SliderのWidthHeightで調整できます。

Unity:スライダーをHPバーっぽく表示する

少し大きくしてみました。

Unity:スライダーをHPバーっぽく表示する

更に背景が透けて見えると現代的(笑)です。
バーの背景と前面の色設定のとき使ったBackgroundとFill Area内のFill項目のColor設定でアルファ値(A)の設定ができます。(0にすると透明すぎて見えなくなります。ほどほどに)

Unity:スライダーをHPバーっぽく表示する

こんな感じで背景が透けて見えます(現代的!)

Unity:スライダーをHPバーっぽく表示する

以上、ちょっと長々説明しましたが、実際はこれを使って面白いものを作ることが本分だと思いますのでHPバーだけ作って満足せずにぜひ面白いゲームを作ってみてください。

Sliderに関する詳しい説明は以下にあります。

Slider – Unity マニュアル

以上、Unityのスライダーの見た目を変えて、敵キャラに表示されるようなHPバーにしてみる記事でした。

スポンサーリンク
Unity
スポンサーリンク
dennouをフォローする
電脳産物

コメント