タイトル画面の作り方 - Polaris Engine Wiki

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

Suika2でのタイトル画面を作っていくための手順を載せています。

目次

まずはじめに｜サンプルゲームの説明

公式のサンプルゲームの中身を見ていきましょう。

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

txt/japanese-main.txt の中で、@メニュー ファイル=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;
   # フェードイン時間(秒) [この画面ではフェードアウトを使わない]
   # fadein: 1.0;
   # フェードアウト時間(秒) [この画面ではフェードアウトを使わない]
   # fadeout: 1.0;
   # 読み上げ
   alt: ゲームのメニュー画面が表示されています。左右のキーを押してください。;
}

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

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

• 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つあってもそのまま動きます)

新しいバージョンでの仕様（GUIv2）

背景やキャラクタを表示したまま、GUIを上から表示できるようになりました。以前はidle画像に透明度が使えませんでしたが、GUIv2では透明度が有効になります。

言い換えると、 @bg コマンド で背景を表示したり、 @レイヤーコマンド でアニメーション用のレイヤーを表示したまま、GUIでメニューを表示することができます。

GUIv2の使い方

global {
   base:   none;
   idle:   menu-idle_moji.png;
   hover:  menu-hover.png;
   active: menu-hover.png;
}

以前の仕様から追加されたのはbaseの指定です。これを指定するとGUIv2が有効になります。

GUIv2を有効にするには、globalのセクションの中に、

base: none;

あるいは

base: base-image.png;

を指定します。noneの場合は背景やキャラクタがそのまま表示されます。また、baseファイル名を指定した場合は、背景やキャラの上に、画面全体を覆うbase画像が描画されます。この画像の透明度は有効です。

以前と異なり、idle画像は画面全体に描画されず、ボタンがポイントされていないときだけ、ボタンの部分が描画されるようになりました。

詳しい使い方などは、Discordサーバーでお聞きくださると嬉しいです。要するに、背景やキャラクタと、GUIを、同時に表示させることができます。

従来のGUI、つまりGUIv1を使いたい場合は、単にbaseを指定しないでください。