Unity2019.1.0f2
Windows10
□
今までにHPバーの記事を2本書きました。
【UnityC#講座】HPゲージをfill Amountで作る
今回はUnityUIのSliderを使ったHPバーの作り方を紹介します。
画像を別に用意しなくて良いので今までで一番楽な方法だと思います。
それなら一番先に紹介しろって話しですね（笑）
■画面上にHPバーを設置する
まずはSliderを出しましょう。
Hierarchy > Create > UI > Slider
Sliderの子オブジェクトにHandle Slide Areaがありますが、これはSliderのつまみ部分です。
いらなので右クリックでDeleteしてください。
SliderのSliderコンポーネントのValueを操作することでバーの中身を動かすことができます。
Directionで方向を変えられます。
Whole NumbersでValueの数値を整数に替えられます。
現段階ではValueを0にしてもバーは少し残り、マックスの1にしても完全に埋まりません。
削除したつまみの部分が空きになっているせいで余計な余りや隙間ができます。
解決するにはまずSliderの子オブジェクトのFill AreaのRect TransformでLeftとRightを0にします。
これで満タンになります。
次はFill Areaの子オブジェクトのFillのRect TransformのWidthを0にします。
これでValueを0にした時の余計な部分が消えました。
次は色を変えましょう。
Sliderの子オブジェクトのBackgroundとFillにあるImageコンポーネントのColorで変えられます。
バーが丸っこいデザインですが、これは先ほどの2つのImageコンポーネントのSource ImageをNoneにすると四角くなります。
お好みで決めてください。
あとこのままだと画面のサイズが変わるとSliderはそのままで相対的に大きくなったり小さくなったりします。
なのでCanvasのCanvas ScalerコンポーネントのUI Scale ModeをScale With Screen Sizeにすると画面に合わせて一緒に大きさが変わります。
あるいはSliderのRect Transformのcenterと書かれている部分の十字のアイコンをクリックするとAnchor Presetsが開きます。
その中のstretchという青矢印のものはCanvasに合わせてUIの形を変えられるようにしてくれます。
スポンサーリンク
次はスクリプトで動かします。
【UnityC#講座】無料アセットで一人称視点に剣を振らせる
ここで動かしたCapsuleに新たにスクリプトを追加します。
これを操作するオブジェクトに入れ、InspectorからSliderをセットします。
あとOnTriggerEnterのためにCapsuleColliderコンポーネントのIsTriggerにチェックを入れてください。
そしてCubeを設置し、Rigidbodyの追加、Enemyタグの設定をします。
そうするとこのようにCubeに触れるとHPが減って行きます。
無事このようになったでしょうか？
■キャラクターごとにHPバーを設置する
次はキャラクターごとにHPバーを設置してみましょう。
完成図はこのようになります。
PlayerのHPバーは左上に持って行きました。
さて、こうするためには新たにCanvasを出してもらいます。
先ほどはUnityUIを出したら自動で出てきましたが、今回は手動で出してください。
Hierarchy > Create > UI > Unity
名前はEnemyCanvasにしました。
キャラクターごとに設置するポイントはEnemyCanvasのCanvasコンポーネントのRenderModeをWorldSpaceにすることです。
そして現れたEvent CameraにMain CameraタグがついたCameraを入れてください。
こうするとCanvasはオブジェクトのように遠近感が出るようになります。
あとRect Transform下部のScaleをがっつりと小さくしてください。
通常のCanvasのサイズだと大きすぎます。
次につけたいオブジェクトの子オブジェクトにし、さらに先ほどのSliderをDuplicateで複製しEnemyCanvasの子オブジェクトにしてください。
EnemyCanvasの位置の調整は、子オブジェクトにしてからPosX,Y,Zを0にするとやりやすいです。
そしてそのSliderのサイズ、位置、Anchor Presetsを調整してください。
次にスクリプトを書き、常にこちらを向くようにします。
これを今回はCubeに入れて使います。
そしてInspectorのこのスクリプトのCanvas変数の空欄にEnemyCanvasを入れてください。
そうすると常にこちらを向くようになります。
あとは先ほどの最初のスクリプトと同じようにSlider.Valueを動くようにすればHPバーとして機能します。
□
今回はこれで終わりです。
お疲れさまでした。
追記 7月14日
HPバーがマウスで操作できて驚きました。
CanvasGroupコンポーネントのblocksRaycastsを外したら動かせなくなってほっとしました。#unity pic.twitter.com/78ACLSeR55— イシゲー＠Blender始めました (@ishidahanta) 2019年7月14日
そしてPrefabをHierarchyで変更したのを適応するにはOverridesからApplyだということを覚えました😄#unity pic.twitter.com/7awH2T2zfc
— イシゲー＠Blender始めました (@ishidahanta) 2019年7月14日
追記終わり
■関連記事
【UnityC#講座】角度と力を決めてボールの飛距離を競うゲーム【Flying Ball】
こちらではSliderを加える力のメーターとして利用しています。
スポンサーリンク