IshidaGames【UnityC#講座】SliderでHPバーを作るTweetnoteで管理人イシゲーのゲームの思い出記事を100円で公開しました。今までにHPバーの記事を2本書きました。Amountで作る【UnityC#講座】RawImageでHPバーを作る今回はUnityUIのSliderを使ったHPバーの作り方を紹介します。画像を別に用意しなくて良いので今までで一番楽な方法だと思います。HPバーを設置するまずはSliderを出しましょう。Areaがありますが、これはSliderのつまみ部分です。いらなので右クリックでDeleteしてください。SliderのSliderコンポーネントのValueを操作することでバーの中身を動かすことができます。Directionで方向を変えられます。NumbersでValueの数値を整数に替えられます。現段階ではValueを0にしてもバーは少し残り、マックスの1にしても完全に埋まりません。削除したつまみの部分が空きになっているせいで余計な余りや隙間ができます。TransformでLeftとRightを0にします。これで満タンになります。TransformのWidthを0にします。これでValueを0にした時の余計な部分が消えました。次は色を変えましょう。Sliderの子オブジェクトのBackgroundとFillにあるImageコンポーネントのColorで変えられます。ImageをNoneにすると四角くなります。お好みで決めてください。あとこのままだと画面のサイズが変わるとSliderはそのままで相対的に大きくなったり小さくなったりします。Sizeにすると画面に合わせて一緒に大きさが変わります。Presetsが開きます。その中のstretchという青矢印のものはCanvasに合わせてUIの形を変えられるようにしてくれます。スポンサーリンク次はスクリプトで動かします。【UnityC#講座】無料アセットで一人称視点に剣を振らせるここで動かしたCapsuleに新たにスクリプトを追加します。これを操作するオブジェクトに入れ、InspectorからSliderをセットします。あとOnTriggerEnterのためにCapsuleColliderコンポーネントのIsTriggerにチェックを入れてください。Cubeを設置し、Rigidbodyの追加、Enemyタグの設定をします。するとこのようにCubeに触れるとHPが減って行きます。無事このようになったでしょうか?■キャラクターごとにHPバーを設置する次はキャラクターごとにHPバーを設置してみましょう。完成図はこのようになります。PlayerのHPバーは左上に持って行きました。するためには新たにCanvasを出してもらいます。先ほどはUnityUIを出したら自動で出てきましたが、今回は手動で出してください。Unity名前はEnemyCanvasにしました。キャラクターごとに設置するポイントはEnemyCanvasのCanvasコンポーネントのRenderModeをWorldSpaceにすることです。CameraタグがついたCameraを入れてください。するとCanvasはオブジェクトのように遠近感が出るようになります。Transform下部のScaleをがっつりと小さくしてください。通常のCanvasのサイズだと大きすぎます。次につけたいオブジェクトの子オブジェクトにし、さらに先ほどのSliderをDuplicateで複製しEnemyCanvasの子オブジェクトにしてください。EnemyCanvasの位置の調整は、子オブジェクトにしてからPosX,Y,Zを0にするとやりやすいです。Presetsを調整してください。次にスクリプトを書き、常にこちらを向くようにします。これを今回はCubeに入れて使います。InspectorのこのスクリプトのCanvas変数の空欄にEnemyCanvasを入れてください。すると常にこちらを向くようになります。あとは先ほどの最初のスクリプトと同じようにSlider.Valueを動くようにすればHPバーとして機能します。今回はこれで終わりです。7月14日HPバーがマウスで操作できて驚きました。CanvasGroupコンポーネントのblocksRaycastsを外したら動かせなくなってほっとしました。Ball】こちらではSliderを加える力のメーターとして利用しています。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。