- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2023-10-30T19:31:40+09:00","default:discord","discord")
#author("2024-01-15T18:42:35+09:00","default:discord","discord")
* Suika2でのタイトル画面の作り方 [#l1826a95]
Suika2でのタイトル画面を作っていくための手順を載せています。
** まずはじめに [#e791514b]
- サンプルゲームの中身を見ていきます
'' 目次''
#contents
** まずはじめに|サンプルゲームの説明 [#e791514b]
公式のサンプルゲームの中身を見ていきましょう。
** タイトル画面の呼び出し箇所 [#mac83570]
- txt/japanese-main.txt の中で、 "@メニュー ファイル=menu.txt フェードインなし" と書いてある行を探してください
- これがタイトル画面の呼び出しです
- タイトル画面は GUI という機能を使って実現されています
- menu.txt というのは、gui フォルダに入っている menu.txt のことです
*** タイトル画面の呼び出し箇所 [#mac83570]
txt/japanese-main.txt の中で、''@メニュー ファイル=menu.txt フェードインなし''と書いてある行を探してください。&br;
これが''タイトル画面の呼び出し''です。&br;
タイトル画面は GUI という機能を使って実現されています。&br;
menu.txt というのは、gui フォルダに入っている menu.txt のことです。
** menu.txt の中身 [#gd7aad15]
- では、gui/menu.txt を開いてみてください
- まず先頭に、
*** menu.txt の中身 [#gd7aad15]
gui/menu.txt を開いてみてください。&br;
まず先頭に、
# このファイルの基本設定
global {
# 下記の画像を使用する
idle: menu-idle.png;
hover: menu-hover.png;
active: menu-hover.png;
}
- と書かれています。これの意味は下記のとおりです。
と書かれています。これの意味は下記のとおりです。&br;
|idle|何もしていない状態で表示する画像。cg/menu-idle.png|
|hover|ボタンがマウスでポイントされた時に表示する画像。cg/menu-hover.png|
|active|単純なタイトル画面では使いません。適当にcg/menu-hover.png を使っておきます|
&br;
** ボタン画像の準備について [#zeeed4a0]
*** ボタン画像の準備について [#zeeed4a0]
- Suika2では、他のエンジンと違って、個々の小さなボタンの画像を使いません
- 代わりに、画面全体の中にボタンを配置した画像を利用します
- このデータを作るには、画像編集ソフトやペイントソフトのレイヤー機能を使います
- Photoshop や CLIP STUDIO をご利用の方は、こちらのファイル をダウンロードしていただけば、構造がわかると思います
- ちなみに、個々のボタン画像を利用しない理由は、下記の理由です
-- 小さなボタン画像ファイルの管理がなくなって楽
-- 使用メモリ量を固定できる
- 結果として、イラストレータの方からはわかりやすいとの声を頂いています
** menu.txt ファイルの構造 [#p19f2a48]
- menu.txt ファイルの続きについて見ていきます
- 大まかに見ると4つのボタンについて書かれています
- なんとなく眺めてみると、次の構造になっていることがわかります
*** menu.txt ファイルの構造 [#p19f2a48]
menu.txt ファイルの続きについて見ていきます。
大まかに見ると4つのボタンについて書かれています。
なんとなく眺めてみると、次の構造になっていることがわかります。
START {
...
}
LOAD {
....
}
CONFIG {
...
}
QUIT {
...
}
** START ボタンの中身 [#t0be08bb]
- ここで START ボタンの中をよく見ていきます
*** START ボタンの中身 [#t0be08bb]
ここで START ボタンの中をよく見ていきます。
# STARTボタン
START {
# 種類:ラベルへジャンプ
type: goto;
# ジャンプ先のラベル
label: START;
# 座標とサイズ
x: 2;
y: 495;
width: 314;
height: 192;
# ポイントされたときの効果音
pointse: btn-change.ogg;
# クリックされたときの効果音
clickse: click.ogg;
}
- わかる部分、わからない部分があると思います。さらに詳しく見ていきましょう
わかる部分、わからない部分があると思います。さらに詳しく見ていきましょう。
** クリックされたらラベルへジャンプ [#pfbd9220]
- type: goto; というのは、このボタンが押されたときに、 シナリオファイル(japanese-main.txt)のどこかのラベルにジャンプするという意味です
- ラベルというのは、シナリオの中で、: から始まる行のことです
- label: START; というのは、このボタンが押されたときに、 シナリオファイル(japanese-main.txt)の :START という行にジャンプするという意味です
*** クリックされたらラベルへジャンプ [#pfbd9220]
''type: goto; ''というのは、このボタンが押されたときに、''シナリオファイル(japanese-main.txt)のどこかのラベルにジャンプする''いう意味です。
** 座標とサイズ [#t0b41755]
- 座標とサイズですが、これは Photoshop や CLIP STUDIO などのツールで、 ボタンの位置とサイズを確認して書いてください
- やりかたは、 [[Photoshop>https://hoshimi12.com/?p=22223]] の場合はこちら、 [[CLIP STUDIO>https://daigonozin.com/%E3%80%90%E3%82%AF%E3%83%AA%E3%82%B9%E3%82%BF%E3%80%91%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%91%E3%82%B9%E5%86%85%E3%81%AE%E5%BA%A7%E6%A8%99%E3%82%92%E7%9F%A5%E3%82%8B%E6%96%B9%E6%B3%95%EF%BD%9C%E5%AE%9A/]] の場合はこちら です
ラベルというのは、シナリオの中で、: から始まる行のことです。
** たったこれだけです [#q5721c4c]
- 意外と難しくなかった、という感想を持たれたと思います
''label: START;''というのは、このボタンが押されたときに、''シナリオファイル(japanese-main.txt)の :START という行にジャンプする''という意味です。
*** 座標とサイズ [#t0b41755]
座標とサイズですが、これは Photoshop や CLIP STUDIO などのツールで、 ボタンの位置とサイズを確認して書いてください。&br;
やりかたは、 [[Photoshop>https://hoshimi12.com/?p=22223]] の場合はこちら、 [[CLIP STUDIO>https://daigonozin.com/%E3%80%90%E3%82%AF%E3%83%AA%E3%82%B9%E3%82%BF%E3%80%91%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%91%E3%82%B9%E5%86%85%E3%81%AE%E5%BA%A7%E6%A8%99%E3%82%92%E7%9F%A5%E3%82%8B%E6%96%B9%E6%B3%95%EF%BD%9C%E5%AE%9A/]] の場合はこちら です。&br;
たったこれだけです。&br;
意外と難しくなかった、という感想を持たれたと思います。
** ボタンを増やすには? [#i35c2a5b]
- START { ... } のブロックをコピーして、新しいブロックを作ってみましょう
- コピー先の START の部分には自分で新しい名前を付けてください
- アルファベットならなんでもいいです。(実を言うとSTARTが2つあってもそのまま動きます)