赤月スクリプトご依頼用

コンフィグ-Suika2

最終更新：2023年06月05日 15:17

akatsuki

- view

管理者のみ編集可

Suika2

公式のダウンロードページから、サンプルゲーム＆実行ファイルのZIPをダウンロードし解凍した中の、suika2 > cg というフォルダの中にある、config-idle.png, config-hover.png, config-active.pngと3種類の画像ファイルでコンフィグ画面は動きます。
config-page2-(ry)という画像も同じように3種類ありますが、これは2ページ目の画像であり、先に1ページ目について解説します。

画像のとおり、音量などスライダーで変更できてティラノに比べてかっこよくオシャレに感じます。ただ、ティラノみたく画像を乗っけるだけの仕組みと違ってちょっととっつきにくいかもしれません。
Suika2は全体的に、画像処理けっこうできる人間＆プログラミングちょっとできる人間の集まり、もしくは両方できる人間……でないと完成させられない印象です。そういったゲーム制作初めての方が躓きそうなシステムまわりについて、Suika2はドキュメントがまだ充実していない印象です。そのため、私のようなスクリプターが力を発揮できるのですが。

以下、Suika2の画面デザインを頑張りたい方はついてきてくださいませ。。『画像編集一応できる』ぐらいの方であれば自力でどうにかなると思います。

１ページ目：画像詳細

	config-idle.png コンフィグの待機画面です。これをベースに、activeやhoverが乗っかります。
	config-hover.png オンマウスされたときに変化する部分の画像が集まっています。何も見えない部分は透過です。
	config-active.png 変化したり選択されたりしている部分の画像が集まっています。何も見えない部分は透過です。

タイトル画面でも同じだったのですが、Suika2のシステム画面類は基本的に領域指定で動きます。x,yの座標で要素の左上を指定し、width(横幅)とheight(縦幅)で領域を指定し、オンマウスしたらその領域だけhoverの画像を乗せる、また例えばFONT1が選択されているときはその領域だけFONT1を選択中(active)の画像にする、というふうに動いています。

以降、config-idle.png, -active.png, -hover.png は idle, active, hoverと略します。

これについて、私みたいにスクリプトも画像編集も自分でやる場合は以下のようなことを考えながら画面を作らなくてはいけません。（スクリプトのファイルにこの数字が書いてある。）

数字ばっかり！私もいつもコンフィグを最後にまわしがちなので最後に絶望します。でもこういったシステム画面の座標の計算などは、Suika2だけでなくおそらくどのゲーム制作ツールでも必須です。

Suika2のほうがこういった数字が大事になってくるのは、上に書いたとおりSuika2は領域で反応する仕組みだからです。この画像だと青で塗った部分はスクリプト上では「反応する領域！」なっているので、オンマウスでhoverしたり、クリックしたら反応して画像がactiveになったりします。

1ページ目だけしか利用しない方はこれの画像をひたすら上書きしてデザインを用意すればいいだけですが、ボイスありでキャラクター人数が2人以上で、キャラごとのボイス音量設定を作りたい場合は確実に、ガイドを引いて狂いそうになりながら線を引きまくり、バーの長さやバランスについて考えて、、など考える必要があるのです。
ティラノは元ある画像を上書きすれば良かったので、Suika2はそういうことができず、初心者さんには難しいんじゃないかなぁと思っています。

ともあれ！
この、スクリプトで指定している領域内(青いとこ)では
　config-hover.png ＝オンマウスしたときの画像
　config-active.png ＝選択されたり動かせたり箇所の画像
が動作する、のです！逆に言うと、青いところ以外をクリックしたりオンマウスしても何も起こりません。
先程上げた config-hover.png と config-active.png には、この青い領域に含まれる箇所しか画像が存在せず、あとは透過になっているはずです。

この3枚の画像を、いじってそのまま上からデザインを変えてしまえばいいだけ…だけ？なのです……

下に書きますが、バーなどまったく新しい配置などにするのでなければ、細かいパーツなどを変更するのみなので、数字の知識はなくても可能なはずです。ちょっと違うというぐらいでしたらこちらで調節します。

ボタン類

こういうことです（結論）

idle.pngには何も選択されたりオンマウスされたりしていない状態の画像が描かれています。今回のGIF画像でフォーカスしている三箇所では、フルスクリーンモードもウィンドウモードも両方選択されていない画像になっています。（実際のゲームではフルスクリーンかウィンドウは絶対にどちらか選択された状態になっている。）

hover.pngはオンマウスされたとき変化する部分の画像が集まっています。フルスクリーンのボタン、ウィンドウのボタン、ページボタンの色が明るくなっています。（フルスクリーン・ウィンドウのボタンはhoverの影が重なってしまっているからか逆にちょっと濃くなっていますが。）
このコンフィグ画面は１ページ目なので、２ページ目に移るためのボタンは反応しますが１ページ目に移る必要はないため１ページ目のボタンは何も画像の変化がありません。

active.pngは、こういったボタンの場合は現在選択中の画像です（後から説明するバーのときはちょっと違う）。フルスクリーン・ウィンドウ切り替えのボタンは、ゲーム中フルスクリーン状態のときはactive.pngのフルスクリーン部分が上に被さった状態で表示されます。ゲームで見ていただくとわかると思いますが、フルスクリーン状態のときは上下ともに影がついた状態になるはずです。逆にフルスクリーン状態のときのウィンドウ切り替えボタンはactive.pngが被さっていない、idle.pngと同じ状態になっているはずです。

↓ゲームのフルスクリーンモード中

↓ゲームのウィンドウモード中

このように、基本的にSuika2のシステム画面は、3つの画像で完結するようになっているのですね。たくさん画像ファイルが要らないところが良いところだとおもいます。

つまむバー

ここではテキスト速度、オート速度、全体ボイス音量、BGM音量、SE音量の、つまんで動かすバーのことを指します。
バーはボタンとまた違う仕組みになっています。

config-idle.png	config-active.png

↓
↓ 合体！（ゲームの状態）
↓

これ、この2枚の画像だけで、どうしてバーとして動くかというところなんですが、とりあえず左上のテキストスピードのバーを例にします。

スクリプトのファイルでは、前に書いたとおり、これらの数字を書いて青色の反応する領域を指定します。
始点のx,y値 = (68,250)px (ゲーム画面の左上から見て右へ68px、下へ250pxいったところが始点)
横幅(width) = 266px (始点＋266pxの範囲が領域になる)
縦幅(height) = 21px (始点＋21pxの範囲が領域になる)

プログラミングでは何かの範囲を決めるとき、始点（領域の左上）の座標を指定して、そこから横幅がいくつで縦幅がいくつと指定することが多いです。

それで、Suika2のバーなのですが、この縦幅21px、同じ数字がそのままつまみの横幅になります。21×21pxの正方形です。今回画像では青を濃くしています。
デフォルトのつまみの丸は21pxの正円になっているはずです。active.pngの、上記で指定した領域がつまみになって、なんと画像を引っ張ると右に動いたり左に動いたりするんですね。すごい。
説明するのむずかしー！

なので、分かるようでしたら、つまみのサイズを30pxにする・バーの長さを変えるなどしていただくのは全然大丈夫です。ただ、細いつまみ・太いつまみにすることはできず正方形縛りになります。でもサイズを変えるときは座標的に大丈夫かどうか見る必要があるので、必ずガイドを引いてお送りください。

余談

テキストプレビューのところはスクリプト側で指定した領域内に文字が流れるというだけなので、画像としてはデフォルト画面のようにidle.pngに枠のようなものがあれば大丈夫です。

２ページ目

	config2-idle.png コンフィグの待機画面です。これをベースに、activeやhoverが乗っかります。
	config2-hover.png オンマウスされたときに変化する部分の画像が集まっています。何も見えない部分は透過です。
	config2-active.png 変化したり選択されたりしている部分の画像が集まっています。何も見えない部分は透過です。