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

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: ゲームのメニュー画面が表示されています。左右のキーを押してください。;
}

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

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


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

  • 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 の場合はこちら です。
メディバンペイントでのやり方は動画で解説しています。
→You Tube動画

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


ボタンを増やすには?

  • 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を指定しないでください。