Groups keyboard shortcuts have been updated
Dismiss
See shortcuts

ステータスや好感度などのパラメータを確認するための画面を追加したい

168 views
Skip to first unread message

genshi okinawa

unread,
Nov 13, 2024, 6:26:14 AM11/13/24
to 宴ユーザーグループ
・宴のバージョン:4.1.4
・Unityのバージョン:2023.2.10f1
・OSバージョン:Windows11
・Unityの習熟度:スクリプトは書けない

お世話になっております。
質問は表題の通りでして、以下の2点を質問させていただきます。

1:
各キャラクターのステータスや好感度もしくはゲームの進行度といったゲーム中のパラメータを確認するための画面を追加したいのですが、その場合どのような方法をとれば良いでしょうか?(例えば、コンフィグなどの既存画面を複製してそれを改造して使う...など)
できればゲームの進行中にいつでもその画面を確認できるようにしたいので、会話ウインドウの下の並んでいる他のボタンからアクセスできる...のようなものを想定しています。

2:
そういった画面の追加が大掛かりで複雑になってしまい実装が難しそうな場合は、表示したいパラメータを会話画面の左上などに小さなUIとして表示したい(且つ、コンフィグ画面で非表示の切り替えもできると良い)のですが、その場合はどのような方法をとれば良いでしょうか?(例えば、既存のボタンを複製してそれを改造して使う...など)

お手数ですがご回答をいただければ幸いです。
よろしくお願いいたします。

マッドネスラボ

unread,
Nov 13, 2024, 12:18:18 PM11/13/24
to 宴ユーザーグループ
プロジェクト固有のUI画面は、レイアウトだけならUnityのデフォルトのUIシステム(uGUI)で作成可能ですが、
UIフロー等を変えたり、数値などをUIに反映させるにはプログラムで制御するしかないです。
ある程度のUnityやC#のスキルがないと難しいと思います。

パラメーターを取得するには、下記のプログラムで可能です。

UIプログラムは基本的には
・UI画面を切り替える処理(どのボタンからどの画面を開いて、今の画面は表示を継続するのかしないのか)
・開いてUI画面の表示をゲームの仕様に合わせて設定する処理
・UI画面を閉じて前の画面に戻る処理(どのボタンを押すと閉じるのか)
というのが必要になります。

宴のUIプログラムは、基本的には各画面はUguiViewというクラスを継承(C#プログラムの概念です)して実装すると楽に書けます。

以下に簡単なサンプルプログラムを書きました。
using UnityEngine;
using UnityEngine.UI;
using UtageExtensions;
using System.Collections;
using TMPro;
using Utage;

namespace Utage
{

/// カスタムUI画面のサンプル
public class SampleCustomUiView : UguiView
{
//ADVエンジン
public AdvEngine Engine => this.GetAdvEngineCacheFindIfMissing(ref engine);
[SerializeField] protected AdvEngine engine;

//メインゲーム画面
public UtageUguiMainGame mainGame;

public virtual bool IsInit { get; set; }

//好感度のバー
[SerializeField] Image paramBar;
//好感度のテキスト
[SerializeField] TextMeshProUGUI paramText;

/// メインゲーム画面からこの画面を開く
public void OpenFromMainGame()
{
//メインゲーム画面を閉じる
mainGame.Close();
//この画面を開く
this.Open(mainGame);
}

/// オープンしたときに呼ばれる
protected virtual void OnOpen()
{
IsInit = false;
StartCoroutine(CoWaitOpen());
}


//起動待ちしてから開く
protected virtual IEnumerator CoWaitOpen()
{
while (Engine.IsWaitBootLoading) yield break;

//以下に画面の初期化処理を書く

//好感度を取得してバーに反映
var v = Engine.Param.GetParameterInt("好感度");
if(paramBar) paramBar.fillAmount = v / 100.0f;  //好感度は0~100の範囲

//好感度の数値をテキストに設定
if(paramText) paramText.text = v.ToString();
}

protected virtual void Update()
{
//右クリックで戻る
if (IsInit && InputUtil.IsInputGuiClose())
{
Back();
}
}
}
}

>1
たとえばコンフィグ画面等を複製をした場合、コンフィグ画面用のUIプログラムがついてくるので不必要なものを外して、独自のUI画面用のプログラムを書いて設定しなおす必要があります。

Canvas-AdvUI>Config オブジェクトがコンフィグ画面の表示オブジェクトで、そのオブジェクトについている、UtageUguiConfig.csというのがコンフィグ画面制御のコンポーネントになりますので、
上記のサンプルを元にして作成したコンポーネントと入れ替えてください。
実際は、コンフィグ画面は他にもタブで画面を切り替えるようになっていたりと複雑なのでシンプルな画面ならタブ切り替えしないで済むように作ったほうがよいです。

ss_1024.png
ss_1023.png

SampleCustomUiView (作成したコンポーネント)のインスペクターから
・EngineやMainGameオブジェクトを設定し、
・好感度表示用のUIオブジェクトの設定をしてください



・画面を閉じる処理
BgオブジェクトとWindow > Button-Back オブジェクトの「OnClick」に、Sampleオブジェクトを設定し、SampleCustomUiView (作成したコンポーネント)のOnTapBackを設定
ss_1026.png


・画面を開く処理
メニューにボタンを追加し、そのボタンのOnClickに作成し画面のOpenFromMainGameを設定。
ss_1027.png


これで大まかにははできると思いますので、
あとは、以下のパラメーターをどうUIに反映させるかの部分を、自分のゲームの仕様に合わせてアレンジしていってください

//好感度を取得してバーに反映
var v = Engine.Param.GetParameterInt("好感度");
if(paramBar) paramBar.fillAmount = v / 100.0f;  //好感度は0~100の範囲

//好感度の数値をテキストに設定
if(paramText) paramText.text = v.ToString();

>2
この場合は画面の遷移処理が必要ないので、UguiViewを継承せずにUpdateなどでパラメーターを監視して、UIに反映させるプログラムを書く形になります。
UIの表示非表示のオンオフフラグなどを持たせたい場合は、コンフィグ画面にそのオンオフ切り替え用ボタンを追加して、フラグと連動させるプログラムを追加する必要があります。





2024年11月13日水曜日 20:26:14 UTC+9 genshi okinawa:

genshi okinawa

unread,
Nov 14, 2024, 5:40:43 AM11/14/24
to 宴ユーザーグループ
回答およびサンプルプログラムありがとうございます!
いただいたアドバイスを元に取り組んでみようと思います!

2024年11月14日木曜日 2:18:18 UTC+9 マッドネスラボ:

genshi okinawa

unread,
Feb 10, 2025, 9:55:27 AMFeb 10
to 宴ユーザーグループ
開発中のゲームの更新タイミングになったので、教えていただいた方法で以下のゲームの進行度...

ノーマルの進行度:LabelはNH_point、TypeはInt、Valueは0で最大取得値は24
ハードの進行度:LabelはHH_point、TypeはInt、Valueは0で最大取得値は16
エンディングの進行度:LabelはED_point、TypeはInt(これだけFileTypeはSystem)、Valueは0で最大取得値は2

...を確認できる画面にトライしてみました。

バーの増減とテキストのパーセンテージが連動して表示できないか色々とやってみたのですが、
バーが最初から埋まっている且つマウスドラッグで動かせてしまい各種pointに連動させる解決方法が分からなかったり、
テキストはパーセンテージではなくそのままの値で表示になりその解決方法が分からなかったりと、
どうにも自分での解決は難しそうです...。


2024年11月14日木曜日 2:18:18 UTC+9 マッドネスラボ:
プロジェクト固有のUI画面は、レイアウトだけならUnityのデフォルトのUIシステム(uGUI)で作成可能ですが、

マッドネスラボ

unread,
Feb 10, 2025, 11:46:37 AMFeb 10
to 宴ユーザーグループ
UnityでのUIの基本的な実装方法に関しては、Unityのドキュメントやインターネットを調べてみてください。

>バーが最初から埋まっている且つマウスドラッグで動かせてしまい
おそらく、UnityのSilderというのを使っているのだと思います。
宴のテンプレートUIですと、コンフィグ画面等で使用しているのですが、これは入力に反応させるための機能がついてますので、不要であればSilderコンポーネントを削除してください。
コンポーネントをつけたままの必要があるのであれば
interactiveをオフにすると、入力に反応しなくなります。
valueで、最初の値が決まりますでので0等にするか、表示の開始時に現在の値を読み込むようにしてください。


>テキストはパーセンテージではなくそのままの値で表示になりその解決方法が分からなかったりと
パーセンテージで表示するのであれば

現在値/最大値の数字を求めて
float percetage = Value/最大値;

小数点以下を考慮しないなら、次のように
int percentageInt = (int)(percentage * 100);
 Text.text = $"{percentageInt}%";

小数点以下の数字を表示するなら次のようにしてください。(P1の1の部分が小数点以下の桁数で、0も指定できます)
 Text.text =  percetage.ToString("P1");

この辺は基本的なC#の使い方なので、インターネットで検索してみたりChatGPTで調べてみると詳しい書き方がでてくると思います。




2025年2月10日月曜日 23:55:27 UTC+9 genshi okinawa:

マッドネスラボ

unread,
Feb 10, 2025, 11:48:59 AMFeb 10
to 宴ユーザーグループ
float percetage = Value/最大値;

float percetage = 1.0f*Value/最大値;

2025年2月11日火曜日 1:46:37 UTC+9 マッドネスラボ:

genshi okinawa

unread,
Feb 10, 2025, 10:23:59 PMFeb 10
to 宴ユーザーグループ
返信ありがとうございます。
CHatGPTに聞いてみたりなどして、パーセント表示にしたりバーが連動するようになど実装できました!

以下、実装で使ったコードです。
using UnityEngine;
using UnityEngine.UI;
using UtageExtensions;
using System.Collections;
using TMPro;
using Utage;

namespace Utage
{

    /// カスタムUI画面のサンプル
    public class GameProgressUiView : UguiView

    {
        //ADVエンジン
        public AdvEngine Engine => this.GetAdvEngineCacheFindIfMissing(ref engine);
        [SerializeField] protected AdvEngine engine;

        //メインゲーム画面
        public UtageUguiMainGame mainGame;

        public virtual bool IsInit { get; set; }


        [SerializeField] Image normalBar;               //ノーマル進行度(NH_point)のバー
        [SerializeField] TextMeshProUGUI normalText;    //ノーマル進行度(NH_point)のテキスト
        [SerializeField] Image hardBar;                 //ハード進行度(HH_point)のバー
        [SerializeField] TextMeshProUGUI hardText;      //ハード進行度(HH_point)のテキスト
        [SerializeField] Image endingBar;               //エンディング進行度(ED_point)のバー
        [SerializeField] TextMeshProUGUI endingText;    //エンディング進行度(ED_point)のテキスト



        /// メインゲーム画面からこの画面を開く
        public void OpenFromMainGame()
        {
            //メインゲーム画面を閉じる
            mainGame.Close();
            //この画面を開く
            this.Open(mainGame);
        }

        /// オープンしたときに呼ばれる
        protected virtual void OnOpen()
        {
            IsInit = false;
            StartCoroutine(CoWaitOpen());
        }


        //起動待ちしてから開く
        protected virtual IEnumerator CoWaitOpen()
        {
            while (Engine.IsWaitBootLoading) yield break;

            //以下に画面の初期化処理を書く
            var NH = Engine.Param.GetParameterInt("NH_point");          //NH_pointを取得して変数NHとする
            float percentageNH = (NH / 24.0f) * 100;                    // 0~24 を 0~100% に変換
            if (normalBar) normalBar.fillAmount = NH / 24.0f;           // 進捗バーも 0~1 の範囲で調整
            if (normalText) normalText.text = $"{percentageNH:F1}%";    // 小数点1桁まで表示 (例: "75.0%")

            var HH = Engine.Param.GetParameterInt("HH_point");          //HH_pointを取得して変数HHとする
            float percentageHH = (HH / 16.0f) * 100;                    // 0~16 を 0~100% に変換
            if (hardBar) hardBar.fillAmount = HH / 16.0f;               // 進捗バーも 0~1 の範囲で調整
            if (hardText) hardText.text = $"{percentageHH:F1}%";        // 小数点1桁まで表示 (例: "75.0%")

            var ED = Engine.Param.GetParameterInt("ED_point");          //ED_pointを取得して変数EDとする
            float percentageED = (ED / 2.0f) * 100;                     // 0~2 を 0~100% に変換
            if (endingBar) endingBar.fillAmount = ED / 2.0f;            // 進捗バーも 0~1 の範囲で調整
            if (endingText) endingText.text = $"{percentageED:F1}%";    // 小数点1桁まで表示 (例: "75.0%")


        }

        protected virtual void Update()
        {
            //右クリックで戻る
            if (IsInit && InputUtil.IsInputGuiClose())
            {
                Back();
            }
        }
    }
}


ただ、呼び出すためのボタンも追加しそれに関連付けてゲーム進行度画面を呼び出せるようになったのですが、
コンフィグ画面から複製して利用している「もどるボタン(Button-Back)」をクリックすれば画面から抜け出せるものの、
右クリックで抜け出せなくなりました。
コードの最後に右クリックで戻る処理が入っているので他の画面同様戻れると思われますが、これは何が原因でしょうか?


2025年2月11日火曜日 1:48:59 UTC+9 マッドネスラボ:

マッドネスラボ

unread,
Feb 11, 2025, 4:34:00 AMFeb 11
to 宴ユーザーグループ
IsInitがfalseのままで、初期化済みフラグが立っていないので、「 if (IsInit && InputUtil.IsInputGuiClose())」の判定が成功していません。

以下のようにして、起動終わって初期化の処理を書く段階で、IsInit をtrueにしてください。

       //起動待ちしてから開く
        protected virtual IEnumerator CoWaitOpen()
        {
            while (Engine.IsWaitBootLoading) yield break;

             IsInit = true;
            //以下に画面の初期化処理を書く


2025年2月11日火曜日 12:23:59 UTC+9 genshi okinawa:

genshi okinawa

unread,
Feb 11, 2025, 4:47:29 AMFeb 11
to 宴ユーザーグループ
ご教授いただいたコードを実装して無事に動作するようになりました。
これでもっとゲーム体験を良く出来そうです!

色々とご対応いただきありがとうございました!

2025年2月11日火曜日 18:34:00 UTC+9 マッドネスラボ:
Reply all
Reply to author
Forward
0 new messages