コンフィグ画面を自作しよう【ティラノ】

こんにちは、脳硝子です。

今回は魔女で実装しているコンフィグ画面を元に
「ティラノでコンフィグ画面を自作する方法」を紹介していきます。

スクリプトに慣れている人から、慣れていない人にも向けて。
かなり頑張って書いたので、分かりやすいものになっていれば嬉しいです！

※この処理はティラノV5で確認しました
※ティラノビルダーも同様の処理ですが、念の為自己責任でお願いします

STEP1　画像を用意しよう！

コンフィグ画面には、大体５枚の画像を使用されています。
１枚ずつ解説していくので、デフォルトの画像も参考にしながら作成してみましょう！
[ デフォルト画像：data/image/config/ ]

1,背景

コンフィグ画面の背景(bg)にあたる画像です。
この画像のポイントは、全てのボタンがオフになっている状態であることです。
[ デフォルト画像：data/image/config/bg_config.png ]1280×720サイズ
[ デフォルト画像：data/image/config/bg_config.jpg ]960×640サイズ

2, 透明ボタン

何も表示されていない透明の画像です。
大きさはどんなサイズでもOKですが、画像の容量をなるべく軽くしたいなら10×10サイズのgif画像がちょうどいいかもしれないです。

これはボタンがオフ状態の時に表示されます。
これを聞いて（オフ状態の時のボタンは背景に置いたよ…？）と思うかもしれませんが、実際にコーディングする際にこの疑問は解消されるので、ここは一度スルーしても大丈夫です。
[ デフォルト画像：data/image/config/c_btn.gif ]

3,戻るボタン

ゲーム画面やタイトルに戻るためのボタンです。
好きなデザインで作りましょう。
[ デフォルト画像：data/image/config/c_btn_back.png ]

4,ONボタン＆ミュートボタン

ボタンがONになっている・設定されている音量/テキスト設定を表すボタンです。
今回はONボタンとは別のデザインでミュートボタンも作成しているのでこの方法で解説していきます。
[ デフォルト画像：data/image/config/ ]

5,スキップボタン

未読テキストをスキップするか/しないかを選択できるボタンです。
OFFになっている状態は背景に表示されているので、ONになっている状態のボタンを２つ作成しましょう。
[ デフォルト画像：data/image/config/c_skip_off.png(skip_on.png) ]

STEP2　スクリプトしていこう！

画像が用意できたら、config.ksを開いてスクリプトしていきましょう！
ここでは８種類のスクリプトを元に処理が行われています！

また、スクリプトは上から順番に処理を行なっていきます。
以降のステップでは、スクリプトを書く順番に従って解説しているので途中から確認する時は気をつけて下さい。

途中で分からないところが出てくるかもしれませんが、
そんな時は一度、そのステップを簡単に読み飛ばして次のステップを確認するのがオススメです。

大変かもしれませんが、ひとつずつ解説していくのでゆっくり自分のペースで進めてみましょう！

STEP3　ゲーム画面のリセット

コンフィグは基本的にゲームの途中に呼び出される場合が多いです。
そこで、現在進行中のゲームを一度保存する[sleepgame]という処理が使われています。
まずは、ゲーム画面に表示されている物を全て非表示にしてコンフィグ画面を表示させる準備をします。

;▼ゲーム画面のリセット
[mask time="500"]
;-メッセージレイヤの非表示・キーコンフィグをオフに
  [layopt layer="message0" visible="false"]
  [layopt layer="message1" visible="false"]
  [stop_keyconfig]
;-ロールボタン・選択肢が表示されている場合それらを非表示に
  [clearfix]
  [cm]
;-前景イメージの非表示
  [freeimage layer="1" time="10"]
  [freeimage layer="2" time="10"]
;-フィルタやカメラなどの処理をオフに
  [free_layermode time="10"]
  [free_filter]
  [iscript]
    $('.layer_camera').empty();
  [endscript]

マスクをかけて画面を隠し、その間にゲーム画面に表示されている色々を非表示にします。
大体この命令文で、ゲーム画面にある物は非表示にできるのでコピペでも大丈夫です。

[awake_game]を実行すれば、ゲーム再会時に再び表示されるようになります。

STEP4　設定されている値を変数に代入する

次に、各種設定されている値を一時変数に代入します。
まずは、BGM音量を例にあげて確認してみましょう。

[iscript]
//BGM音量
	tf.current_bgm_vol=parseInt(TG.config.defaultBgmVolume);
[endscript]

「……？？」となるかもしれませんが、ひとつずつ処理を分解していきましょう！

　
①tf.current_bgm_vol
まず、音量の値を保存しておく一時変数を設定します。

②parseInt();
変数の中にparseInt()を定義。
これは()で括られた変数の中身を数字に変換するためのものです。

③TG.config.defaultBgmVolume
ここには現在設定されているBGM音量が保存されています。

つまり、音量を設定する度にTG.config.defaultBgmVolumeを書いていると大変なので
一度変数の中に音量を保存していおいて、最後にまとめて音量に変換するというイメージです。
実際の処理とはまた異なるように感じるかもしれませんが…現段階ではその認識でOKです

この処理を応用して、他の値も代入していきます。

[iscript]
//ラベルの通過記録を無効に
  TG.config.autoRecordLabel = 'true';
//BGM
  tf.current_bgm_vol = parseInt(TG.config.defaultBgmVolume);
//SE
  tf.current_se_vol = parseInt(TG.config.defaultSeVolume);
//VO
  if (typeof sf.current_vo_vol == 'undefined') {
    tf.current_vo_vol = 100;
    sf.current_vo_vol = 100;
  } else{
  	tf.current_vo_vol = sf.current_vo_vol;
  }
//テキスト速度
  tf.current_ch_speed = parseInt(TG.config.chSpeed);
//オートウェイト
  tf.current_auto_speed = parseInt(TG.config.autoSpeed);
//未読ウェイト
  tf.text_skip='ON';
  if (TG.config.unReadTextSkip != 'true') {
    tf.text_skip = 'OFF';
  }
[endscript]

……基本の形と異なる処理がまじっていますね。
まずはtf.current_vo_vol＝ボイス音量について解説しましょう。

ボイス音量について

ティラノにはボイス音量を管理する変数は組み込まれていません。
JSで追加できるかもしれませんが、ここは無難にシステム変数でボイスのデフォルト値を設定してあげましょう。

ボイス音量の格納にはこちらを参考に作成しました。

[iscript]
  if (typeof sf.current_vo_vol == 'undefined') {
    tf.current_vo_vol = 100;
    sf.current_vo_vol = 100;
  } else{
  	tf.current_vo_vol = sf.current_vo_vol;
  }
[endscript]

　
①if(typeof sf.current_vo_vol == 'undefined')
まずはシステム変数の中に値が格納されているかを確認しましょう。
値が格納されていない状態(undefined)＝一番最初に起動した状態ということです。
じゃあ、他の値はどうしてIFを使わないの？と思うかもしれません。
これはTG.config.defaultに、Config.tjs・もしくはゲームセッテイングで設定したデフォルトの値があらかじめ格納されているからです。
typeofに関しては、undefinedを正しく感知するためです。
これを省略するとバグ発生の可能性につながります。
どういうこと？となるかもしれませんが、詳しくはこちらを確認してみてください。
よく分からなければ、コピペでOKです！
　
②tf.current_vo_vol=100;・sf.current_vo_vol=100;
ここで設定した数字が、ボイス音量のデフォルト値になります。
デフォルト値＝一番最初に起動した時に設定される音量です。
　
③else{ tf.current_vo_vol = sf.current_vo_vol }
これは、すでにプレイヤーによって音量が設定されている場合の処理です。
ゲームを起動する度に、自分で設定した音量が変わったら面倒ですよね。
しかし、tf変数は一時変数。ファイルを移動するごとにリセットされてしまいます。
そこで、再起動してもリセットされてない変数＝システム変数と一時変数の中身を同じものに設定してあげます。
右と左を間違えると正常に動作しないので注意です。

未読スキップ

未読スキップは音量やテキスト設定と異なり、ON/OFFのスイッチ式で動作しています。
そこで、他とは少し異なった方法で処理を行なっています。

[iscript]
  tf.text_skip='ON';
  if (TG.config.unReadTextSkip != 'true') {
    tf.text_skip = 'OFF';
  }
[endscript]

　
①tf.text_skip = 'ON';
まず、一時変数の中に「ON」という値を代入させます。
じゃあOFFの時は…？その場合は次の処理で解消します。
　
②if(TG.config.unReadTextSkip != 'true')
TG.config.unReadTextSkipには未読スキップのtrue/falseが格納されています。
ポイントは「 != 」になっていること。これは「trueではない場合」を指しています。
つまり、一度変数の中にONを代入させる→プレイヤーがOFFを設定していた場合にのみ変数の中にOFFを代入させる→そうでなければONのまま。
こういった内容の処理になっています。

これで、変数の代入はおしまいです！
難しい話が続いて、少し疲れたかもしれません🧠つ🍵
まだまだコンフィグの設定は続くので、休憩しながら進めていきましょう。

STEP5　座標やボタンのパスを設定しよう

続いて、パスと座標の設定を行います。
あえて行う必要はないかもしれませんが、この処理を行うと後々のボタンの配置が圧倒的に楽になるのでぜひやってみましょう！

画像の保存場所(パス)の設定

[iscript]
//パスの設定
  tf.img_path = '../image/config/';
  tf.btn_path_off = tf.img_path+'off.gif';
[endscript]

　
①tf.img_path = '../image/config/';
まず、コンフィグに使う画像が保存されている場所を指定します。
これがうまく指定されていないと画像が表示されないので注意して設定してあげましょう。
この場合だと、画像は「data/image/config」に保存されていることになっています。
じゃあなんで「data」から指定しないの？と思うかもしれませんが、この場合は別の場所から画像を呼び出しているからです。
……ちょっと難しいですね。一応相対パスについて解説リンクを貼っておきます。
よく分からない場合は、画像は「data/image/」に「config」というフォルダを作って保存・変数には「../image/config/」と格納と覚えておいてください。
　
②tf.btn_path_off = tf.img_path + 'off.gif';
off.gifは透明ボタンのことです。(デフォルトだとc_btnにあたります)
tf.img_pathはコンフィグ画像が保存されている場所の指定ですね。
コンフィグに使う画像を同じ場所に保存している限り、同じ書き方でOKです。

座標の設定

続いて、ボタンのX座標を設定します。
これはずらっと並んでいるボタンの横位置を指定しています。
ボタンは横に並んでいるので、１つ１つ横位置をずらして入力するのは大変ですよね。
そこで、いつでも変数から呼び出せるように設定してあげます。

[iscript]
	tf.config_x=[940,324,376,429,481,533,585,637,689,742,794];
[endscript]

　
①tf.config_x
横位置の場所を呼び出すための変数です。
　
②[940,324,376,429,481,533,585,637,689,742,794];
今回のポイント、配列変数です。
これは１つの変数に複数の値を格納できる、とても便利な変数になっています。
値は左から「0,1,2,3…」と数え、０番の値を呼び出す際はtf.config_x[0]というように呼び出します。
私の場合は「０番をミュートボタンの位置」「その他のボタンは左から順の位置」に設定しています。
配列変数の使い方が気になる方は、こちらをチェックしてみてください。

STEP6　背景の表示

ここではコンフィグ背景・戻るボタンを画面に表示させます。

;-背景の表示
[bg storage="&tf.img_path + 'bg_config.jpg'" time="10"]
;-戻るボタンの表示
[button fix="true" graphic="&tf.img_path+'back.png'" enterimg="&tf.img_path_'back2.png'" target="*backtitle" x="959" y="17"]

ちょっとゴチャゴチャしてしまいましたね…。
念の為に、１つずつ解説しておきます。

背景の表示

　
[bg ①storage="&tf.img_path+'bg_config.jpg'" ②time=" 10"]
　
①storage="&tf.img_path + 'bg_config.jpg'"
storage=""で囲った場所にある画像が背景として表示されます。
そして「&tf.img_path」ここにはパスの設定で代入した、コンフィグ画像の場所が保存されています。
&がついているのはこれは変数だよ！とティラノくんに教えてあげるための記号です。
そして「'bg_config.jpg'」これは背景画像の名前です。(デフォルトもbg_config)
これは変数じゃなくてテキストだよ！とティラノくんに教えてあげるため「' '」で囲うのを忘れないようにしましょう。

②time="10"
どれくらい時間をかけて背景を表示させるかを指定します。
1/1000sで指定できるので、この場合は0.01秒で背景を表示させています。

戻るボタンの表示

　
button
　① fix="true"
　② graphic="&tf.img_path + 'back.png'"
　③ enterimg="&tf.img_path" + 'back2.png'
　④ target="*backgame"
　⑤ x"959" y="17"
　
①fix = "true"
常に画面にボタンを表示させる「fix」をtrueにして有効にしておきます。
もしこの処理を忘れた場合、他のボタンを押すと戻るボタンが消えてしまいます。(たぶん…そう……)

②graphic = "&tf.img_path" + 'back.png'
ボタン画像を指定します。
どうして&や’’がついているかに関しては、手前の背景の表示で説明しているので確認してみてください。

③enterimg="&tf.img_path + 'back2.png'"
ボタン画像の上にマウスインした時の画像です。
もし設定しない場合はenterimgは省略してもOKです

④target="*backgame"
ボタンを押した時にジャンプするラベルの名前です。
この場合だと、backgameというラベルにジャンプします。
先頭にアスタリスクをつけるのを忘れないようにしてください。
ジャンプした先のラベルで、ゲーム画面に戻るための処理を行います。

⑤x="959" y="17"
ボタンの位置をXY座標で指定します。Xが横・Yが縦の値です。

少し横に長くなったので、改行して解説します💦
実際に書く時は一行で書いてください。

STEP7　ボタンを配置しよう

ついに、音量・テキストの設定を変更するボタンの配置です。
数が多くて大変に感じるかもしれませんが、ほとんどコピペで書けるのでひとつずつ確実にこなしていきましょう！

まずはBGMの音量ボタンを見てみましょう

基本のボタン配置

;▼BGM
[button name="bgmvol,bgmvol_10" fix="true" target="*vol_bgm_change"…
[button name="bgmvol,bgmvol_20" fix="true" target="*vol_bgm_change"…
[button name="bgmvol,bgmvol_30" fix="true" target="*vol_bgm_change"…
[button name="bgmvol,bgmvol_40" fix="true" target="*vol_bgm_change"…
[button name="bgmvol,bgmvol_50" fix="true" target="*vol_bgm_change"…
[button name="bgmvol,bgmvol_60" fix="true" target="*vol_bgm_change"…
[button name="bgmvol,bgmvol_70" fix="true" target="*vol_bgm_change"…
[button name="bgmvol,bgmvol_80" fix="true" target="*vol_bgm_change"…
[button name="bgmvol,bgmvol_90" fix="true" target="*vol_bgm_change"…
[button name="bgmvol,bgmvol_100" fix="true" target="*vol_bgm_change"…
;-ミュートボタン
[button name="bgmvol,bgmvol_0" fix="true" target="*vol_bgm_change"

ちょっと長いので一部分のみ省略しました。
長い！多い！でちょっと挫折しかけてしまいますが、前述した通りほとんどコピペです。
ひとつずつ解説していくので、一緒にがんばりましょう！

;-ボタンの全文
[button name="bgmvol,bgmvol_10"  fix="true" target="*vol_bgm_change" graphic="&tf.btn_path_off" width="39" height="44" x="&tf.config_x[1]"  y="160" exp="tf.current_bgm_vol=10"]

　
button
　①name="bgmvol, bgmvol_10"
　②fix="true"
　③target="vol_bgm_change"
　④graphic="&tf.img_path_off"
　⑤width="39" height="44"
　⑥x="&tf.config_x[1]"
　⑦y="160"
　⑧exp="tf.current_bgm_vol=10"
　
①name = "bgmvol, bgmvol_10"
ボタンに名前をつけます。
コピペの時は「10」の番号を変えるだけでOKです。
ここでは「,(コンマ)」で名前を区切って２つの名前をつけています。
ひとつは全て共通の名前「bgmvol」
もうひとつはボタンを押した時の音量を表す「bgmvol_10」です。
このアンダーバーのあとに来る数字と、この後に紹介する「exp=""」で代入する値は同じ数字にしてください。
　
②fix = "true"
ボタンを画面に固定させます。
コピペの時は変更しなくてOKです。
戻るボタンで解説したように、fixをtrueにしないと他のボタンを押した時にボタンが消えてしまいます。
　
③target = "vol_bgm_change"
ボタンを押した時にジャンプするラベル名を指定します。
コピペの時は変更しなくてOKです。
この場合だと、vol_bgm_changeというラベルにジャンプします。
先頭にアスタリスクをつけるのを忘れないようにしてください。
ジャンプした先のラベルで、BGM音量を変更します。
　
④graphic = "&tf.img_path_off"
ボタンの画像を指定します。
コピペの時は変更しなくてOKです。
ここで指定した「&tf.img_path_off」これはSTEP2-3で設定した透明ボタンの保存場所が格納されている変数です。
背景にオフボタンがあるのはこのためで、その上から透明ボタンを置いて音量の変更を行なっているのです。(クリッカブル領域みたいな感じです)
「…でも、ボタンがオンになっても透明のままじゃない？」と感じた方。次のステップでオンボタンを表示する方法を解説します！🧠＜ちょっとまってね
　
⑤width="39" height="44"
ボタンの横幅・高さを指定します。
コピペの時は変更しなくてOKです。
widthが横幅、heightが高さになっています。この場合だと縦長のボタンですね。
余談ですが、隣のボタン領域と被らないくらいに大きくするとクリックしやすいです。
表示しているボタンが小さい時は試してみてください。
　
⑥x="&tf.config_x[1]"
ボタンの横位置を設定します。
コピペの時は「1」の番号を変えるだけでOKです。
ここで指定した「&tf.config_x[1]」はSTEP2-3で設定したボタンの横位置が格納されている変数です。
ここで紹介した変数の場合だと、１番最初に格納されている変数は「ミュートボタン」の横位置です。
そして配列変数は「０,１,２…」と左から数えていくので、２番目に保存されている変数tf.config_x[1]を指定します。
ややこしく感じてきたら、STEP2-3で紹介した「座標の設定」を確認してみてください。
　
⑦y = "160"
ボタンの縦位置を設定します。
コピペの時は変更しなくてOKです。
一列に並んでいるコンフィグを作る時は、特に変更はありません。
　
⑧exp="tf.current_bgm_vol = 10"
ボタンを押すと変数が代入されます。
コピペの時は「10」の値を変えるだけでOKです。
tf.current_bgm_volはSTEP4で設定したBGM音量を格納している変数です。
ただ、ここに値を代入しただけでは音量は変更されません。
音量の変更は次のステップで紹介します。

一気に書いたので、覚えることが多くて大変かもしれません。
休憩しながら前の項目を見直して、ひとつずつ処理を理解しながら進めていきましょう！

その他のボタン配置

SE・ボイス・テキスト設定などのボタン設定は基本的に全て同じです。
デフォルトのconfig.ksや、この記事の内容を確認しながらゆっくり進めていきましょう。

重要な部分を抜き出して、他のボタンも紹介しておきます。

;▼SE
[button name="sevol,sevol_10" … exp="tf.current_se_vol=10"]
;▼VO
[button name="vovol,vovol_10" … exp="tf.current_vo_vol=10"]
;▼テキスト速度
[button name="ch,ch_100" … exp="tf.current_ch_speed=100"]
;▼オートウェイト
[button name="auto,auto_5000" … exp="tf.current_auto_speed=5000"]

未読スキップボタン

STEP7の最後に少し異なる処理を行う「未読スキップボタン」について軽く紹介しておきます。

;▼未読スキップ
;-ONボタン
[button name="unread_on" fix="true" target="*skip_off" graphic="&tf.btn_path_off" width="376" height="46" x="867" y="572"]
;-OFFボタン
[button name="unread_off" fix="true" target="*skip_off" graphic="&tf.btn_path_off" width="376" height="46" x="867" y="627"]

　
button
　①name="unread_off"
　②fix="true"
　③target="skip_off"
　④graphic="&tf.btn_path_off"
　⑤width="376" height="46"
　⑥x="867" y="572"
　
①name="unread_off"
ボタンに名前を付けます。
他のボタンとは異なり「,(コンマ)」で区切っていないので、指定する名前は１つだけです。
unread_offとunread_on２つのボタンを配置して下さい。
　
②fix="true"
ボタンを画面に固定します。
他のボタンを押しても消えないようにするためです。
詳細はSTEP6の戻るボタンで解説しているので、気になった方は確認してみてください。
　
③target="skip_off"
ボタンを押した時にジャンプするラベル名を設定します。
skip_offとskip_on２つのボタンを配置してください。
　
④graphic="&tf.btn_path_off"
ボタンの画像を指定します。
tf.btn_path_offには透明ボタンのファイルパスが格納されています。
ファイルパスはSTEP4のパスの設定、&記号に関してはSTEP5の戻るボタンの表示で解説しています。
　
⑤width="376" height="46"
ボタンの横幅と高さを指定します。
この場合だと横長のボタンになっています。
　
⑥x="867" y="46"
ボタンの座標を指定します。
今回は変数に代入した座標とは少し違う場所に配置しているので、直接入力しています。

これでボタン配置のステップはおしまいです。
把握することや覚えることが多くて大変ですね💦

スクリプトはあと２つの工程で終了です。
がんばりましょう！🧠🚩

STEP8　ONボタンの配置を設定しよう

次はONボタンの配置を設定します。
これはコンフィグ画面を開いた時どの音量や設定になっているかを確認するための工程です。

つまり、前回音量を０にした場合は「ミュートボタンがオンになっている」ように。
音量を100にした時は「100のボタンがオンになっている」ように画像を変更させます。

ボタンの名前・変数が頻繁に出くるので
分からなくなったら前のステップの「name/exp」を確認しながら進めていきましょう。

ミュート画像がない場合

オンボタンでミュートボタンを表示させる場合。
例としてテキスト速度のスクリプトで解説していきます。
$('')や.attr()など色々出てきますが、ひとまず「なんかそういう物」として認識すると分かりやすいです！

[iscript]
//テキスト速度
$('.ch_'+tf.current_ch_speed).attr('src','data/image/config/on.png');
[endscript]

　
①$('')
変更を加える物の名前を指定します。
前のステップでボタンに名前をつけたのは、
この工程で名前を指定できるようにするためです。
名前の後ろには「tf.current_ch_speed」設定したテキスト速度を格納している変数が指定されています。
もしテキスト速度が100に指定されていた場合「.ch_100」のボタンが
50の場合は「.ch_50」が変更の対象になります。
　
②.attr()
どんな変更を加えるのかを指定します。
.attr()に関しては記述すると長くなるのでコピペで大丈夫です。
重要なのはかっこで囲われている「'src','data/image/config/on.png'」なので、さらに詳しく解説していきます。
　
③'src','data/image/config/on.png'
どんな変更を加えるのかさらに詳しく指定していきます。
左に変更する場所、右に変更したい内容を記述して
透明ボタンを別の画像に上書きします。
'src'これは表示している画像を表す値です。
'data/image/config/on.png(オンボタンの画像)'で別の画像に上書きさせます。
画像の場所(パス)を指定する時は'data'フォルダからオンボタンが保存されている場所を指定してください。

ボタンの画像を変更させる方法は以上です。
この処理を行うことにより、透明ボタンを別の画像に置き換えることができます。

どうしてこの処理を行うかが分からなくなると、少し混乱してしまうかもしれません…。
そんな方は次のステップで「ボタンをクリックした時の処理」について解説しているので、そちらを確認してからこのステップを確認してみましょう。

ミュート画像がある場合

オンボタンとは別にミュートボタンを用意している場合。
条件分岐を使って現在の音量が０になっているか・それ以外かを判断します。

条件分岐以外は、前の工程と同じなので確認しながら進めていきましょう。

[iscript]
//BGM
if (tf.current_bgm_vol==0) {
  $('.bgmvol_0').attr('src','data/image/config/mute.png');
}else {
  $('.bgmvol_'+tf.current_bgm_vol).attr('src','data/image/config/on.png');
}
[endscript]

　
①if( tf.current_bgm_vol==0 )
条件分岐を行います。
ここではBGM音量を格納している変数の値が「０」
つまり、ミュートになっている場合{}で囲われた中の処理を行います。
　
②$('.bgmvol_0')
ミュートボタンの名前を指定します。
'.bgmvol_0'はSTEP7でボタンに指定したname属性と同じ物を指定してください。
前に「.(ピリオド)」を打つのを忘れないように注意です。
ここで指定した名前に変更を加え、ミュート画像を表示させます。
　
③.attr()
指定した名前のボタンに変更を加えます。
左側に変更する物を指定、右側に変更する内容を書いてコードを書き換えます。
その他にもいろんな活用方法がありますが、今回は.attr()のみを解説していきます。
　
④'src','data/image/config/mute.png'
ボタンの画像を上書き変更します。
’src’これはボタンの画像が保存されている場所で、
前のステップで紹介したgraphic=""にあたります。
そして'data/image/config/mute.png'が上書きする内容です。
この場合はミュート画像に変更したいので'mute.png'に変更しました。
ここで注意するのは、画像の場所を表すパスの指定。
dataフォルダから格納されている場所を指定します。
　
⑤else
条件分岐です
この場合だと音量が０以外だった時の処理にあたります。

⑥$('.bgmvol_'+tf.current_bgm_vol)
さっき指定した'.bgmvol0'の発展バージョンです。
前のステップでボタンに**'.bgmvol(音量)'の名前をつけたのはこのためで
設定されている音量と同じ名前のボタンを指定することができます。
　
⑦.attr('src','data/image/config/on.png');
指定した名前のボタンに変更を加えます。
ここでの処理は③・④で紹介した方法と同じです。
ただ、ミュート以外のボタンは普通のオンボタン画像にしたいので'on.png'(オンボタン)**を指定します。

ミュート画像を用意する場合の記述はこんな感じです。
今回は応用編なので、分からなくなったら前の工程「ミュートボタンがない場合」を確認してみましょう。

また、同じような方法で未読スキップも設定できます。

未読スキップ

[iscript]
//未読スキップ
  if (tf.text_skip=='ON') {
    $('.unread_on').attr('src','data/image/config/skip_on.png');
  }else {
    $('.unread_off').attr('src','data/image/config/skip_off.png');
  }
[endscript]

　
①if(tf.text_skip=='ON')
条件分岐を行います。
「tf.text_skip」つまり未読スキップがオンになっている時、{}で囲われた処理を行います。
　
②$('.unread_on').attr('src','data/image/config/skip_on.png');
指定した名前のボタン画像を変更します。
ここでは未読ボタンがオンになっている時の画像を指定してください。
.attr()については前の項目で詳しく解説しています。
　
③else
条件分岐を行います。
「else」は「if」で指定した条件に当てはまらない場合の処理なので
未読スキップがオフになっている時、こちらの処理が行われます。
　
④$('.unread_off').attr('src','data/image/config/skip_off.png');
指定した名前のボタン画像を変更します。
ここでは未読ボタンがオフになっている時の画像を指定してください。

これで、オンボタンの配置は終了です。

ここでの行うスクリプトの意味があまりよく分からなかった方は
あえてこの項目を飛ばして、そのまま次のステップへ進んじゃいましょう！

STEP9　コンフィグ画面の表示

いよいよラストパート！
……その前に、コンフィグ画面を表示させましょう。

今回はマスク(暗転)をかけて、その後ろで画面の準備をする方法で進めてきました。
ここで一度マスクを解除し、ゲーム画面にコンフィグ画面を表示してあげましょう。

;▼コンフィグ画面の表示
[mask_off time="500"]
[test_message_start]
[s]

　
①[mask_off time="500"]
マスク解除(暗転解除)を行います。
「time=""」でマスク解除までの時間を設定できるので、好きな時間を指定してあげましょう。
　
②[test_message_start]
プラグイン専用のタグです。
テキスト速度やオートウェイトの時間を確認できるテキストが表示されます。
興味のある方は、配布ページを確認してみてください。
　
③[s]
ゲーム停止・スクリプトの処理停止を行います。
これ以降のスクリプトは全てラベル処理なので、ここで一度ゲームを停止します。

コンフィグ画面の表示はこれで終了です！

今回は魔女で作ったコンフィグを参考にというコンセプトだったので
プラグインの紹介も含めて解説を行いました。

プラグインを使用しない方法の解説は……
リクエストがあれば、別途解説します〜💦

STEP10　コンフィグモードの終了

ここでは、STEP6で配置した戻るボタンを押した時の処理を行います。

ボタンを押した時にジャンプするラベル名は*「backgame」**だったので、まずはラベルを宣言してから次の工程へ進みましょう。

;▼コンフィグモードの終了
*backgame
;-表示されているボタンを削除
[clearfix]
;-コール処理を取り消す
[clearstack]
;-ゲームの再開
[awakegame]

　
①*backgame
ラベルを宣言します。
戻るボタンを押した時にこのラベルの処理が呼び出されます。
　
②[clearfix]
画面に表示されているボタンを削除します。
通常のボタンの削除は[cm]で行いますが、
今回画面に配置したボタンは全てフィクスボタンなのでこのタグでボタンを削除します。
　
③[clearstack]
コール処理を取り消します。
通常ボタンでラベルへジャンプした場合、リターン処理で元の場所へ戻れる「コール」扱いになっています。
そこでコールの命令を取り下げ、ゲームの動作を軽くします。
　
④[awakegame]
元のゲーム画面へ戻ります。
「アウェイクゲーム」の処理が入ると、直前まで行なっていたゲームの処理に戻ることができます。

※clearstackが必要な処理なのか…まだちょっと検討中です
※おまじない感覚で入れているので、もし詳しい方いらっしゃいましたらコメントで教えてくださると助かります…ﾄﾃﾓ…ﾄｯﾃﾓ…🧠

STEP11　各種設定を変更をしよう

長かったスクリプトも、これで最後です！

ここでは、各種設定ボタンを押した時の処理。
そして変数を利用して、音量やテキスト設定などの変更方法について解説していきます。

ボタンを押すと起きること

スクリプトを見る前に。
設定ボタンを押すと、どんな処理が始まるのかBGMを例にしておさらいしてみましょう！

■BGM音量が100になるボタンを押す
1 BGM音量が格納されている変数に100を代入
(tf.current_bgm_vol=100)
2 ボタンで指定されたラベルへジャンプ
(*vol_bgm_change)

■ラベルでの処理
1 ラベルへ到着
2 全てのBGMボタンを透明ボタンに
3 オンになっているボタンも含めて、全てが透明ボタンに
4 クリックされたボタンを探す
5 代入された変数とボタンの名前が一致している名前がヒット
(bgmvol_+tf.current_bgm_vol → bgmvol_100)
6 クリックされたボタンをオン画像へ変更
7 bgm音量を変数と同じ値に変更
(BGM音量 = tf.current_bgm_vol)
8 処理おしまい！

こんな流れで音量が変更されます！
このように、BGM変数(tf.current_bgm_vol)には役割が２つあります。

１：BGMの音量を管理
２：クリックされたBGMボタンがどれかを探す

この処理は今まで解説してきた内容の集大成にあたるので、
分からない部分があれば、そのつど見直して進めていきましょう！

ミュートボタンを設定しない場合

まずは基本の形である、ミュート画像がない場合の処理から解説していきます。

例としてテキスト速度の変更処理を上げて見てみましょう。

*ch_speed_change
[iscript]
$('.ch').attr('src','data/image/config/off.gif');
$('.ch_'+tf.current_ch_speed).attr('src','data/image/config/on.png');
[endscript]
[configdelay speed="&tf.current_ch_speed"]
[test_message_reset]
[return]

　
①*ch_speedchange
ラベルを宣言します。
テキスト速度を設定するボタンを押すと、このラベルの処理が呼び出されます。
　
②$('.ch')
画像を変更するボタンの名前を指定します。
テキスト速度ボタンに付けた２つの名前の内、全てのボタンに共通して付けた名前です。
つまり、テキスト速度ボタン全てが画像変更の対象になります。
　
③.attr('src','data/image/config/off.gif');
ボタンの画像を別のものに上書きします。
ここでの処理では、全てのテキスト速度ボタンが透明になります。
すでにONになっているボタンを透明の画像に変更するための処理です。
　
④$('.ch'+tf.current_ch_speed)
指定したボタン画像のみを上書きします。
ここで指定しているボタンはクリックしたボタンで、
クリック時にtf.current_ch_speedに値が代入されていることで、どれをクリックしたのかを判断しています。
ボタンに付けた名前の内１つ、数値を入力した名前のボタンが該当します。
たとえば100のボタンを押したら「.ch_100」
11のボタンを押すと「.ch_11」が対象になります。
　
⑤.attr('src','data/image/config/on.png');
クリックされたボタンの画像を「オンボタン画像」に上書きします。
.attr('src')についてはスルーでも大丈夫です。(詳しくはSTEP8で)

⑥[configdelay speed="&tf.current_ch_speed"]
テキスト速度を変更します。
「speed=""」には設定したいテキストの速度を入れれるので、
変数を代入して、任意のスピードに変更してあげましょう。
　
⑦[test_message_reset]
マクロ専用のタグです。
テストメッセージが再生中でも削除され、また最初からテキストを流し始めます。
テキストの再生を待たずに、すぐテキスト速度の確認が行えます。
　
⑧[return]
元の場所へ戻ります。
画面上では特に変化はありませんが、再度設定ボタンを押せるようになると判断してもらってOKです。

考えに詰まった場合は「ボタンを押すと起きる事」を見直したり。
分からないところの項目を読み直したりして、ゆっくり進めてみてください。

またここで紹介した[configdelay]ですが、似たようなタグに[delay]というものがあります。
これは一時的にテキストの速度を変えるものなので、設定を固定したい場合にはあまり向きません。

ミュートボタンを設定している場合

それではミュートボタンを設定している場合のスクリプトを見ていきましょう。

*vol_bgm_change
[iscript]
$('.bgmvol').attr('src','data/image/config/off.gif');
if (tf.current_bgm_vol==0) {
  $('.bgmvol_0').attr('src','data/image/config/mute.png');
}else {
  $('.bgmvol_'+tf.current_bgm_vol).attr('src','data/image/config/on.png');
}
[endscript]
[bgmopt volume="&tf.current_bgm_vol" effect="true"]
[return]

　
①*vol_bgm_change
ラベルを宣言します。
BGM音量を設定するボタンを押すと、このラベルへジャンプします。
　
②$('.bgmvol').attr('src','data/image/config/off.gif');
ボタン画像を全て透明ボタンにします。
これで、すでにオン画像になっているボタンも透明ボタンに上書きされます。
　
③if(tf.current_bgm_vol==0)
音量が０の時、行われる条件分岐を定義します。
音量が０＝ミュート状態にあるので、{}で囲われた範囲の処理が実行されます。
　
④$('.bgmvol0').attr('src','data/image/config/mute.png');
ミュート画像に上書きします。
.attr('src',)は要素を上書きする命令分なので、
「'data/image/config/mute.png'」を記入することで、ミュート画像に入れ替えられます。
　
⑤else
音量が０以外の時、行われる条件分岐を定義します。
音量が０以外＝音量がオン状態にあるので、{}で囲われた範囲の処理が実行されます。
　
⑥$('.bgmvol'+tf.current_bgmvol).attr('src','data/image/config/on.png');
オン画像を表示します。
$('.bgmvol'+tf.current_bgm_vol)と指定することにより、
クリックしたボタンを指定して、画像を上書きできます。
上書きする画像はオンボタンの画像パスを指定し、オンボタンを表示します。
　
[bgmopt volume="&tf.current_bgm_vol" effect="true"]
BGM音量を変更します。
[bgmopt]の「volume=""」でBGM音量を変更することができます。
音量が格納されているtf.current_bgm_vol変数を指定して、音量を変更してあげましょう。
また「effect="true"」は再生中のBGMに音量を即反映させるかの処理です。
デフォルトはtrueなので、すでにfalseに設定していない限りは省略しても問題ないです。

これで音量変更の処理はおしまいです。
SEやボイス音量も、これを参考にして処理を行います。

SE音量とボイス音量の分け方は、
[buf=""]というSEを分けて再生する機能を使って反映させます。
(ビルダーでのチャンネル機能)

STEP12　コンフィグ画面のテストプレイ

これでスクリプトはおしまいです！
お疲れ様でした！！

最後に今まで書いたスクリプトを再生して、テストプレイを行いましょう。

どんなにスクリプトが慣れている人でも
書いたスクリプトが一発で成功することは少ないです。

処理が途中で止まってしまった・ボタンが反応しない場合は
「コンソール」を確認して。

音量やテキスト設定が反映されていない場合は
「変数ウォッチ」を確認して。

根気強くトライアンドエラーを繰り返し、理想のコンフィグ画面を完成させましょう！

最後に

コンフィグ画面の作り方解説は、これにておしまいです。
すごく…長かった……。

スクリプトやJS覚えることがたくさんあって、本当に大変だったと思います。
この記事が、理想のゲームを作るお手伝いになったのなら幸いです！

製作中ゲームの進展と共に
これからも、ティラノツールに関する記事をまとめていくと思うので
どうぞよろしくお願いします！

※追記
想像以上に長くなってしまったので、HTML版作ります。
どの部分を読んでいても呼び出せる、目次・索引機能付き。
おまけでデモゲームとデータをつけちゃいます。
🧠＜しばしまて！

参考にした資料

・ティラノスクリプト
・ティラノビルダー
・てんぷらたべたい/ テストメッセージプラグイン
・シケモクMK/ ボイス音量設定
・魔女 -faust-