#author("2024-03-03T23:33:42+09:00","default:discord","discord") #author("2024-04-26T14:52:41+09:00","default:discord","discord") * Suika2でのタイトル画面の作り方 [#l1826a95] Suika2でのタイトル画面を作っていくための手順を載せています。 '' 目次'' #contents &br; ** まずはじめに｜サンプルゲームの説明 [#e791514b] 公式のサンプルゲームの中身を見ていきましょう。 &br; *** タイトル画面の呼び出し箇所 [#mac83570] txt/japanese-main.txt の中で、''@メニュー ファイル=menu.txt フェードインなし''と書いてある行を探してください。&br; これが''タイトル画面の呼び出し''です。&br; タイトル画面は GUI という機能を使って実現されています。&br; menu.txt というのは、gui フォルダに入っている menu.txt のことです。 &br; *** menu.txt の中身 [#gd7aad15] gui/menu.txt を開いてみてください。&br; まず先頭に、 # このファイルの基本設定 global { # 下記の画像を使用する idle: menu-idle.png; hover: menu-hover.png; active: menu-hover.png; # フェードイン時間(秒) [この画面ではフェードアウトを使わない] # fadein: 1.0; # フェードアウト時間(秒) [この画面ではフェードアウトを使わない] # fadeout: 1.0; # 読み上げ alt: ゲームのメニュー画面が表示されています。左右のキーを押してください。; } と書かれています。これの意味は下記のとおりです。&br; |idle|何もしていない状態で表示する画像。cg/menu-idle.png| |hover|ボタンがマウスでポイントされた時に表示する画像。cg/menu-hover.png| |active|単純なタイトル画面では使いません。適当にcg/menu-hover.png を使っておきます| |fadein|フェードイン時間(秒)| |fadeout|フェードアウト時間(秒)| &br; *** ボタン画像の準備について [#zeeed4a0] - Suika2では、他のエンジンと違って、個々の小さなボタンの画像を使いません - 代わりに、画面全体の中にボタンを配置した画像を利用します - このデータを作るには、画像編集ソフトやペイントソフトのレイヤー機能を使います - Photoshop や CLIP STUDIO をご利用の方は、こちらのファイル をダウンロードしていただけば、構造がわかると思います - Photoshop や CLIP STUDIO をご利用の方は、[[こちらのファイル>https://polaris-engine.com/dl/material/tategaki_cg.zip]] をダウンロードしていただけば、構造がわかると思います - ちなみに、個々のボタン画像を利用しない理由は、下記の理由です -- 小さなボタン画像ファイルの管理がなくなって楽 -- 使用メモリ量を固定できる - 結果として、イラストレータの方からはわかりやすいとの声を頂いています &br; *** menu.txt ファイルの構造 [#p19f2a48] menu.txt ファイルの続きについて見ていきます。 大まかに見ると4つのボタンについて書かれています。 なんとなく眺めてみると、次の構造になっていることがわかります。 START { ... } LOAD { .... } CONFIG { ... } QUIT { ... } &br; *** START ボタンの中身 [#t0be08bb] ここで START ボタンの中をよく見ていきます。 # STARTボタン START { # 種類:ラベルへジャンプ type: goto; # ジャンプ先のラベル label: START; # 座標とサイズ x: 2; y: 495; width: 314; height: 192; # ポイントされたときの効果音 pointse: btn-change.ogg; # クリックされたときの効果音 clickse: click.ogg; } わかる部分、わからない部分があると思います。さらに詳しく見ていきましょう。 &br; *** クリックされたらラベルへジャンプ [#pfbd9220] ''type: goto; ''というのは、このボタンが押されたときに、''シナリオファイル(japanese-main.txt)のどこかのラベルにジャンプする''いう意味です。 ラベルというのは、シナリオの中で、: から始まる行のことです。 ''label: START;''というのは、このボタンが押されたときに、''シナリオファイル(japanese-main.txt)の :START という行にジャンプする''という意味です。 &br; *** 座標とサイズ [#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; #youtube(-QwEC8v87w) たったこれだけです。&br; 意外と難しくなかった、という感想を持たれたと思います。 &br; ** ボタンを増やすには？ [#i35c2a5b] - START { ... } のブロックをコピーして、新しいブロックを作ってみましょう - コピー先の START の部分には自分で新しい名前を付けてください - アルファベットならなんでもいいです。(実を言うとSTARTが2つあってもそのまま動きます) &br; * 新しいバージョンでの仕様（GUIv2） [#af4fff1f] 背景やキャラクタを表示したまま、GUIを上から表示できるようになりました。以前はidle画像に透明度が使えませんでしたが、GUIv2では透明度が有効になります。 言い換えると、 [[@bg コマンド>コマンドリファレンス#kca5c778]] で背景を表示したり、 [[@レイヤーコマンド>コマンドリファレンス#k5a4fa64]] でアニメーション用のレイヤーを表示したまま、GUIでメニューを表示することができます。 &br; ** GUIv2の使い方 [#ae654c74] 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サーバー>https://discord.gg/ZmvXxE8GFg]] でお聞きくださると嬉しいです。要するに、背景やキャラクタと、GUIを、同時に表示させることができます。 詳しい使い方などは、Discordサーバーでお聞きくださると嬉しいです。要するに、背景やキャラクタと、GUIを、同時に表示させることができます。 従来のGUI、つまりGUIv1を使いたい場合は、単にbaseを指定しないでください。