ORK Framework 3を使ってみよう！（１１）〜能力値表示を設定する〜

ORK Framework 3を使ってみるシリーズ。
基本情報と目次は以下。

能力値の表示UIを作成する

• 前回まででステータス画面の構成は大体できた

• が、能力値の表示がなんか分かりにくい

  • 攻撃力、防御力とかにバー表示がついている

  • HPやMPにはバー表示があっていいけど、白一色でつまらん

• これを調整する

能力値UIを複製する

• Tutorial Assets > _Created > HUD > Element に入っているStatus Value UIプレハブを複製する

  • ４〜５個コピペ

  • 数値のみ、HPバー、MPバー、TPバー、EXPバー用にそれぞれ作成

  • バリエーション作らないなら減らしていい

• 複製したプレハブの名称を変えたり場所を変えたりして整理

• これらをベースに作成していく

これを複製

能力値UIプレハブを改造する

• まずは数値のみのプレハブを作成する

• 複製したUIプレハブの中身は、バー表示、ステータス名表示、ステータス値表示の３つ

• バー表示をしているValue Barオブジェクトを消去

• ステータス名、ステータス値表示のテキストのフォントを変えておく

  • ステータス名の色を変えておくと見やすいかも

これを

こんな感じに

• 同様にHP、MP、TP、EXPバー用のプレハブも編集

  • こっちはValue Barオブジェクトを残す

• Value Bar内のEmpty Spriteがゲージの背景色、Value Spriteがゲージ本体の色になる

  • これらのオブジェクトをあれこれすればバーを色々とデザインできる

  • ツクールのグラデーションバーを真似するなら、グラデ画像を用意するなりShader Graphを駆使するなりで表現できる

  • 今回は適当に色だけ変えておく

• せっかくなので値も現在値だけでなく最大値も表示しておく

  • ValueオブジェクトのDefault Contentに<value> / <valuemax>と記入

色はお好みで

Makinomで能力値表示に使うUIを設定する

デフォルトの能力値UIを設定する

• MakinomのUI > UI Settings > ORK UI Settings > HUD Settingsで各種ステータスのデフォルトUIを設定できる

• 初期設定だと、コピペ元のStatus Value UIが設定されている

• Default Status Value UIのUI Prefabに、数値のみのUIを設定する

特に指定しない限りこれが表示される

能力値ごとの個別UIを設定する

• Status > Status Valueの各項目のUI Settings > Custom Status Value UIで個別のUIを設定できる

  • HP、MP、TP、EXPとかバーを表示したい能力値にはこっちで設定

• Own Status Value UIを有効化

• UI Prefabに作成したUIを設定

各種ゲージに専用UIを設定

ステータス画面で表示する能力値を指定する

• Status Value Listで一括表示したら、最大HPとか不要な情報も表示されていた

• めんどくさいけどカスタマイズする

• HUD Status Value ListコンポーネントのList Status TypeからDefinedを選択

• Add Status Valueボタンから項目を追加して表示したい能力値を選択

  • ATK、DEF、MATK、MDEF、AGI、LUCKの6個で

面倒くさいけど手動で指定

• 折角作った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を選択

他にExperienceのステータスを追加してなければこれで

• テストプレイで確認

  • 前回作った装備一覧もスロット名に色つけといた

• 微調整は必要そうだが、大体再現できた

やっとツクールっぽくなった