 |
あのね、さっき遊んでたゲームで、画面をクリックすると、クリックした場所によって違ったメッセージが表示されたんだけど、吉里吉里/KAGでそんなことできる？
|
 |
できるよ。
クリッカブルマップって言うの。
|
|
でも、難しいんだよね・・・
|
|
難しいというか、ややこしいというか・・・
最後にふさわしい課題だね。
|
|
最後なの？
|
|
とりあえず、基本編はね。
|
|
そっか、なんか感無量だなぁ。
|
|
それじゃ、さっそくクリッカブルマップについてだけど・・・
クリッカブルマップは直訳すると「クリックできる地図」だね。
|
|
地図？
|
|
さっき話をしてた、クリックする場所によって処理を変えるためには、「クリックする場所」を指定しなきゃいけないでしょ。その「場所」を地図のように分けるってことなの。
・・・って、言葉だけじゃ分かりにくいよね。KAGのリファレンスにこういう画像があるんだけど・・・
|
|
 
|
|
この画像の右側を見ると、地図が色分けされてるでしょ？
|
|
うん。
|
|
この色には、0から255までの番号がついていて、クリックされると吉里吉里はクリックされた場所の色の番号を調べるのね。
|
|
ふむふむ。
|
|
例えば5番の色の場所がクリックされたら、5番の処理をするわけ。
|
|
5番の処理って？
|
|
それはまた後で説明するよ。
で、左側の画像が実際に画面に表示される画像ね。
|
|
右側は表示されないんだ。
|
|
右側の画像は、あくまでどの部分がクリックされたかを色分けしてるだけ。
実際に表示されるのは左側だけなんだよ。
|
|
そっか。
じゃあ、右側の色分け画像を使うためのタグがやっぱりあるんだよね。
|
|
右側の画像を、領域画像って言うんだけど、これを指定するには2つの方法があるの。
ひとつはファイル名を設定する方法ね。
|
|
設定？
ファイル名を？
|
|
設定というか、ファイル名の付け方、かな。
例えば、左側の表示画像のファイル名が map1.png という名前だとするでしょ。
このとき、領域画像ファイルのファイル名を map1_p.png という風に _p をつけると、imageタグでmap1.pngの画像を読み込むときに吉里吉里/KAGが自動的にmap1_p.pngを領域画像として読み込んでくれるの。
|
|
何もしなくていいの？
|
|
何もしなくていいの。
|
|
それは楽チンだ。
|
|
もうひとつは、imageタグの中で明示的に設定する方法ね。領域画像のファイル名を仮に map2.png だとすると、次のような書き方をすればいいんだよ。
|
|
[image storage="map1.png" layer=base page=fore mapimage="map2.png" mapaction="map1.ma"]
|
|
mapaction ってなに？
|
|
ついでだから書いておいたんだけど、これがさっき話したクリックされたときの処理を書いておくための「領域アクション定義ファイル」なんだよ。
このファイルの中に、「5番の色の領域がクリックされたら〜する」という処理を書いておくの。
|
|
なるほど。
|
|
このファイルも、map1.ma という感じで、表示画像ファイル.ma という名前を付けることで自動的に領域アクション定義ファイルとして読み込んでくれるよ。
|
|
このファイルの中もKAGのタグを書いておけばいいの？
|
|
ううん。
この中はちょっと特殊なフォーマットで書くの。こんな感じ。
|
|
1: storage="first.ks"; target="*start"; hint="start";
2: storage="second.ks"; target="*label"; hint="second";
|
|
linkタグの属性だけって感じ？
|
|
そうだね。
ちなみに、各行の最初の 1: とか 2: っていうのが、色の番号ね。
|
|
色番号1がクリックされたら、シナリオファイル first.ks のラベル *start に飛ぶってことだね。
|
|
そういうこと。
|
|
hintって？
|
|
linkタグとかbuttonタグにも同じ属性があるんだけど、マウスを乗せた時に表示されるヒントだよ。
|
|
なんだか、できそう気がしてきたよ。
|
|
じゃあ、上のサンプル画像使って何か作ってみる？
|
|
むむむ・・・
|
|
「first.ks」
*start
[image storage="map1" layer=base page=fore]
*wait
[s]
*1
１がクリックされたよ。[p][er]
[jump target="*wait"]
*2
２がクリックされたよ。[p][er]
[jump target="*wait"]
「map1.ma」
1: storage="first.ks"; target="*1"; hint="1だよ";
2: storage="first.ks"; target="*2"; hint="2だよ";
|
|
できた！
|
|
どれどれ・・・
|
|
あれ？
1回はちゃんと動くけど、2回目から動かないよ。
|
|
うん、クリッカブルマップは1回クリックするとリセットされちゃうんだよ。
|
|
何回もクリックしたい時はどうしたらいいの？
|
|
さっきのサンプルなら、jump先を *wait から *start に変更するだけで大丈夫だよ。
imageタグで読み込みなおすと、クリッカブルマップも再設定されるから。
|
|
あ、ほんとだ。
|
|
ただ、この場合、ジャンプしてから再度画像を読み込むまでの間はクリッカブルマップは無効になってるからね。
|
|
もしかして、それを解決する方法もあるの？
|
|
あるの。
領域アクション定義ファイルを、次のように書くとクリックされてもリセットされずにクリッカブルマップはずっと有効のままなんだよ。
|
|
0: autodisable=false;
1: storage="first.ks"; target="*1"; hint="1だよ";
2: storage="first.ks"; target="*2"; hint="2だよ";
|
|
どっちの方法がいいかは、どういう風に作るかによるから、うまく使い分けるといいよ。
で、これを見て何か気づくことない？
|
|
気づくこと？
うーん・・・・・・・
あ！
これだと、色番号0はどうすればいいの？
|
|
色番号0の領域は、こんな感じで特殊な意味を持ってるから、普通のクリッカブルマップの領域としては使えないんだよ。
逆に、クリックする必要のないところは色番号0の色で塗りつぶしておけばいいってことね。
|
|
ところでさ、さっきから色番号って言ってるけど、それってどうやったら分かるの？
色番号って決まってるの？青が1、赤が2って。
|
|
ううん、決まってない。
画像によって色と番号はバラバラなんだよ。
|
|
じゃあ、どうしたらいいの？
|
|
インデックスカラーを扱える、画像編集ソフトを使うのが一番手っ取り早いかな。
|
|
インデックスカラーって？
|
|
普通のフルカラー画像の場合は色は番号で保存されてないんだよ。
インデックスカラーで保存された画像は、使える色が256色に限定されるけど、その色に番号が付けられるってわけ。
|
|
Windowsについてるペイントでも大丈夫かなぁ？
|
|
256色のBMPファイルとしては保存できるけど、色番号は分からないからオススメはできないかな。
フリーソフトでもインデックスカラー画像を扱えるソフトはたくさんあるから、色々使って試してみるしかないね。
ちなみに、私はGIMPがオススメかな。
|
|
わかった。
いろいろ試してみるよ。
|
|
それと、保存するときは 256色（インデックスカラー）のPNGがいいよ。
JPEGはインデックスカラー扱えないしね。
|
|
わかった。
|
|
これで、クリッカブルマップはおしまい。
|
|
領域画像と領域アクション定義ファイルを準備するのが大変そうだね。
|
|
何事も習うより慣れろ、だよ。
|
|
わかってる。
頑張ります。
|
|
さてと・・・
これで、基本的なKAGの使い方はひと通り終わったわけだけど、どうだった？
|
|
思ってたよりも、簡単に作れそうな気がしてきたよ。
|
|
でしょ？
凝ったことをしようと思うと、いろいろ壁にぶつかることもあると思うけど、同梱のリファレンスを読めばヒントがたくさん載ってるし、どうしても分からなければ公式サイトに掲示板もあるから、きっと助けてもらえるよ。
ただし、何でもかんでも助けてもらうんじゃなくて、自分で調べられることは調べないとね。
|
|
肝に銘じておきます・・・
|