6.4 コンフィグ機能の実装(その2)

今回はまずメッセージ表示速度の設定機能から作っていくね。
は〜い。
ゲージの部分をクリックすると、クリックした位置にメッセージ表示速度が設定されるように作ることにするね。
これだとメッセージ表示速度が細かく設定できて便利そうだけど、これってクリッカブルマップで作れるの?
クリックされた位置を調べれば作れるよ。
クリックされた位置?
例えば、メッセージ表示速度の最小値(一番速い時の値)を 0 ミリ秒/文字にして、 最大値(一番遅い時の値)を 100 ミリ秒/文字にしたとするね。
ミリ秒/文字って?
ミリ秒/文字ってのは KAG のメッセージ表示速度の単位で、1文字表示するのに何ミリ秒かけるかってこと。
例えば、50 ミリ秒/文字だったら、1秒間に 1000÷50=20 文字表示されるってこと。
えっと、じゃあ delay タグの speed 属性に指定する値と同じ単位ってこと?
うん、そうだよ。ちなみに 0 ミリ秒/文字はノーウェイト(nowait)のことね。
で、メッセージ表示速度のゲージは左上の点の left が 146 で、 幅が 360 ピクセルだから、例えば left が 308 の所(×印の所)がクリックされたとすると…

<メッセージ表示速度の設定法>

表示速度=100−(308−146)×100÷349=55ミリ秒/文字

こうやって計算すれば、メッセージ表示速度を 55 ミリ秒/文字に設定すればいいってわかるんだ。
なんかちょっとややこしい計算だね。
ん〜、詳しい説明は省略させてもらうけど、ゲージの位置や幅を変えたい場合とか、 設定できる値の範囲を変えたい場合はこうやって計算すればちゃんと設定できるよ。

<メッセージ表示速度の設定法(一般の場合)>

う〜ん、どうやってメッセージ表示速度を計算するかはなんとなく解ったけど、 どうやってクリックされた位置を調べるの?
Layer クラスの cursorX プロパティを使うの。
cursorX プロパティ?
cursorX プロパティっていうのは、 今マウスカーソルがある位置の x 座標をそのレイヤの表示座標系で設定・取得できるプロパティだよ。
例えば…

cursorX, cursorY プロパティ>

このウィンドウの中にある紫色のレイヤの左端から 66 ピクセルの所にマウスポインタがあるから、 この状態だと紫色のレイヤの cursorX プロパティは 66 になるんだ。
あと cursorY っていうプロパティもあって、 これはレイヤの上端からマウスポインタまでの距離になるから 107 になるわけね。
じゃあ「そのレイヤの表示座標系」っていうのは、そのレイヤの左上を (0, 0) とした時の座標ってことなんだね。
そうそう。
で、コンフィグ画面は背景レイヤがクリッカブルマップになってるから、 背景レイヤの cursorX プロパティを使って、どの位置がクリックされたかを調べるの。
kag.fore.base.cursorX っていう感じ?
そ。だから「メッセージ表示速度」のゲージがクリックされた時に実行されるスクリプトはこうなるよ。

<「メッセージ表示速度」のゲージがクリックされた時に実行されるスクリプト>

*msgspeed
[eval exp="kag.userChSpeed = 100 - (kag.fore.base.cursorX - 146) * 100 \ 359"]
[call target=*update_msgspeed]
[s]

kag.userChSpeed っていうのは?
userChSpeed はユーザが選択したメッセージ表示速度を表す kag オブジェクトのメンバ変数だよ。
ユーザが選択したメッセージ表示速度って?
delay タグとか nowait タグでユーザの意思とは無関係にスクリプト側で設定したメッセージ表示速度じゃなくて、 ユーザがメニューとかコンフィグ画面とかで選んだメッセージ速度のことだよ。
だから普通はユーザが選択したメッセージ表示速度が実際のメッセージ表示速度になるね。
あ〜、そういう意味ね。
じゃあ、メッセージ表示速度をさっきのやり方で計算して、 kag.userChSpeed に代入すればメッセージ表示速度を設定できるんだね。
うん。で、後は「メッセージ表示速度」の現在値表示を更新するサブルーチンを呼び出して完了。
現在値表示ってどうやって更新するの?
このインジケータ画像をクリックされた場所に移動するの。

<メッセージ表示速度用インジケータ画像(indicator_msg.png)>

インジケータ画像(▲)

えっと、じゃあそのインジケータ用画像にも前景レイヤを使うの?
うん。メッセージ表示速度のインジケータ用にも専用のレイヤが必要だからね。
コンフィグ画面を初期化する時にこんな感じでレイヤを作っとくの。

<「メッセージ表示速度」のインジケータ画像表示用レイヤの設定>

[image layer=2 storage="indicator_msg" page=fore visible=true top=184]
※メッセージ表示速度用のインジケータ画像の表示には 2 番の前景レイヤを使うことにします。

インジケータは横にしか動かないから、top の値は予め設定しとくわけね。
ってことは、表示を更新する時にはインジケータのレイヤの left を更新するってことだよね?
ん、そう。だから layopt タグを使って、こうやって更新するの。

<「メッセージ表示速度」の現在値表示を更新するサブルーチン>

*update_msgspeed
[layopt layer=2 page=fore left="&496 - kag.userChSpeed * 359 \ 100"]
[return]

この left の値ってどうやって計算してるの?
まず、クリックされた位置とメッセージ表示速度の間にはこういう関係が成り立つよね。

<クリックされた位置(kag.fore.base.cursorX)とメッセージ表示速度(kag.userChSpeed)の関係を表す等式>

kag.userChSpeed = 100 - (kag.fore.base.cursorX - 146) * 100 \ 359
注)この式は左辺と右辺の値が等しいということを示す等式であり、TJS スクリプトではありません。

で、この等式を変形すると…

<上記の等式を変形した等式>

kag.fore.base.cursorX = 505 - kag.userChSpeed * 359 \ 100
注)この式も同様に TJS スクリプトではありません。

こうなるの。
インジケータはクリックされた位置に移動すればいいから、left の値は kag.fore.base.cursorX に合わせればいいってワケ。
う〜ん、確かに left の値に似てるけど、 left の値の方は 505 じゃなくて 496 になってるよ?
あぁ、それはクリックされた場所にインジケータ画像(▲)の上の頂点が来るようにするためだよ。
どういうこと?
インジケータ画像(▲)の上の頂点は画像の左端から 9 ピクセル右にあるから、 インジケータ画像の leftkag.fore.base.cursorX より 9 小さい値に設定しなくちゃいけないんだ。
図にするとこんな感じだね。

<インジケータ画像の left の設定>

インジケータ画像用レイヤの x 座標 = kag.fore.base.cursorX - 9

なるほどね。それでインジケータ用レイヤの leftkag.fore.base.cursorX - 9 になるんだね。
で、さっきの式を使って kag.fore.base.cursorX - 9 を計算すると…
496 - kag.userChSpeed * 359 \ 100 になるんだね。
ん、そういうこと。
じゃこれで表示速度の設定はできたから、次は「ページ末まで一度に表示」のチェックボックスね。
これってメニューの「文字表示」−「表示速度」−「ページ末まで一気に」を選択するのと同じなんだよね?
そうそう。作り方は前回の「アンチエイリアス」のチェックボックスと大体同じだよ。
じゃあこのチェックボックスにも専用の前景レイヤを使うの?
うん。コンフィグ画面の初期化の時にこんな感じで初期化しとくの。

<「ページ末まで一度に表示」のチェック画像表示用レイヤの設定>

[image layer=3 storage="checked" page=fore visible=false left=290 top=135]
※チェック画像の表示には 3 番の前景レイヤを使うことにします。

このチェックボックスも「アンチエイリアス」のチェックボックスと同じで移動しないから、 最初に lefttop を設定できるんだね。
だから表示を更新するサブルーチンもアンチエイリアスの時と同じで、 visible を設定するだけで OK。

<「ページ末まで一度に表示」のチェックボックスの表示を更新するサブルーチン>

*update_pagebreak
[layopt layer=3 page=fore visible="&kag.chNonStopToPageBreak"]
[return]

kag.chNonStopToPageBreak っていうのがページ末まで一度に表示するかどうかってこと?
そ。chNonStopToPageBreakkag オブジェクトのメンバ変数で、 true なら l タグを無視してページ末まで一度に表示されるよ。
で、これがクリッカブルマップがクリックされた時に実行されるスクリプト。

<クリッカブルマップの「ページ末まで一度に表示」をクリックした時に実行されるスクリプト>

*pagebreak
[eval exp="kag.onChNonStopToPageBreakItemClick()"]
[call target=*update_pagebreak]
[s]

kag.onChNonStopToPageBreakItemClick ってやっぱりメニューの「ページ末まで一気に」を選択した時に呼び出されるメソッドなんだよね?
うん。onChNonStopToPageBreakItemClick メソッドは「ページ末まで一気に表示」の ON と OFF を切り替えるの。
じゃ、これでメッセージ表示速度の設定機能は出来たから、次はオートモード速度の設定機能を作っていくね。
は〜い。
まぁオートモード速度はメッセージ表示速度と同じように作れるんだけどね。
まずオートモード速度には「ページ末ウェイト」と「[l]ウェイト」の2種類があるから、 それぞれの最小値と最大値をこう設定しとくね。

<オートモード速度(待ち時間)の設定(単位はミリ秒)>
最小値(最速)最大値(最遅)
ページ末ウェイト1004000
[l]ウェイト502000

後は、メッセージ表示速度の時と同じようにこうやって待ち時間が計算できるから…

<オートモード速度の設定法>

「オートモード速度」のゲージがクリックされた時に実行されるスクリプトはこうなるの。

<「オートモード速度」のゲージがクリックされた時に実行されるスクリプト>

*autospeed
[eval exp="kag.autoModePageWait = 4000 - (kag.fore.base.cursorX - 146) * 3900 \ 359"]
[eval exp="kag.autoModeLineWait = 2000 - (kag.fore.base.cursorX - 146) * 1950 \ 359"]
[call target=*update_autospeed]
[s]

えっと、これって kag.autoModePageWait がページ末ウェイトで、 kag.autoModeLineWait[l]ウェイトになってるのかな?
ん、そうだよ。
autoModePageWaitautoModeLineWait はそれぞれページ末ウェイトと[l]ウェイトを表す kag オブジェクトのメンバ変数なんだ。
じゃあ、ページ末ウェイトと[l]ウェイトの計算に使ってる値はこんな感じになってるってことかな?

<オートモード速度の計算に使っている値>
ページ末ウェイト(kag.autoModePageWait)[l]ウェイト(kag.autoModeLineWait)
w360360
L146146
lkag.fore.base.cursorXkag.fore.base.cursorX
s40002000
f10050

ん、そういうことだね。
あとはインジケータ画像の表示だけど、これはメッセージ表示速度の時とほとんど同じ。
あ、オートモード用のインジケータ画像はこれね。

<メッセージ表示速度用インジケータ画像(indicator_auto.png)>

インジケータ画像(▲)

で、コンフィグ画面を初期化する時にこうやって初期化しとくの。

<「オートモード速度」のインジケータ画像表示用レイヤの設定>

[image layer=4 storage="indicator_auto" page=fore visible=true top=254]
※オートモード速度用のインジケータ画像の表示には 4 番の前景レイヤを使うことにします。

属性値は違ってるけど、指定してる属性はメッセージ表示速度のインジケータの時と同じだね。
現在値表示を更新するサブルーチンもほとんど同じだよ。

<「オートモード速度」の現在値表示を更新するサブルーチン>

*update_autospeed
[layopt layer=4 page=fore left="&137 + (4000 - kag.autoModePageWait) * 359 \ 3900"]
[return]

え〜っと…じゃあ、メッセージ表示速度の時と同じように考えると…

<クリックされた位置(kag.fore.base.cursorX)とオートモードのページ末ウェイト(kag.autoModePageWait)の関係を表す等式>

kag.autoModePageWait = 4000 - (kag.fore.base.cursorX - 146) * 3900 \ 359

こーいう等式が成り立つってことだよね?
で、この等式を変形すると…

<上記の等式を変形した等式>

kag.fore.base.cursorX = 146 + (4000 - kag.autoModePageWait) * 359 \ 3900

こうなるから…
left の値は kag.fore.base.cursorX - 9 だから、 137 + (4000 - kag.autoModePageWait) * 359 \ 3900 になるんだね。
そういうこと。
んじゃ、これでオートモードの設定機能も作れたわけだけど、結構長くなっちゃったから BGM と SE の音量設定機能は次回作ることにするね。
うん、りょ〜かい。
それじゃ、また次回ね!


前へ | TOP | 次へ