Suika2 | タイトル画面の作り方

まずはじめに

サンプルゲームの中身を見ていきます。

タイトル画面の呼び出し箇所

txt/japanese-main.txt の中で、@gui menu.txt と書いてある行を探してください。
これがタイトル画面の呼び出しです。タイトル画面は GUI という機能を使って実現されています。
menu.txt というのは、gui フォルダに入っている menu.txt のことです。

menu.txt の中身

では、gui/menu.txt を開いてみてください。まず先頭に、

# このファイルの基本設定
global {
    # 下記の画像を使用する
    idle:   menu-idle.png;
    hover:  menu-hover.png;
    active: menu-hover.png;
}

と書かれています。これの意味は下記のとおりです。

idle ... 何もしていない状態で表示する画像。cg/menu-idle.png
hover ... ボタンがマウスでポイントされた時に表示する画像。cg/menu-hover.png
active ... 単純なタイトル画面では使いません。適当にcg/menu-hover.png を使っておきます

ボタン画像の準備について

Suika2では、他のエンジンと違って、個々の小さなボタンの画像を使いません。
代わりに、画面全体の中にボタンを配置した画像を利用します。
このデータを作るには、画像編集ソフトやペイントソフトのレイヤー機能を使います。
Photoshop や CLIP STUDIO をご利用の方は、こちらのファイルをダウンロードしていただけば、構造がわかると思います。

ちなみに、個々のボタン画像を利用しない理由は、小さなボタン画像ファイルの管理がなくなって楽だと考えたからです。結果として、イラストレータの方からはわかりやすいとの声を頂いています。

`menu.txt` ファイルの構造

さて、menu.txt ファイルの続きについて見ていきます。
大まかに見ると4つのボタンについて書かれています。
なんとなく眺めてみると、次の構造になっていることがわかりますね。

START {
    ...
}

LOAD {
    ....
}

CONFIG {
    ...
}

QUIT {
    ...
}

START ボタンの中身

ここで START ボタンの中をよく見ていきます。

# STARTボタン
START {
    # 種類:ラベルへジャンプ
    type: goto;

    # ジャンプ先のラベル
    label: START;

    # 座標とサイズ
    x: 2;
    y: 495;
    width: 314;
    height: 192;

    # ポイントされたときの効果音
    pointse: btn-change.ogg;

    # クリックされたときの効果音
    clickse: click.ogg;
}

わかる部分、わからない部分があると思います。さらに詳しく見ていきましょう。

クリックされたらラベルへジャンプ

type: goto; というのは、このボタンが押されたときに、シナリオファイル(japanese-main.txt)のどこかのラベルにジャンプするという意味です。ラベルというのは、シナリオの中で、: から始まる行のことです。

label: START; というのは、このボタンが押されたときに、シナリオファイル(japanese-main.txt)の :START という行にジャンプするという意味です。

座標とサイズ

座標とサイズですが、これは Photoshop や CLIP STUDIO などのツールで、ボタンの位置とサイズを確認して書いてください。
やりかたは、 Photoshopの場合はこちら、 CLIP STUDIOの場合はこちらです。

たったこれだけです

意外と難しくなかった、という感想を持たれたと思います。

ボタンを増やすには？

START { ... } のブロックをコピーして、新しいブロックを作ってみましょう。
コピー先の START の部分には自分で新しい名前を付けてください。アルファベットならなんでもいいです。(実を言うとSTARTが2つあってもそのまま動きます。)

Suika2 タイトル画面の作り方