| +++ クリッカブルマップを使うために +++ |
| ▼ 内容の一括ダウンロード （272KB） | 2003/10/07 | ||||||||||||||||||||||||||||
| ※ KAG3.18 のチュートリアルをベースとして解説しています | |||||||||||||||||||||||||||||
どうにも初心者が混乱に陥りやすいクリッカブルマップについて解説してみます〜。 ■ クリッカブルマップの作り方 ― 領域画像編 ／ 定義ファイル編 ／ 実行編 ／ おまけ クリッカブルマップは、ある場所をクリックされたとき、何かの反応をさせたい場合に使うと便利なものです。 これを使うには、以下の３つが必要になります。 ・ベース画像 ・領域画像 ・領域アクション定義ファイル まず領域画像というものを作ってみましょう。 領域画像は、ベース画像と同じ大きさをしている 256 色の画像 です。 たとえばベース画像が 640×480 だとしたら、領域画像も 640×480 で作るわけです。 ベース画像は、普通に [image] タグなどで読み込む背景画像や前景画像のことで、単色だろうが 16 色 だろうが 256 色だろうがフルカラーだろうが何でも構いませんし、ファイルの保存形式も問いません。 ですが、領域画像の場合は 256 色以下で保存された画像である必要があります。 ファイルの保存形式も、PNG 形式 以外は使えません。 ※チュートリアルには BMP も書かれていますが PNG でないと機能しないようです（＾＾； 領域画像のファイル名については、ベース画像と同じファイル名に _p をつけた名前 にすれば実行のとき 自動的に読み込んでくれます。 もちろん手動で読み込ませることもできるので _p をつけた名前にしなくても問題はありません。 では実際に作ってみます。 画像の作成には 「 PictBear 」 というフリーソフトを使っているので、以下はその場合で説明します。 まずベース画像を用意します。 今回は、キャラのどこかをクリックしたら何らかの反応を返す、というものを作ってみることにします。 というわけでうちの制作ゲームから水乃亜ちゃんにご協力（笑）  領域画像を作成するため、レイヤーを一枚増やし、適当な色で反応させたい部分をざくざくと塗ります。 細かく判定させたい場合は 「 自由選択 」 とか 「 多角形 」 とか使って塗ればいいですし、おおざっぱな 分け方でよければ通常の 「 範囲選択 」 とか 「 長方形 」 や 「 楕円 」 を使って塗るとよいかと。  てことで、こんな感じにしてみました。 ※ここで塗る色は何色でもいいのですが、領域としない部分を黒で塗るとあとで作業がひとつ減りまス。 これでいいなと思ったら、ひとまず名前を付けて保存します。 ただし PictBear はフルカラー専用ソフトなので 256 色以下の保存はできません。 ※開発中の新バージョンでは対応しているようですがβ版なので私は使ってないです。 仕方ないので、減色させることにしましょう。 減色するのにオススメなのは 「 Padie 」 というフリーソフトです。 ※実際は、いつも 「 Dibas32 」 というソフトを使って 256 色以下にしているのですが、こっちは現在入手 不可能なのでオススメができない（＾＾； 先ほど PictBear で保存した領域画像用のファイルを開き、減色ボタン  もしくは、メニューバーから「 編集 」 → 「 減色 」 を選択すると 「 減色設定 」 というウィンドウが出てきます。  まず 「 パレット作成 」 というところで色数を指定します。 通常ならば 「 8 ビット(256色) 」 にしたいところですが、そうするとあとでちょっと面倒なことになるので、 ここは 「 任意の数 」 にします。 「 ファイル 」 → 「 プロパティ 」 で使われている色数が表示されるので、先に確認しておき、数値を入力 するボックスにその色数を入れてください。 今回は 6 色なので、ボックスに 6 を入力しました。 「 ディザ方法 」 のモードは 「 （なし） 」 を指定。 「 エンジン 」 とか 「 透過 」 とか 「 バッチ 」 とかの項目は特に変更しなくて構わないと思います。 「 減色設定 」 のウィンドウで 「 ＯＫ 」 を選択すれば減色が実行されます。 新しく表示された画像（元と同じファイル名に () で色数が書いてあるほうですね）を保存しましょう。 同じファイル名で減色前のファイルに上書き保存しちゃってもいいですし、保存形式もお好きなほうで。 さて、これで領域画像として使える画像が用意できました。 でもまだこれだけでは領域アクション定義ファイルの作成には入れません。 ここでチュートリアルを見てみると、 領域画像とは、本体の画像の各領域に対応して、各領域を任意のパレットインデックスで 塗りつぶした物です。 ……と、あります。 一番疑問に思うのは 「 パレットインデックス 」 とは何だ、ということでしょうか。 そもそも画像はいろんな色を使って出来てますよね？ 画像には、その 「 使われている色の情報 」 が含まれています。 要するに絵の具で絵を描くときなどに使うあの 「 パレット 」 が、画像の中に、こっそりと組み込まれている わけです。 256 色で保存された画像は、 256 個の受け皿があるパレット を持っています。 16 色で保存された画像の場合は 16 個の受け皿です。 受け皿にはひとつずつ番号がついていて、その番号は 0 から始まり、256 色の画像なら 255 で、16 色 の画像なら 15 で終わります。 その受け皿の番号が 「 パレットインデックス 」 です。 カラフルな画像はもちろん、真っ白や真っ黒なだけの画像でもパレットの受け皿に色が置かれています。 でもこのパレットは画像がこっそりと持っているものなので、普通に画像を見ただけでは、どの受け皿に 何の色が置かれているのか教えてもらえません。 そこで、 256 色画像用のペイントソフト が必要になります。 256 色画像用のペイントソフトからなら、画像の持っているパレットが表示できるからです。 私は 「 EDGE 」 というソフトを使っていますので、以下はそのソフトの場合で説明していきます。 先ほど減色させた領域画像用のファイルを開きます。 カラーパレットのボタン  もしくはメニューバーから 「 表示 」 → 「 カラーパレット 」 を選択すると、その画像がこっそり持っているパレットの中身を見ることができます。 先に説明した通り、パレットの受け皿に番号がついているのがわかりますでしょうか。 
 試しに紫を選択してみると、番号が変わりました。 ※このソフトだと２つ表示されるのでややこしいですが、この場合、片方は気にしなくていいです。 左クリックで選択すれば左に、右クリックで選択すれば右に選択された色と番号が表示されるだけの話 なので（笑） ともかく覚えておくことは、左上から順番に 0 から 255 までの番号がつけられている ということです。 今回の場合でいうと
……ということになります。 ※ちなみに、減色のとき 「 任意の色 」 にしたのは、 256 色とかにするとパレットの中身が こんなふう に なっちゃうからです（＾＾； 別にこれはこれで 250 から番号指定すればいいのですが、自分としては左上 から色が並んでいるほうがわかりやすいもので。 ここで再びチュートリアルに戻ると、パレットインデックス 0 番は領域として使われない ということが書いて あります。 つまりパレットの中で、ひとつめの受け皿にはクリックされて何か反応を返す部分の色を置かないように しなければならないわけです。 今は青色が 0 のところに来てしまっていますから、このままのパレットで領域画像として使うと、青で塗った 部分がクリックされても何も反応してくれないということになってしまいます。 自分としては白で塗られた部分を無反応の領域にしたいのです。 なので、受け皿の位置を交換してやります。 「 ドラッグで、色の位置を変更します 」 のボタン  を選択し、白の受け皿を青の受け皿のところまでドラッグすると…  ふたつの色が無事に入れ替わりました。 これで、この画像のパレットには以下の通りに各番号の受け皿にそれぞれ色が置かれたことになります。
あとはこれで上書き保存なり、名前を付けて保存なりしてやれば、領域画像として使えるファイルの出来 上がりなのですが、減色のときに BMP で保存した場合は、ここで必ず PNG にしてくださいね。 ※ちなみに、色塗り時に領域としない部分を黒で塗っておくと、減色の時点で黒が番号 0 に来るので、 ここの入れ替え作業はしなくて済みます。 ただし、ここで保存される画像は 256 色形式になります。 ファイルサイズにこだわらない場合は別にいいかと思いますが、ファイルサイズが気になり、使用色数が 16 色以下の場合は、16 色でも保存できるソフトを使うほうがいいかもしれません。 ※私の場合はファイルサイズ気になるほうなのですが Dibas32 を使えば 16 色で保存できるのでいつも この手順で作ってます（＾＾； 次は領域アクション定義ファイルを作ります ... | |||||||||||||||||||||||||||||
書かれている内容に対する質問やご意見は、当サイトの掲示板かメールにてお受け致します。 このページの内容についてを W.Dee 氏に質問するのはご容赦くださいね（＾＾； 混乱させてしまうのではないかと思いますので… また、これらの解説は全てらんかの知識によるもので、間違いがないとは限りません。 ツッコミどころがありましたら、ぜひご一報くださいませ m（_ _）m |
|||||||||||||||||||||||||||||
[ メニューへもどる ]