6.2 クリッカブルマップを作る

今回からコンフィグ画面を作っていくわけだけど、まずコンフィグ画面を作るのに欠かせないクリッカブルマップの作り方から見ていくね。
クリッカブルマップを作る時って、実際に表示される画像の他に「領域画像」と「領域アクション定義ファイル」が必要なんだよね。
ん、そだね。
今回使う画像はそれぞれこんな感じ。

<実際に表示される画像(config_bg.png)>

実際に表示される画像

<領域画像(config_bg_p.png)>

領域画像
※それぞれ縮小表示しています。

領域画像が11色に色分けされてるから、10箇所クリックできる部分があるってことだよね。
うん。領域画像はパレットインデックスを使うから256色の画像にしといてね。
で、それぞれのパレットインデックスの色とクリックした時の動作はこうなってるよ。

<領域画像の各パレットインデックスの色とクリックした時の動作>
パレットインデックス領域内をクリックした時の動作
0なし(クリックできない領域)
1コンフィグ画面を閉じる(Back)
2「ウィンドウ」にチェックを入れる
3「フルスクリーン」にチェックを入れる
4「ページ末まで一度に表示」にチェックを入れる
5メッセージ表示速度を設定する
6オートモード速度を設定する
7フォントを設定する
8「アンチエイリアス」にチェックを入れる
9BGM 音量を設定する
10SE 音量を設定する
11〜255なし(不使用)
※パレットインデックス 11 番 〜 255 番は使用しないのでどんな色でも構いません。

領域画像の詳しい作り方とかは「KAG System リファレンス」の「クリッカブルマップを使おう」の項目を参考にしてね。
それじゃ、次は領域アクション定義ファイルを作っていくね。
領域アクション定義ファイルには、それぞれの領域内をクリックした時にどんな動作をするかを書いとくんだよね。
そうそう。
パレットインデックス 0 番以外の領域のアクションに指定できる要素はこうなってるね。

<パレットインデックス 0 番以外の領域のアクションに指定できる要素>
要素名意味
storage文字列領域内をクリックした時にジャンプする先のシナリオファイル名
target文字列領域内をクリックした時にジャンプする先のラベル名
onenterTJS 式※1領域内にマウスカーソルが入った時に実行する TJS 式
onleaveTJS 式※1領域内からマウスカーソルが出て行った時に実行する TJS 式
hint文字列領域内にマウスカーソルを乗せた時に表示するツールチップヒント
expTJS 式※1領域内をクリックした時に実行される TJS 式
countpagetrue または false他のラベルにジャンプする時に、この場所のラベルを読んだとみなすかどうか
cursorマウスカーソル定数値※2またはマウスカーソルファイル名領域の上にマウスカーソルが乗っている時のマウスカーソルの形状
※1 正確には「TJS 式として評価可能な文字列」です。
※2 マウスカーソル定数値については「吉里吉里2リファレンス」の「マウスカーソル定数一覧」を参照してください。

cursor 以外は link タグの属性と同じ意味なんだよね。
ん、そうだよ。
あと、パレットインデックス 0 番のクリックできない領域だけは指定できる要素が違ってて、 指定できるのはこの autodisable だけなんだ。

<パレットインデックス 0 番の領域に設定できる要素>
要素名意味
autodisabletrue または falseクリック後にクリッカブルマップを自動的に無効にするか

これは true がデフォルトなんだけど、今回はコンフィグ画面を作るから false にしとくんだ。
そうなの?
だって true だと何か1つ設定しただけでクリッカブルマップが無効になるから、 それ以上設定できなくなっちゃうでしょ。
あ、そっか。そう言われればそうだね。
ってワケで、領域アクション定義ファイルはこんな感じになるよ。

<領域アクション定義ファイル(config_bg.ma)の中身>

; autodisable を false にすることで、クリッカブルマップをクリックしても、
; クリッカブルマップが無効にならないようにします(何回でもクリックできるようにします)
0: autodisable = false;
;「Back」をクリックした時は rclick.ks の *back にジャンプします
1: storage = "rclick.ks"; target = "*back";
; ウィンドウモードの「ウィンドウ」をクリックした時は rclick.ks の *window にジャンプします
2: storage = "rclick.ks"; target = "*window";
; ウィンドウモードの「フルスクリーン」をクリックした時は rclick.ks の *fullscreen にジャンプします
3: storage = "rclick.ks"; target = "*fullscreen";
;「ページ末まで一度に表示」をクリックした時は rclick.ks の *pagebreak にジャンプします
4: storage = "rclick.ks"; target = "*pagebreak";
;「メッセージ表示速度」のゲージをクリックした時は rclick.ks の *msgspeed にジャンプします
5: storage = "rclick.ks"; target = "*msgspeed";
;「オートモード速度」のゲージをクリックした時は rclick.ks の *autospeed にジャンプします
6: storage = "rclick.ks"; target = "*autospeed";
; フォント名が表示されている部分をクリックした時は rclick.ks の *font にジャンプします
7: storage = "rclick.ks"; target = "*font";
; フォントの「アンチエイリアス」をクリックした時は rclick.ks の *antialias にジャンプします
8: storage = "rclick.ks"; target = "*antialias";
; BGM 音量のゲージをクリックした時は rclick.ks の *bgmvolume にジャンプします
9: storage = "rclick.ks"; target = "*bgmvolume";
; SE 音量のゲージをクリックした時は rclick.ks の *sevolume にジャンプします
10: storage = "rclick.ks"; target = "*sevolume";

領域アクション定義ファイルってちょっと変わった書き方だよね。
んー、パレットインデックスを指定する部分以外は TJS スクリプトの書き方になってるんだけどね。
『パレットインデックス: 要素名 = 設定値; 要素名 = 設定値;…』っていう感じだね。
だから storagetarget は必ず "' で囲んで TJS の文字列の形式にしなくちゃいけないわけね。
でもコメントは KAG スクリプトみたいだよね?
確かに ; で始まる行がコメントとみなされるからね。
どのパレットインデックスも storage"rclick.ks" になってるけど、 これって右クリックサブルーチン用のファイル?
そだよ。前回コンフィグ画面は右クリックすると表示されるようにするって言ったでしょ。
あ、そうだったね。
それじゃ次は領域アクション定義に合わせて rclick.ks を作っていくね。
うん。
ホントは rclick.ks にウィンドウモードを切り替えたりメッセージ表示速度を設定したりするスクリプトを書かなくちゃいけないんだけど、 いっぺんにやると混乱しちゃうと思うから、そういうスクリプトはまた今度作ることにするね。
うん、りょーかい。
ってワケで、これが仮の rclick.ks のスクリプト。

<右クリックサブルーチンを定義するスクリプト(rclick.ks)(仮)>

; ※予め右クリックするとこのラベル(*rclick)にジャンプするように設定しておきます。
*rclick
; 右クリックでコンフィグ画面を閉じられるように右クリックの設定を変更します
[rclick jump=true storage="rclick.ks" target=*back enabled=true]
; 現在の状態をメモリ上の栞に保存しておきます
[tempsave place=0]
[iscript]
{
    var i;
    var elm = %["visible" => false];
    // 全ての前景レイヤを非表示にします
    for(i=0;i<kag.numCharacterLayers;i++)
        kag.fore.layers[i].setOptions(elm);
    // 全てのメッセージレイヤを非表示にします
    for(i=0;i<kag.numMessageLayers;i++)
        kag.fore.messages[i].setOptions(elm);
}
[endscript]
; 背景レイヤにコンフィグ画面の画像(クリッカブルマップ)を読み込みます
[image layer=base storage="config_bg" page=fore]
; メッセージ履歴の出力・表示を無効にします
[history output=false enabled=false]
; ユーザの操作を待ちます
[s]

; ※以下は仮の設定です

; ウィンドウモードの「ウィンドウ」をクリックした時に実行されるスクリプト
*window
[eval exp="System.inform('ウィンドウモードに切り替えます。')"]
[s]

; ウィンドウモードの「フルスクリーン」をクリックした時に実行されるスクリプト
*fullscreen
[eval exp="System.inform('フルスクリーンモードに切り替えます。')"]
[s]

; 「ページ末まで一度に表示」をクリックした時に実行されるスクリプト
*pagebreak
[eval exp="System.inform('ページ末まで一度に表示します。')"]
[s]

; 「メッセージ表示速度」のゲージをクリックした時に実行されるスクリプト
*msgspeed
[eval exp="System.inform('メッセージ表示速度を設定します。')"]
[s]

; 「オートモード速度」のゲージをクリックした時に実行されるスクリプト
*autospeed
[eval exp="System.inform('オートモード速度を設定します。')"]
[s]

; フォント名が表示されている部分をクリックした時に実行されるスクリプト
*font
[eval exp="System.inform('フォントを設定します。')"]
[s]

; フォントの「アンチエイリアス」をクリックした時に実行されるスクリプト
*antialias
[eval exp="System.inform('アンチエイリアスを有効にします。')"]
[s]

; BGM 音量のゲージをクリックした時に実行されるスクリプト
*bgmvolume
[eval exp="System.inform('BGM 音量を設定します。')"]
[s]

; SE 音量のゲージをクリックした時に実行されるスクリプト
*sevolume
[eval exp="System.inform('SE 音量を設定します。')"]
[s]

; コンフィグ画面を閉じます(「Back」をクリックした時/コンフィグ画面表示中に右クリックした時に実行されるスクリプト)
*back
; コンフィグ画面表示前の状態を復元します(但し BGM は復元しません(現在の BGM の再生を継続します))
[tempload place=0 bgm=false]
; メッセージ履歴の出力・表示を有効にします
[history output=true enabled=true]
; 右クリックで再びコンフィグ画面を表示できるようにします
[rclick call=true storage="rclick.ks" target=*rclick enabled=true]
[return]

仮のスクリプトのわりには長いね…
まぁ確かに見た目は長いけど別に難しいことはやってないから。
そうなの?
うん。じゃ最初から見ていくね。
まずはじめに、コンフィグ画面を表示してる時に右クリックするとコンフィグ画面を閉じられるように rclick タグの設定を変更してるんだ。
これってコンフィグ画面が表示されてる時に右クリックすると rclick.ks*back っていうラベルにジャンプするように設定してるんだよね?
そ。つまりクリッカブルマップの「Back」をクリックした時と同じ動作になるわけね。
あ、ホントだ。
領域アクション定義ファイル1 番の storagetargetrclick.ks*back になってるね。
コンフィグ画面表示中に右クリックするのと「Back」をクリックするのはどっちもコンフィグ画面を閉じることになるから、 同じラベルにジャンプすればいいよね。
なるほど、確かにそうだね。
で、次は tempsave タグを使って、 コンフィグ画面を表示する前の状態をメモリ上の栞に保存しとくの。
ここで保存してる状態って、コンフィグ画面を閉じる時に tempload タグでコンフィグ画面を表示する前の状態に戻すのに使うんだよね?
ん、そういうこと。
えっと、その次は TJS スクリプトになってるみたいだけど、これって何してるの?
コンフィグ画面を表示してる時は、それまで表示されてた前景レイヤとかメッセージレイヤがそのまま表示されてるとマズいから、 前景レイヤとメッセージレイヤを全部非表示にしてるの。
そっか。レイヤが表示されたままだとコンフィグ画面が見にくくなったりするもんね。
じゃあ、setOptions っていうのがレイヤを非表示にするメソッドってことなんだね。
setOptionslayopt タグを実行した時に呼び出されるメソッドなんだ。
えっと、それってつまり setOptions メソッドの引数の辞書配列の visible 要素に false を指定するのは、 visible 属性を false にして layopt タグを実行するのと同じってこと?
そう。setOptions メソッドの引数の辞書配列には layopt タグの属性が指定できるんだ。
なるほどね。
でも何でわざわざ layopt タグじゃなくて TJS スクリプトを使ってレイヤを非表示にしてるの?
あー、レイヤを非表示にするのは別に TJS スクリプトじゃなくても、layopt タグとか position タグを使っても OK だよ。
え、そうなの?
うん。TJS で書けば一時変数を使わなくてもいいからこうしてるだけ。
一時変数って tf. から始まる変数のこと?
そ。例えば tf.i っていう一時変数をここで使うと、 tf.i の中身を書き換えるわけだから、 他のスクリプトで tf.i を自由に使えなくなっちゃうよね。
TJS スクリプトにすると ielm はブロックの中だけでしか使えないから、 他のスクリプトでも同じ名前の変数を使えるってこと?
そういうこと。
でも TJS スクリプトでも KAG スクリプトでもどっちでも OK だから、どっちを使うかは自由だよ。
ところで kag.fore.layerskag.fore.messages って何だったか覚えてる?
えっ? え〜っと…確か kag.fore っていう辞書配列に表画面の情報が入ってて、 kag.fore.layers が前景レイヤの配列で、 kag.fore.messages がメッセージレイヤの配列になってるんじゃなかったっけ?
そうそう。§4.2 で説明したよね。
で、for ループでそれぞれのレイヤの visiblefalse にしてるから、 全部の前景レイヤとメッセージレイヤが非表示になるわけね。
なるほどね。
あ、for ループの条件のところの kag.numCharacterLayers っていう変数と kag.numMessageLayers っていう変数って、Config.tjs で設定できる前景レイヤの数の numCharacterLayers とメッセージレイヤの数の numMessageLayers のこと?
ん、そうだよ。ただ、laycount タグとかでレイヤの数を変えると kag.numCharacterLayerskag.numMessageLayers の値もそれに合わせて変わるから、 Config.tjs で設定してる初期値とは違う値になるけどね。
これでレイヤを非表示にしてる部分はわかった?
うん、おっけーだよ。
じゃ、次は image タグ だけど、これはわかるよね。
クリッカブルマップ用の画像を読み込んでるんだよね。
そう。ちなみに今回は領域画像名を config_bg_p.png にしてて、 領域アクション定義ファイル名を config_bg.ma にしてるから、これで自動的に領域画像と領域アクション定義ファイルを読み込んでくれるけど…
領域画像と領域アクション定義ファイルを他の名前にしたかったら、 こんなふうに mapimage 属性で領域画像を指定して、 mapaction 属性で領域アクション定義ファイルを指定すればいいんだよね。

<領域画像と領域アクション定義ファイルを指定する場合の image タグ>

[image layer=base storage="config_bg" page=fore mapimage=領域画像名 mapaction=領域アクション定義ファイル名]

ん、そういうこと。
その次history タグは、 output=false でメッセージ履歴にメッセージが出力されないようにしてて、 enabled=false でメッセージ履歴が表示できないようにしてるんだよね。
うん。まぁメッセージ履歴が表示できないようにするかどうかは好みによるけどね。
でも、メッセージ履歴にメッセージが出力されないようにするのは必須かな。
そうなの?
今は仮のスクリプトになっててメッセージレイヤには何も表示してないから、 別に enabled=false にしなくてもいいけど、 最終的にはメッセージレイヤを使ってフォント名を表示するようにするからね。
あ、そっか。メッセージ履歴にフォント名が表示されちゃったらおかしいもんね。
これでコンフィグ画面が表示できたから、後は s タグでシナリオの実行を停止して、 クリッカブルマップがクリックされるのを待つわけだね。
で、ここから先はクリッカブルマップがクリックされた時に実行される部分なんだけど…
なんかどれも inform メソッドが呼び出されるようになってるね。
まだ仮のスクリプトだからね。
この部分は次回から作っていくから、とりあえず今回は説明はパスするね。
うん、わかった。
じゃ、最後はコンフィグ画面を閉じる部分ね。
この部分って、「Back」の部分をクリックしたり、コンフィグ画面表示中に右クリックしたりすると実行されるんだよね。
ん、そう。
コンフィグ画面が表示される前の状態は tempsave タグを実行した時にメモリ上の栞に保存されてるから、 この栞に保存されてるデータを tempload タグで読み込めば自動的にコンフィグ画面が閉じられるってワケだね。
tempsavetempload って便利だよね〜。
だね。
今回はコンフィグ画面で BGM を変更してないから、bgm 属性を false にして、 BGM の情報を復元せずに現在の BGM の再生を継続するようにしてるけど、コンフィグ画面で BGM を変えるんだったら、 bgm 属性は true にした方がいいね。
bgm 属性ってデフォルトが true だからその時は省略してもいいんだよね。
うん。で、後は history タグでメッセージ履歴の設定を元に戻して、 rclick タグの設定を変更して、右クリックするとまたコンフィグ画面が表示されるようにすれば OK。
コンフィグ画面を閉じる方は結構カンタンだね。
大抵のことは tempload がやってくれるからね。
ただ、変数の値は tempsave した時の状態には戻らないから注意してね。
コンフィグ画面表示中に変数の値を変える時は注意しなくちゃいけないね。
必要に応じて tempload する時に手動で復元しないといけないからね。
じゃ、まだ仮の部分が多いけど、とりあえずここまでのスクリプトを実行してみよっか。
そうだね。
必要な画像とスクリプトはここに置いとくから、ちょっと実行してみて。
は〜い!

<実行結果>

実行の結果表示されたウィンドウ

えっと、右クリックすればいいんだよね?
うん。

右クリック後のウィンドウ

あっ、コンフィグ画面が表示された!
ん、ここまでは OK だね。
じゃあ、まだ機能は実装してないけど、とりあえずどこかクリックしてみて。
うん。それじゃ「ウィンドウ」をクリックしてみるね。

「ウィンドウ」をクリックした結果

「ウィンドウモードに切り替えます。」って表示されたね。
ん、とりあえず今はこんなところだね。
あ、あと「Back」でコンフィグ画面が閉じるかどうかも試してみて。
うん、「Back」の所をクリックしたらちゃんとコンフィグ画面が閉じたよ。
それじゃ、今回はここまで。
次回からそれぞれの機能を作っていくね。
じゃまた次回ね!


前へ | TOP | 次へ