ORK Framework 3を使ってみよう!(11)〜能力値表示を設定する〜
ORK Framework 3を使ってみるシリーズ。
基本情報と目次は以下。
能力値の表示UIを作成する
前回まででステータス画面の構成は大体できた
が、能力値の表示がなんか分かりにくい
攻撃力、防御力とかにバー表示がついている
HPやMPにはバー表示があっていいけど、白一色でつまらん
これを調整する
能力値UIを複製する
Tutorial Assets > _Created > HUD > Element に入っているStatus Value UIプレハブを複製する
4〜5個コピペ
数値のみ、HPバー、MPバー、TPバー、EXPバー用にそれぞれ作成
バリエーション作らないなら減らしていい
複製したプレハブの名称を変えたり場所を変えたりして整理
これらをベースに作成していく
![](https://assets.st-note.com/img/1720353650388-hkPOuIZgz5.png?width=1200)
能力値UIプレハブを改造する
まずは数値のみのプレハブを作成する
複製したUIプレハブの中身は、バー表示、ステータス名表示、ステータス値表示の3つ
バー表示をしているValue Barオブジェクトを消去
ステータス名、ステータス値表示のテキストのフォントを変えておく
ステータス名の色を変えておくと見やすいかも
![](https://assets.st-note.com/img/1720353669616-5wcfFgl7Al.png?width=1200)
![](https://assets.st-note.com/img/1720353683171-jKvSWHvqge.png?width=1200)
同様にHP、MP、TP、EXPバー用のプレハブも編集
こっちはValue Barオブジェクトを残す
Value Bar内のEmpty Spriteがゲージの背景色、Value Spriteがゲージ本体の色になる
これらのオブジェクトをあれこれすればバーを色々とデザインできる
ツクールのグラデーションバーを真似するなら、グラデ画像を用意するなりShader Graphを駆使するなりで表現できる
今回は適当に色だけ変えておく
せっかくなので値も現在値だけでなく最大値も表示しておく
ValueオブジェクトのDefault Contentに<value> / <valuemax>と記入
![](https://assets.st-note.com/img/1720356233947-7Y6MAzeKKw.png?width=1200)
Makinomで能力値表示に使うUIを設定する
デフォルトの能力値UIを設定する
MakinomのUI > UI Settings > ORK UI Settings > HUD Settingsで各種ステータスのデフォルトUIを設定できる
初期設定だと、コピペ元のStatus Value UIが設定されている
Default Status Value UIのUI Prefabに、数値のみのUIを設定する
![](https://assets.st-note.com/img/1720699323288-xwVwYUioiQ.png?width=1200)
能力値ごとの個別UIを設定する
Status > Status Valueの各項目のUI Settings > Custom Status Value UIで個別のUIを設定できる
HP、MP、TP、EXPとかバーを表示したい能力値にはこっちで設定
Own Status Value UIを有効化
UI Prefabに作成したUIを設定
![](https://assets.st-note.com/img/1720699355564-nptNtUj7v1.png?width=1200)
ステータス画面で表示する能力値を指定する
Status Value Listで一括表示したら、最大HPとか不要な情報も表示されていた
めんどくさいけどカスタマイズする
HUD Status Value ListコンポーネントのList Status TypeからDefinedを選択
Add Status Valueボタンから項目を追加して表示したい能力値を選択
ATK、DEF、MATK、MDEF、AGI、LUCKの6個で
![](https://assets.st-note.com/img/1720699392451-9jMzG8E23K.png?width=1200)
折角作ったto Next Levelの表記だが、バー表示もしたいのでUIに差し替える
ORK Framework > HUD > Status Value > Status Value List (Vertical Layout)からリストを追加
一個しか表示しないけど、Makinomに設定したUIを表示したい場合はListを使う
一個しかなくてもサイズ自動調整を使うためにLayoutコンポーネントをつけとく
HUD Status Value ListコンポーネントのStatus Value TypeからExperienceを選択
![](https://assets.st-note.com/img/1720860754445-qkOnR7C13K.png?width=1200)
テストプレイで確認
前回作った装備一覧もスロット名に色つけといた
微調整は必要そうだが、大体再現できた
![](https://assets.st-note.com/img/1720860779168-yeRm71RsuQ.png?width=1200)
この記事が気に入ったらサポートをしてみませんか?