@gui コマンドは GUI (グラフィカルユーザインタフェース) を表示します。
@gui コマンドは、ゲーム起動後のメニュー画面を表示するための @menu コマンドや、
すでに見たCGを鑑賞するモードを作成するための @retrospect コマンドを置き換え、
より直感的にGUIを作成可能とするために導入されました。
@gui コマンドは、最大で128個のボタンを作成することができ、
ボタンの種類は、「ラベルにジャンプする」、「変数がセットされていれば表示する」、「音量のスライダーを表示する」、など多岐に渡ります。
GUI定義ファイル(gui/フォルダにある)はコンフィグ画面、セーブ画面、ロード画面、履歴画面を作るためにも使用されます。
GUI定義ファイルはCSS風の構造を持っており、CSSを理解する人であれば直感的に、Suika2Scriptとは切り離して理解することができます。
GUI定義ファイルの呼び出しは他の呼び出しコマンド、つまり @goto や @load と同様です。
@gui file.txt
右クリックによるキャンセルを許可するには、cancel を追加します。
@gui file.txt cancel
GUI定義ファイルを書き始めるには、拡張子が .txt であるファイルを作成します。例えばメインメニューファイルであれば menu.txt とします。
ファイルの先頭にコメントを入れ、何の目的のファイルなのか(例えば「メインメニュー」)を記述することは、よいやり方と言えます。(ゲーム中では見えません)
###
### メインメニュー画面のGUI定義
###
GUIは画像を元にしたインタフェースである点で @menu と同じですが、@menu と異なり、@gui では、独立したGUI定義ファイルが用いられます。
GUIを作成する最初の一歩は、idle, hover, active の３つの画像を定義することです。
画像の定義は global { } で囲んで、GUI定義ファイルの先頭に置いておくと、Suika2が自動的に画像をロードしてくれます。
idle 画像はデフォルトで表示される画像で、ユーザがマウスでポイントしていないときに表示されます。
# 基本設定
global {
# ３つの画像を使う
idle: menu-idle.png;
hover: menu-hover.png;
active: menu-hover.png;
}
なお、active を必要としないボタンもあるため、hover と active に同じ画像を指定してしまうこともできます。
GUI定義ファイルでは、ゲーム開発者は、ボタンとその属性である 機能, 位置, サイズ, 効果音 を定義する必要があります。
このため、ボタンは一目で分かる明確な構造を持っており、GUI定義ファイルを @menu に代わるよい方法と考える人が多いのです。
ボタンはボタンの名前に囲まれています。この場合は START { } です。
x, y, width, height は単位がピクセルです。
START {
# クリックされるとラベルにジャンプするボタン
type: goto;
# 下記のラベルにジャンプする
label: START;
# ボタンの位置とサイズ
x: 2;
y: 495;
width: 314;
height: 192;
# マウスでポイントされたときの効果音
pointse: btn-change.ogg;
# マウスでクリックされたときの効果音
clickse: click.ogg;
}
上の例では START というボタンを定義しています。このボタンは押されると START ラベルに実行を移します。
２つの異なる効果音、btn-change.ogg と click.ogg が指定されていますが、これらはマウスでポイントされたときと、クリックされたときに、それぞれ再生されます。
メニューを完成させるには、同様に他のボタンを追加してください。
Suika2は、上記のような簡素なGUIだけでなく、コンフィグ画面、セーブ画面、ロード画面、履歴画面といった、たくさんの高度なGUIを実現可能です。 これらのGUI定義ファイルは、一般的なメニューではなく、システムのメニューを実現するのに用いられます。 このような高度な機能を活用するには、GUI定義ファイルを一から書き起こすよりは、サンプルを書き換えて作成することをお勧めします。