TIPS画面での相談＆要望

[Gmax]

・宴のバージョン：4.1.8

・UnityのバージョンとOS：2022.3.20f1 Windows

・Unityの習熟度：初心者（コードは書けません）

-------------------------------
いつもお世話になっております。

添付画像のようなTIPS画面を実装したいと考えているのですが、
どのようにすれば実現できるのかわからず、ご相談させていただきました。

要点としては、以下の通りです。
・TIPS項目をカテゴリで分類して管理したい。

　→エクセルで各TIPS項目にカテゴリを入力するカラムを設定することを想定しています。

・TIPSリストとTIPS詳細を１つの画面でまとめたい。

目的としては、プレイヤーが推理を行う際の確認資料としてTIPS画面を活用してもらいたいと考えており、そのためにも目的のTIPS項目にできるだけスムーズにアクセスできるようにしたいと思っています。

厚かましいお願いとは重々承知しておりますが、どうしても実現したいと思い、ダメ元でご相談させていただきました。

何卒宜しくお願いいたします。

[マッドネスラボ]

可能ではあるのですが、どちらかというと宴そのものよりも、

UnityのUI画面制御をプログラムを含めて独自に開発するという話になるかと思います。

カテゴリの追加自体は、「TIPSシートに任意の名前の行を追加し、追加データを設定する」にあるように

https://madnesslabo.net/utage/?page_id=13217#TIPSUI

エクセルに任意の列を追加して、下記のようなプログラムで読み取るだけです。

          var category = tipsData.RowData.ParseCellOptional<string>("カテゴリ", "");

>TIPS項目をカテゴリで分類して管理したい。

>TIPSリストとTIPS詳細を１つの画面でまとめたい。

画面構成そのものやUI遷移自体が変わるので、拡張イベントだけでは行うのは難しく、

独自のUIコンポーネントを作成する必要があります。

デフォルトのTIPSのUIは、　Assets/Utage/Scripts/ADV/Custom/Tips/以下の4つのコンポーネントとなっています。

AdvUguiTipsList、AdvUguiTipsDetail、AdvUguiTipsListButton、AdvUguiTipsUiController

これら自体は使わずに、中身をアレンジした新しいコンポーネントを作る必要があります。

手順としては次のようになるかと思います。

• AdvUguiTipsListButtonはTISPのサムネイルを表示するのではないので削除。
  • 代わりに新しいボタン制御コンポーネントとプレハブを作成する
    • カテゴリ名のボタン
      • New表示機能つき
    • カテゴリ内の各TIPS名のボタン
      • New表示機能つき
• AdvUguiTipsList、AdvUguiTipsDetail の代わりに 、 統合して一つの画面のコンポーネントを作成する
  • カテゴリのボタン一覧を表示する機能
  • 選択中のカテゴリに合わせてTIPS名の一覧を表示できるようにする
  • 選択中のTIPに合わせて、TIPSの詳細表示をする（ AdvUguiTipsDetail を参考に ）
  • 選択中の～に合わせて、というのは
    • Buttnコンポーネント（Unity公式）ではなくToggelコンポーネント （Unity公式）  を使うほうが楽
    • ギャラリー画面などでは、UguiToggleGroupIndexed（宴拡張）というのを使って処理をしやすくしています。
• 上記のコンポーネントに合わせてUI画面をつくる。
• AdvUguiTipsUiControllerの代わりにUI遷移の制御を行うコンポーネントを作成する
  • シーン内のTIPS一覧画面を開くボタンや、TIPSテキストをクリックしたときの画面遷移などを設定しなおす。
  • これは、 AdvUguiTipsUiController の代わりに自作のコンポーネントを呼ぶようにするだけなので、既存のTIPSドキュメントのやり方とさほど変わらないかと思います。
  • ただし、TIPS画面を開いたときに指定したTIPSのカテゴリとボタンが選択状態にしてそのTIPSを表示する、という処理をTIPS画面コンポーネントに作っておく必要があります。

という形になります。

また、プログラム以外にも、Unityのシーン上でUI画面をスクロール機能などを使って作る必要があります。

たとえば、カテゴリーの数が増えてしまうと、画面内に収まらずにカテゴリー一覧を横スクロール可能にすることも想定する必要があります。

ローカライズを考えるなら、英語圏のテキストは漢字圏のテキストよりも長くなりがちなためボタンの横幅を広くしておく必要があり、横に数が増えそうなボタンを並べるのは注意が必要だったりします。

TIPS機能自体に改造は必要なくUIだけの変更なので、宴自体のソースコードを書き変える必要はなく実装可能だと思います。

ただ、やはりプログラムやUnityのUI実装のスキルが結構必要になってしまうので、難しいかもしれません。

ひとまず、サンプルプログラムとひな形となるようなプレハブを作ってみますので、しばらくお待ちください。

参考までに「カテゴリ一覧の横スクロールが必要か」を教えていただけるでしょうか。

2025年4月8日火曜日 18:36:12 UTC+9 Gmax:

[Gmax]

色々とご教授ありがとうございます！
カテゴリ一覧の横スクロールはあるとありがたいです。

2025年4月9日水曜日 0:01:58 UTC+9 マッドネスラボ:

[マッドネスラボ]

TIPS画面のリスト表示と詳細表示を統合した画面のサンプルを作成しましたので、添付のパッケージファイルを適用してください。

（ダウンロードした添付ファイルの拡張子が *. gzになっている場合は、*.unitypackageに変えてからプロジェクトに適用してください）
この変更は、次回の宴のアップデートにも反映させる予定です。

パッケージを適用すると、

Assets/Utage/Sample/Scripts/TipsMasterDetail/　フォルダ以下に、サンプルスクリプトとひな形となるプレハブが追加されます。

追加されたコンポーネントは、基本的にはサンプルなのでコピペして自作コンポーネントにしてアレンジしたものと入れ替えるか、そのまま使用するかはお任せします。

●TIP画面の作成

SampleTipsMasterDetail.prefab　がUI画面用のプレハブになります。

宴のサンプルのプレハブを直接編集してしまうと宴をアップデートすると元に戻ってしまうため、独自に扱えるようにする必要があります。

・シーン内のCanvas-AdvUi以下にドラッグアンドドロップして、インスタンス化（シーン内のGameObjectとして実体化）

・シーン内に作成されたSampleTipsMasterDetailオブジェクトを右クリックして、「Prefab>Unpack Completry」にして、プレハブとのつながりを解除して、普通のGameObjectにする。

SampleTipsMasterDetail　>　Scroll View-NameButtons　>　Viewport　>　Content-NameButtons　>　TipsNameButtonを

ProjectWindowの自分のプロジェクトフォルダ以下に、ドラッグアンドドロップしてプレハブ化し（プレハブ化すると青くなります）

そのプレハブを、SampleUiTipsMasterDetailコンポーネントの「Prefab Tips Button」に設定してください。

サンプルTIPS画面のフォントやSE、画像はサンプルシーンのものを使っているため、独自プロジェクトのものに入れ替えてください。

参考　https://madnesslabo.net/utage/?page_id=13217#UI

●TIP画面への遷移処理を設定しなおし

AdvEngine>TipsManagerの「AdvUguiTipsUiController」を削除してSampleUiTipsMasterDetailUiControllerに入れ替え、

MainGame、Title、TipsMasterDetailの各オブジェクトを設定してください。

ドキュメント内の、メッセージウィンドウやタイトル画面などからTIPS画面を開く処理を新しく設定しなおします。

AdvUguiTipsUiControllerを使っていたところを、上記のSampleUiTipsMasterDetailUiController経由の処理に変えてください。

TIPS機能 | Unity用ビジュアルノベルツール「宴」

●TIPSデータの設定

エクセル上でのカテゴリの追加は、

Category列を追加して、TIPSごとに任意のIDを割り振ってください。

シーン内に追加したTIPS画面の、Scroll View-CategoryButtons以下が、カテゴリボタンの一覧になります。

デフォルトだと11個のボタンがありますが、設定したカテゴリの数に応じて手動で増やしたり減らしたりしてください。

また、各ボタンの「SampleUiTipsMasterDetailCategoryButton」の「Category Id」には、「カテゴリID1」～「カテゴリID11」が割り振られていますが、これも使用する自作のカテゴリに合わせて設定してください。

表示テキストは、カテゴリIDがそのままが表示されるのではなく、各ボタンのLabelオブジェクトのテキストのほうが表示されるので、これも任意に設定してください。

完成した画面としては以下のような形になるかと思います。

2025年4月9日水曜日 7:05:19 UTC+9 Gmax:

[Gmax]

ご教授いただきありがとうございます。
指示通りに実装したところ、こちらの環境でも実現できました！
本当にありがとうございます！

ただ一点だけこちらで解決できなかった点があり、質問させてください。

添付画像のように挿入した画像が引き伸ばされてしまうのですが、

この画像が引き伸ばされないようにするには、どこをいじればよいでしょうか？

お手数をおかけしてしまい、大変申し訳ございません…。

2025年4月9日水曜日 19:10:05 UTC+9 マッドネスラボ:

[マッドネスラボ]

該当するオブジェクトは、添付画像のように、Panel-Detail > Scroll View > View Port > Content > Imageになります。

TIPS画面のように、縦にスクロールする画面内で、可変長のテキストなどのように縦幅が変わるものがある場合、

一緒にスクロールする画像などの縦サイズは、通常のHeightではなく、PrefedHeightで設定する形になります。

なので、PrefedHeightで縦幅を調整し、それに合わせた比率でWitdhのほうを設定してください。

PrefedHeightのあたりは、Unity公式のUI機能を使っている部分になります。

（正直非常にわかりづらいのですが、知る限りはそうしないとうまくスクロール画面を作ることができません）

ただ、この場合縦横比があらかじめ固定されてしまうため、表示する画像によって縦横比がバラバラな場合は拡張しない限りはちゃんと表示できないです。

2025年4月10日木曜日 11:59:04 UTC+9 Gmax:

[マッドネスラボ]

上記オブジェクトの「AdvUguiLoadGraphicFile」の、SizeSettingを「TextureSize」にすると、横のサイズは元のテクスチャのサイズになります。

なので、画像によって縦横比が変わる可能性がある場合は、

・PreferedHeightに設定した数字に合わせて元の画像の縦サイズを統一する。

・SizeSettingを「TextureSize」にする

とすれば、縦横比が変わっても表示されるようになると思います。

2025年4月10日木曜日 13:11:16 UTC+9 マッドネスラボ:

[マッドネスラボ]

逆に、横幅を固定して縦幅を自動的に増減させたい場合は、少し拡張が必要になりますのでご連絡ください。

2025年4月10日木曜日 13:30:07 UTC+9 マッドネスラボ:

[Gmax]

ご教授いただきありがとうございます。
無事に画像サイズの変更ができました！
本格的にUIレイアウトの作成を始めた際に、もし困ったことがあれば、またご相談させてください。  
本当にありがとうございました！

2025年4月10日木曜日 17:00:04 UTC+9 マッドネスラボ: