Simple UI リファレンス
Simple UI とは
Simple UI は、タイトル画面、セーブロード機能、コンフィグ機能、ダイアログ機能等を備えた高機能マクロライブラリです。
Simple UI を導入するだけで、多くのノベルゲームに必要となる機能を簡単に実装することができます。内部で使用されている画像を置き換えたりすることで、挙動や見た目をカスタマイズすることもできます。
Simple UI は SDK に同梱されています。このリファレンスでは、SDK に同梱されている Simple UI の仕様を解説します。
Simple UI の使い方
Simple UI はシナリオファイルおよび HTML ファイル、そしてそれらのファイルから読み込まれる画像ファイルなどから構成されています。
バージョン 2.4.1 以降の SDK を使用している場合、SDK に同梱されている template フォルダを使ってコンテンツを作りはじめるだけで、そのコンテンツでは最初から Simple UI を使うことができます。
Simple UI 内部で使用しているプラグインについて
Simple UI ではメニュー画面およびダイアログに htmlOverlay プラグインと ノベルスフィアアシストプラグイン を使用しています。Simple UI を導入することで同時に各プラグインも導入されます。
プラグインについては、 プラグインリファレンス を参照してください。
Simple UI の導入によって使用可能となるマクロ一覧
メニュー画面
| o2ui | |||
| 属性 | 必須 | 値 | 説明 |
| enabled | no | true / false (true) | true にすると右クリックでメニュー画面を開けるようになります。false にすると右クリックでメニュー画面を開けなくなります。 |
| launch_view | no | "info" / "save" / "load" / "config" ("info") | メニュー画面を開いた時に、どの画面を最初に表示するかを指定します。 |
| launch_size | no | "default" / "fixed" ("default") | ノベルの画面サイズに対して、メニュー画面の表示サイズを指定します。"default" にすると、ノベルの画面サイズが変更になった場合に、メニューの表示サイズが自動でリサイズされます。"fixed" にすると、ノベルの画面サイズが変更になった場合も、メニューの表示サイズは固定になります。 |
| launch_image | no | 画像ファイル名 ("information") | メニューの "info" を開いた時に表示される画像を指定します。 |
| launch_image_visible | no | true / false (true) | メニューの "info" を開いた時に表示される画像の可視／不可視を指定します。true を指定すると可視状態になります。false を指定すると不可視状態になります。 |
| automode | no | true / false (true) | true にするとメニュー画面からオートモード機能を利用できるようになります。false にするとメニュー画面からオートモード機能を利用できなくなります。 |
| skipmode | no | true / false (true) | true にするとメニュー画面からスキップモード機能を利用できるようになります。false にするとメニュー画面からスキップモード機能を利用できなくなります。 |
| save | no | true / false (true) | true にするとメニュー画面からセーブ機能を利用できるようになります。false にするとメニュー画面からセーブ機能を利用できなくなります。 |
| load | no | true / false (true) | true にするとメニュー画面からロード機能を利用できるようになります。false にするとメニュー画面からロード機能を利用できなくなります。 |
| config | no | true / false (true) | true にするとメニュー画面から設定機能を利用できるようになります。false にするとメニュー画面から設定機能を利用できなくなります。 |
| backtotitle | no | true / false (true) | true にするとメニュー画面からタイトルに戻る機能を利用できるようになります。false にするとメニュー画面からタイトルに戻る機能を利用できなくなります。 |
| slot | no | 1 〜 28 | セーブ可能なスロット数を設定します。最大値は 28 です。 |
| chspeed_max | no | ミリ秒 | 設定画面で調整できる、文字表示速度の最大値を設定します。 |
| chspeed_min | no | ミリ秒 | 設定画面で調整できる、文字表示速度の最小値を設定します。 |
| automode_max | no | ミリ秒 | 設定画面で調整できる、オートモード時のページ送り速度の最大値を設定します。 |
| automode_min | no | ミリ秒 | 設定画面で調整できる、オートモード時のページ送り速度の最小値を設定します。 |
|
メニュー画面の各種設定を行います。一度変更した設定は保存されます。 なお、このタグが実行されてもメニュー画面は開きません。 メニュー画面を開く場合は、[o2ui_show]タグを使用します。 |
|||
| o2ui_show | |||
| 属性 | 必須 | 値 | 説明 |
| launch_view | no | "info" / "save" / "load" / "config" ("info") | メニュー画面を開いた時に、どの画面を最初に表示するかを設定します。[o2ui]タグとは異なり、設定の保存はされません。 |
|
メニュー画面を表示します。 |
|||
| o2ui_button | |||
| 属性 | 必須 | 値 | 説明 |
| enabled | no | true / false (true) | true にすると、ボタンがクリックができるようになります。false にすると、ボタンがクリックできなくなります。 |
| layer | no | メッセージレイヤ名 ("message1") | ボタンを描画する先のレイヤを指定します。 |
| graphic | no | 画像ファイル名 ("o2ui_sysbutton") | ボタンの画像を指定します。 |
| left | no | ピクセル数 (0) | ボタンを描画する左右位置を指定します。 |
| top | no | ピクセル数 (0) | ボタンを描画する上下位置を指定します。 |
|
メニュー画面を開くためのボタンを作成します。すでに作成されている場合は設定だけを変更します。 ボタンには、4つの画像が横に連結された画像を準備します。画像は novelsphere.js 内部で4等分され、左から順に「通常時の画像」、「クリックされた時の画像」、「オンマウス時の画像」、「クリック不可時の画像」として使用されます。 |
|||
| o2ui_deletebutton | |||
|
[o2ui_button]タグによって作成されたボタンを削除します。 |
| o2ui_slideshow | |||
| 属性 | 必須 | 値 | 説明 |
| prefix | yes | 接頭辞となるファイル名 | 接頭辞を指定します。デフォルトでは何も接頭辞が付かないことになっています。 |
| time | no | ミリ秒 (1000) | スライド一枚あたりのトランジションにかける時間を指定します。 |
|
指定した接頭辞から始まる一連の画像を順番に表示します。通常、連番画像を使用します。 |
|||
| o2ui_reset_load | |||
| 属性 | 必須 | 値 | 説明 |
| clear | no | "black" / "white" ("black") | 画面をリセットする際の遷移画像を指定します。実際に読み込まれるのは、ここで指定した名前の前に'o2ui_'という接頭辞がついた画像ファイルです。 |
| method | no | "universal" / "crossfade" ("crossfade") | トランジションの方法を指定します。"crossfade" を指定するとクロスフェードトランジションが、"universal" を指定するとユニバーサルトランジションが行われます。 |
| rule | method=universalの時のみ指定可 | 画像ファイル名 | ユニバーサルトランジションのルール画像を指定します。 |
| vague | method=universalの時のみ指定可 | あいまいさ (64) | ユニバーサルトランジションに適用するあいまいさを 0 以上の数値で指定します。 |
| time | no | ミリ秒 (2000) | トランジションにかける時間を指定します。 |
| place | no | スロット番号 (0) | ロードを行うスロット番号を指定します。スロット番号には 0 以上の整数を指定できます。 |
|
画面をリセット後、指定したセーブデータをロードします。 |
|||
タイトル画面
| o2ui_title | |||
| 属性 | 必須 | 値 | 説明 |
| enabled | no | true / false (true) | タイトル画面の有効／無効を設定します。true にするとタイトル画面機能が利用できます。false にするとタイトル画面機能は利用できなくなります。 |
| storage | no | シナリオファイル名 | タイトル画面で「はじめから」を選択した時にジャンプするシナリオファイル名を指定します。省略するとジャンプ先は現在のファイル内に存在するとみなされます。 |
| target | no | ラベル名 | タイトル画面で「はじめから」を選択した時にジャンプするラベル名を指定します。省略すると storage 属性で指定されたファイルの冒頭へジャンプします。 |
| bg | no | 画像ファイル名 ("titlebg") | タイトル画面の背景画像を指定します。 |
| method | no | "crossfade" / "universal" ("crossfade") | トランジションの方法を指定します。"crossfade" を指定するとクロスフェードトランジションが、"universal" を指定するとユニバーサルトランジションが行われます。 |
| rule | method=universalの時のみ指定可 | 画像ファイル名 | ユニバーサルトランジションのルール画像を指定します。 |
| vague | method=universalの時のみ指定可 | あいまいさ (64) | ユニバーサルトランジションに適用するあいまいさを 0 以上の数値で指定します。 |
| time | no | ミリ秒 (1000) | トランジションにかける時間を指定します。 |
| bgm | no | true / false (true) | タイトル画面で流す BGM の有効／無効を指定します。true にすると bgm_storage 属性で指定された BGM が再生されます。false にするとタイトル画面で BGM は再生されません。 |
| bgm_storage | no | サウンドファイル名 ("titlebgm") | タイトル画面で流す BGM のファイル名を指定します。 |
| loop | no | true / false (true) | true を指定すると、BGM がループ再生されます。false を指定すると、ループ再生されません。 |
| volume | no | 0 〜 100 | BGM の音量を指定します。0 が最小、100 が最大です。 |
| pos_start_x | no | ピクセル数 (100) | タイトル画面の「はじめから」ボタンの X 座標を指定します。 |
| pos_start_y | no | ピクセル数 (240) | タイトル画面の「はじめから」ボタンの Y 座標を指定します。 |
| pos_load_x | no | ピクセル数 (100) | タイトル画面の「ロード」ボタンの X 座標を指定します。 |
| pos_load_y | no | ピクセル数 (360) | タイトル画面の「ロード」ボタンの Y 座標を指定します。 |
| pos_config_x | no | ピクセル数 (100) | タイトル画面の「設定」ボタンの X 座標を指定します。 |
| pos_config_y | no | ピクセル数 (480) | タイトル画面の「設定」ボタンの Y 座標を指定します。 |
| load | no | true / false (true) | タイトル画面の「ロード」ボタンの可視／不可視を指定します。true にするとロードボタンが可視状態になります。false にするとロードボタンが不可視状態になります。 |
| config | no | true / false (true) | タイトル画面の「設定」ボタンの可視／不可視を指定します。true にすると設定ボタンが可視状態になります。false にすると設定ボタンが不可視状態になります。 |
|
タイトル画面の各種設定を行います。一度変更した設定は保存されます。 なお、このタグが実行されてもタイトル画面は開きません。 タイトル画面を開く場合は、[o2ui_title_show]タグを使用します。 |
|||
| o2ui_title_show | |||
| 属性 | 必須 | 値 | 説明 |
| clear_callstack | no | true / false | この属性はコールスタックが存在する場合に使用します。true を指定すると、コールスタックを解除しながらタイトル画面を表示します。false を指定すると通常どおりタイトル画面を表示します。 |
|
タイトル画面を表示します。 |
|||
| o2ui_title_close | |||
| 属性 | 必須 | 値 | 説明 |
| clear | no | "black" / "white" ("black") | 画面をリセットする際の遷移画像を指定します。実際に読み込まれるのは、ここで指定した名前の前に'o2ui_'という接頭辞がついた画像ファイルです。 |
| method | no | "universal" / "crossfade" ("crossfade") | トランジションの方法を指定します。"crossfade" を指定するとクロスフェードトランジションが、"universal" を指定するとユニバーサルトランジションが行われます。 |
| rule | method=universalの時のみ指定可 | 画像ファイル名 | ユニバーサルトランジションのルール画像を指定します。 |
| vague | method=universalの時のみ指定可 | あいまいさ (64) | ユニバーサルトランジションに適用するあいまいさを 0 以上の数値で指定します。 |
| time | no | ミリ秒 (2000) | トランジションにかける時間を指定します。 |
|
タイトル画面を非表示にします。タグ実行の度に属性を記述しないとデフォルト値が設定されます。 |
|||
ダイアログ
| o2dialog | |||
| 属性 | 必須 | 値 | 説明 |
| val | confirm=trueの時は必須 | 変数名 | どのボタンを押したかの結果を代入する変数を指定します。 |
| confirm | no | true / false (false) | true を指定すると確認ダイアログになります。false を指定するとアラートダイアログになります。 |
| text | no | メッセージ | ダイアログで表示するメッセージを指定します。メッセージには HTML が使用できます。例えば、複数行に渡る場合は <br> をはさみます。 |
|
メッセージダイアログを表示します。 |
|||
Simple UI をカスタマイズする 画像／サウンドの置き換え
もっとも簡単な Simple UI のカスタマイズは、画像ファイル／サウンドファイルを、自分で作った素材に置き換えることです。
Simple UI で使用されている画像ファイル／サウンドファイルは、以下の場所にそれぞれ配置されており、これらを自分で作ったファイルで置き換えれば見た目のカスタマイズが可能です。
タイトル画面に関する画像／サウンド
- template/data/bgimage/
- template/data/image/
- template/data/bgm/
メニュー画面に関する画像
- template/plugin/html_overlay/html/ui/
ダイアログに関する画像
- template/plugin/html_overlay/html/dialog/
Simple UI をカスタマイズする マクロの編集
メニュー画面とダイアログを除く Simple UI の機能は マクロ の形で提供されています。
以下のファイル内のマクロ定義箇所を編集すれば、Simple UI の挙動を調整することができます。
タイトル画面に関するマクロ
- template/data/ui/o2ui_title.ks
メニュー画面に関するマクロ
- template/data/ui/o2ui_macro.ks
ダイアログに関するマクロ
- template/data/ui/o2dialog.ks
Simple UI をカスタマイズする JavaScript によるカスタマイズ
Simple UI の機能の中でも、メニュー画面やダイアログ等の部分は JavaScript および jQuery によって記述されています。高度なカスタマイズを行いたい場合は、以下のファイルを編集してください。
o2ui オブジェクト
- template/data/ui/o2ui_macro.ks
o2ui.title オブジェクト
- template/data/ui/o2ui_title.ks
o2dialog オブジェクト
- template/data/ui/o2dialog.ks
メニュー画面 内部処理
- template/plugin/html_overlay/html/o2_menu.html
ダイアログ 内部処理
- template/plugin/html_overlay/html/o2dialog.html