GUI
Naninovelには、タイトル(メイン)メニュー、ゲーム設定、セーブ・ロードメニュー、バックログパネル、CGギャラリー、ヒントなど、複数の組み込みUIが付属しています。
組み込みUIはそれぞれ無効化またはカスタマイズできます。詳細については、UIのカスタマイズ ガイドを参照してください。
アダプティブUIレイアウト
すべての組み込みUIは、アダプティブレイアウトで実装されています。これにより、画面の解像度に関係なく、すべてのプラットフォームでUIを使用できるようになります。
UIが画面の解像度やアスペクト比にどのように適応するかを変更したい場合、またはカスタムUIを作成していてアダプティブレイアウトを構成したい場合は、利用可能なオプションについてuGUIに関するUnityのガイドやチュートリアル(例:複数の解像度に対応するUIの設計)を参照してください。
UIの切り替え
UI切り替え機能により、ユーザーはゲーム内UI全体を非表示または表示にできます。
ToggleUI 入力(スタンドアロン入力モジュールのデフォルトでは Space キー)をアクティブにするか、コントロールパネルの HIDE ボタンを使用してUIを表示/非表示にします。
UIが非表示になっている場合、Continue 入力または画面のクリック/タッチでもUIの非表示が解除されます。
UIのカスタマイズ
UIのカスタマイズにより、カスタムUIを追加したり、タイトルメニュー、設定メニュー、プリンターバックログなどの組み込みUI要素を変更または完全に置き換えたりできます。
テキストプリンターと選択肢ハンドラーはアクターインターフェイスを介して実装されており、異なる方法でカスタマイズされることに注意してください。詳細については、対応するドキュメント(テキストプリンター、選択肢ハンドラー)を参照してください。
WARNING
カスタムUIを作成したり、既存のものを変更したりする前に、UnityのUIシステム(uGUI)に精通していることを確認してください。以下にUIカスタマイズのビデオチュートリアルとサンプルプロジェクトがありますが、Unityの組み込みツールに関する追加のガイダンスは提供できません。詳細については、サポートページ を参照してください。
カスタムUIを追加したり、組み込みのUIを変更(無効化)したりするには、Naninovel -> Resources -> UI エディタメニューからアクセスできるUIリソースマネージャーを使用します。
エンジンが初期化されると、リソースマネージャーで割り当てられたすべてのUIプレハブがインスタンス化されます。
NOTE
一部の機能(例:UIの切り替え)では、UIを Screen Space - Camera モードでレンダリングする必要があります。互換性を最大限に高めるには、カスタムUIで正しいレンダリングモードが選択されており、Render Cameraフィールドが空であることを確認してください(UIマネージャーが自動的にカメラを割り当てます)。
リソースマネージャーにリストされているUIを表示または非表示にするには、それぞれ @showUI および @hideUI コマンドを使用します。
カスタムUIの追加
新しいカスタムUIを追加するには、Create -> Naninovel -> Custom UI アセットコンテキストメニューからプレハブを作成し、UIリソースリストに追加します。その後、エンジンの初期化時に他のUIプレハブと一緒にインスタンス化されます。
次のビデオチュートリアルでは、特別な表示および非表示アニメーションを備えたカスタムカレンダーUIを追加する方法を示します。カレンダーは カスタム変数 に基づいて日付を表示します。これはシナリオスクリプトを介して変更でき、ゲームとともに保存されます。カレンダーは変数が変更されると自動的に更新されます。すべてC#スクリプトなしで実現されます。
EXAMPLE
上記のビデオチュートリアルで示されているUnityプロジェクトは、UIサンプル にあります。また、スクロールビューとWebリンクを備えたクレジット画面の追加、パーティクルエフェクト付きの選択肢ボタン、テキストプリンターでの絵文字の使用、チャットプリンターへのタイムスタンプの追加などの例も含まれています。
EXAMPLE
グリッドレイアウト、ページネーション、ドラッグアンドドロップウィンドウを備えたカスタムインベントリUIを追加する別のより高度な例は、インベントリサンプル にあります。具体的には、UI関連のスクリプトは Scripts/Runtime/Inventory/UI に、プレハブは Content/UI/Inventory ディレクトリに保存されています。
コンテキストメニューから新しいカスタムUIプレハブを作成すると、プレハブのルートオブジェクトに Custom UI コンポーネントがアタッチされます。このコンポーネント(または、IManagedUI インターフェイスを実装しているという事実)は、プレハブをエンジンによってUIとして認識させるために不可欠です。
Disable Interaction プロパティを使用すると、可視性に関係なく、UIとの対話を永続的に無効にできます。同じゲームオブジェクトに Canvas Group コンポーネントが必要です。
Visible On Awake が有効になっている場合、UIはインスタンス化されるとすぐに(エンジンの初期化直後)表示され、その逆も同様です。
Control Opacity が有効になっており、Canvas Group コンポーネントが同じゲームオブジェクトにアタッチされている場合、Canvas Group の Alpha プロパティは、UI要素の現在の可視性状態と同期して変更されます。その後、Fade Time は、不透明度フェードアニメーションの期間(秒単位)を制御します。カスタムエフェクト(例:フェードではなくスライドアニメーション)を実装する場合は、Control Opacity を無効にし、On Show および On Hide Unityイベントを使用して可視性の変更に反応します。
UIのゲームパッドまたはキーボードナビゲーションをサポートする場合は、対話可能なゲームオブジェクト(例:Button)を Focus Object プロパティに割り当てます。このオブジェクトは、UIが表示されると自動的にフォーカスされ、ゲームパッドやキーボードを使用して他の対話可能なオブジェクトをナビゲートできるようになります。ナビゲーション動作の設定方法の詳細については、Unityの UIナビゲーションに関するガイド を参照してください。
Focus Object が割り当てられている場合、Focus Mode プロパティを使用して、オブジェクトにフォーカスするタイミングを選択できます。Visibility モードは、UIが表示された直後にフォーカスしますが、Navigation は、プレイヤーがゲームパッド(左スティックまたはDパッド)またはキーボード(矢印キー)でナビゲーションキーをアクティブにするまでフォーカスを延期します。
On Show および On Hide Unityイベントを使用すると、カスタムハンドラーをフックしてUIの可視性の変更に反応できます。たとえば、Animator トリガーをフックして、UIが表示されたときにカスタムアニメーションを再生したり、その逆を行ったりすることができます。
Hide On Load が有効になっている場合、エンジンがロード操作を開始すると、UIは自動的に非表示になります。これは通常、別のシナリオスクリプトをロードしたり、タイトルメニューに終了したりするときに発生します。
Save Visibility State を有効にすると、UIの可視性状態が永続的になるため、プレイヤーが保存されたゲームをロードすると、UIはゲームが保存されたときと同じ状態(表示または非表示)になります。
Block Input When Visible を使用すると、UIが表示されている間、入力処理 を無効にできます。これは、プレイヤーがUIと対話している間にさまざまなホットキー(UIの非表示、テキストの続行など)を使用するのを防ぐのに役立ちます。Allowed Samplers を使用すると、ブロックされた入力に例外を追加できます。たとえば、リストに ToggleUI 入力名を追加して、プレイヤーがUIを切り替えられるようにしつつ、他の入力のアクティブ化を防ぐことができます。
Modal UI を有効にすると、UIが表示されている間、他のすべてのUIは対話を無視します。これは Block Input When Visible に似ていますが、直接的な入力処理ではなく、イベントベースの対話(マウスクリック、タッチ、UIナビゲーション)に影響します。
カスタムUIを作成するとき、他にもいくつかのコンポーネントがデフォルトで追加されます。
Canvas Groupは、不透明度を変更することでUIを非表示にしたり(Fade Durationで制御)、必要に応じてUIがユーザーインタラクションを無視したりできるようにします。Canvas Scalerは、現在のディスプレイ解像度に合わせてレイアウトを自動的にスケーリングします。Graphic Raycasterにより、プレイヤーはUIキャンバス内のボタンやその他の対話可能な要素と対話できます。
上記のコンポーネントは、必要に応じて自由に変更または削除できます。
フォントの変更
ゲーム設定で設定されたフォントとテキストサイズの変更の影響を受けるテキスト要素を指定するには、Custom UI および派生コンポーネントの Font Change Configuration プロパティを使用します。
構成リストの各要素には、次のプロパティがあります。
| プロパティ | 説明 |
|---|---|
| Object | フォント変更の影響を受けるべきテキストコンポーネントを持つゲームオブジェクト。 |
| Include Children | コンテナの子ゲームオブジェクトに影響を与えるかどうか。無効にすると、指定されたコンテナオブジェクトのテキストコンポーネントのみが影響を受けます。 |
| Allow Font Change | テキストコンポーネントのフォントの変更を許可するかどうか。 |
| Allow Font Size Change | テキストコンポーネントのフォントサイズの変更を許可するかどうか。 |
| Font Sizes | テキストコンポーネントに適用する実際のフォントサイズ。リスト内の各要素は、フォントサイズドロップダウンリストのインデックスに対応します:Small -> 0, Default -> 1, Large -> 2, Extra Large -> 3(SettingsUIを介して変更可能)。デフォルト値は無視され、プレハブで最初に設定されたフォントサイズが代わりに使用されます。 |
Font Sizes アセットは、Create -> Naninovel -> Font Sizes アセットコンテキストメニューから作成できます。このアセットを使用して、複数のUI間で共通のフォントサイズを共有します。
ゲーム設定メニューで使用可能な特定のテキストフォントオプションは、UI構成メニューで設定されます。
Font Resource は、TMPro Font アセットへの リソースパス を指定する必要があります。デフォルトでは、NaninovelはAddressableおよびプロジェクトリソースプロバイダーを使用してフォントアセットを探します。動作を変更するには Font Loader を使用します。デフォルト設定を使用しながらフォントアセットを公開する最も簡単な方法は、フォントを Resources/Naninovel/Fonts フォルダ内に配置することです。その後、フォントのアセット名をフォントリソースパスとして使用できます。フォントの作成と構成方法の詳細については、UnityのTextMesh Proドキュメントを参照してください。
Custom UI オブジェクトの外部(たとえば、選択肢ハンドラーボタンのプレハブ上)でフォントを変更するには、Font Changer コンポーネントを使用します。これには同じフォント構成オプションがあり、任意のゲームオブジェクトに適用できます。
組み込みUIの無効化
組み込みUIを無効にするには、UIリソースリストから対応するレコードを削除します。そうすると、エンジンの初期化時にプレハブがインスタンス化されなくなります。
組み込みUIの変更
既存の組み込み(デフォルト)UIプレハブを変更したい場合は、Naninovel/Prefabs/DefaultUI パッケージフォルダにあります。
可能ですが、パッケージの更新時の問題を防ぐために、組み込みのプレハブを直接編集することは控えてください。代わりに、Create -> Naninovel -> Default UI -> ... アセットコンテキストメニューからテンプレートから新しいプレハブを作成するか、変更したいプレハブを手動で複製(Ctrl/Cmd+D)してパッケージフォルダの外に移動します。次に、作成/変更したプレハブをUIリソースマネージャーの既存のレコード(Object フィールド)に割り当てます。
次のビデオチュートリアルでは、組み込みのタイトル(メイン)メニューをオーバーライドする方法を学ぶことができます。また、タイトルスクリプトを使用して、タイトルメニューに入るときに背景と特殊効果を追加する方法も示します。これを実現するためにC#スクリプトは使用されません。
EXAMPLE
上記のビデオチュートリアルで示されているUnityプロジェクトは、UIサンプル で入手できます。
ゼロから新しいプレハブを作成する場合は、オーバーライドするUIのインターフェイスを実装するコンポーネントをアタッチしていることを確認してください。このコンポーネントは、プレハブのルートオブジェクトにアタッチする必要があります。
すべてのUIインターフェイスは Naninovel.UI 名前空間の下に保存されています。
| インターフェイス | 対応するUI |
|---|---|
| IBacklogUI | プリンターバックログ。 |
| ILoadingUI | ゲームのロード時に表示されるパネル。 |
| IMovieUI | ムービーをホストするために使用されるUI。 |
| ISaveLoadUI | ゲームの保存とロードに使用されるパネル。 |
| ISceneTransitionUI | シーンのトランジション(@trans コマンド)を処理します。 |
| ISettingsUI | ゲーム設定の変更に使用されるパネル。 |
| ITitleUI | ゲームのタイトル(メイン)メニュー。 |
| IExternalScriptsUI | 外部スクリプトブラウザUI(コミュニティMod機能)。 |
| IVariableInputUI | 任意のテキストをカスタム状態変数に割り当てるための入力フォーム(@input コマンドで使用)。 |
| IConfirmationUI | 重要なコマンドを確認するために使用されるUIパネル(例:タイトルメニューに終了する場合や、保存されたゲームスロットを削除する場合)。 |
| ICGGalleryUI | アンロック可能な CGギャラリー アイテムブラウザ。 |
| ITipsUI | アンロック可能な ヒント ブラウザ。 |
| IRollbackUI | 状態ロールバック機能のインジケーター。 |
| IContinueInputUI | UIスタックの一番下に配置され、クリックまたはタッチされたときに continue input トリガーをアクティブにするために使用される全画面非表示UIレイヤー。 |
| IToastUI | 自動非表示ポップアップ通知(別名「トースト」)用の汎用UI。@toast コマンドを使用してシナリオスクリプトから使用できます。 |
UIが可視性(起動時に表示、フェード時間)と対話オプション(対話の無効化)をサポートするには、同じオブジェクトに Canvas Group コンポーネントもアタッチします。
C#スクリプトに問題がなく、UIのデフォルトロジックをオーバーライドしたい場合は、新しいコンポーネントを作成 し、IManagedUI インターフェイスを実装(すべてのインターフェイス要件を満たすために CustomUI からコンポーネントを継承することをお勧めします)し、代わりに作成したカスタムコンポーネントをアタッチします。組み込みUIのリファレンス実装については、Naninovel/Runtime/UI フォルダを確認してください。以下は、カスタムUIコンポーネントの最小限の実装例です。
using Naninovel.UI;
public class MyCustomUI : CustomUI
{
}Unityイベントでのスクリプト再生
カスタムUIを作成する場合、特定のイベント(ボタンクリック など)に応じてコマンドを実行したり、特定のシナリオスクリプトの再生を開始したりしたい場合があります。
Play Script コンポーネントをゲームオブジェクトに追加し、既存のシナリオスクリプトを選択するか、テキストエリアフィールドにコマンドを直接書き込みます。次に、別のコンポーネントから Unityイベント をルーティングして、Play Script コンポーネントの Play() メソッドを呼び出します。イベントがプレイモードでトリガーされると、スクリプトが実行されます。以下の例では、ボタンがクリックされたときにカスタムUIを非表示にします。
{arg} 式を使用して、スクリプトテキスト内のUnityイベント引数を参照することもできます。サポートされている引数の型は、string、int、float、および bool です。以下の例は、ブール値のUnityイベントが true の場合にカメラシェイクを実行して効果音を再生し、false の場合に背景音楽を再生する方法を示しています。
EXAMPLE
UIサンプル で Play Script コンポーネントの使用例を見つけることができます。このコンポーネントは、"Content/UI/Calendar" カスタムUIプレハブ内の "CloseButton" ゲームオブジェクトで使用されています。
UI Toolkit
Unityの新しいUIオーサリングソリューション — UI Toolkit — はそのままではサポートされていませんが、IManagedUI インターフェイスを実装するアダプターを使用してNaninovelで使用できます。そのようなアダプターの例は、UIサンプル にあります。
WARNING
UI Toolkitはまだ開発の初期段階にあり、デフォルトのUIソリューション(uGUI)と比較していくつかの機能が不足しています。上級開発者であり、関連するすべての問題を解決する準備ができていない限り、使用することはお勧めしません。NaninovelでのUI Toolkitの使用に関するサポートやガイダンスを提供することはできませんのでご注意ください。