GridMapper開発メモ
CONTENTS
Hexグリッドの大きさは、指定された幅と高さを持つ楕円に内接する大きさである。
マップチップの回転も想定した、Hexグリッド用マスク。
半径を求める際、三平方の定理が非常に役立ちました。ピタゴラス万歳。
svgフォーマットに従って、以下のような仕様を予定。
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:gridmapper="http://www39.atwiki.jp/kgh07155/pages/11.html" gridmapper:version="20071012" width="320" height="240"> <gridmapper gridx="32" gridy="32" /> <defs> <image id="chip01" width="32" height="32" xlink:href="chip01.png"/> <image id="chip02" width="32" height="64" xlink:href="chip02.png"/> <image id="chip03" width="96" height="96" xlink:href="chip03.png"/> </defs> <g id="Layer0"> <image width="320" height="240" xlink:href="BackGround.JPG" /> </g> <g id="Layer1"> <use x="32" y="32" xlink:href="#chip01" /> <use x="64" y="32" xlink:href="#chip01" /> <use x="96" y="32" xlink:href="#chip01" /> <use x="128" y="32" xlink:href="#chip01" /> <use x="128" y="64" xlink:href="#chip02" /> <use x="96" y="128" xlink:href="#chip03" /> </g> </svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
xml文書であることを示す。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:gridmapper="http://www39.atwiki.jp/kgh07155/pages/11.html" gridmapper:version="20071012" width="320" height="240">
svg文書であることを示す。GridMapper独自情報のための初期設定も含む。
xmlns:gridmapper="http://www39.atwiki.jp/kgh07155/pages/11.html" | 独自情報を扱うことを意味する。URLは一時配布元に設定。 |
---|---|
gridmapper:version="20071012" | GM独自情報。ヴァージョンを示す。 |
<gridmapper gridx="32" gridy="32" />
GridMapper独自の基本情報。
gridx | gridy | グリッド情報。 |
---|
<defs> <image id="chip01" width="32" height="32" xlink:href="chip01.png"/> <image id="chip02" width="32" height="64" xlink:href="chip02.png"/> <image id="chip03" width="96" height="96" xlink:href="chip03.png"/> </defs>
チップ情報。チップ毎にidをつけ、チップの幅と高さを指定する。グリッド形状マスクを準備し、svgとしても表示対応させるかどうかは検討中。
<g id="Layer0"> <image width="320" height="240" xlink:href="BackGround.JPG" /> </g>
背景レイヤー情報。idをLayer0固定にする。
<g id="Layer1"> <use x="32" y="32" xlink:href="#chip01" /> <use x="64" y="32" xlink:href="#chip01" /> <use x="96" y="32" xlink:href="#chip01" /> <use x="128" y="32" xlink:href="#chip01" /> <use x="128" y="64" xlink:href="#chip02" /> <use x="96" y="128" xlink:href="#chip03" /> </g>
チップレイヤー情報。チップ名は対応するidを指定、配置座標は直接指定する(基本的にgridx gridyで指定した数値の倍数になる)。
作成したマップをsvg画像として正しく表示させる場合、グリッド線の表示、およびマスクを用いたチップ形状の整形が必要になる。以下のようになる予定(変更部分のみ)。
<gridmapper gridx="32" gridy="32" gridcolor="#000000" gridpolygon="Hex_H" />
GridMapper独自情報の基本情報。グリッド形状情報を付加。
<defs> <mask id="grid_1x1"> <polygon points="50,0 6.70,25 6.70,75 50,100 93.30,75 93.30,25 50,0" stroke="none" fill="#ffffff" transform="scale(0.32,0.32)" /> </mask> <image id="chip01" width="32" height="32" xlink:href="chip01.png" mask="url(#grid_1x1)" /> <image id="chip02" width="32" height="64" xlink:href="chip02.png"/> <image id="chip03" width="96" height="96" xlink:href="chip03.png"/> </defs>
チップ情報。チップ形状に応じてマスクを準備する。上記の<polygon>では、直径100pxの円に内接する正六角形を描き、scale属性でチップの大きさ(32×32)に縮小している。
<use x="0" y="0" xlink:href="#chip01" gridmapper:xy="0,0" /> <use x="27.71" y="0" xlink:href="#chip01" gridmapper:xy="1,0" /> <use x="55.42" y="0" xlink:href="#chip01" gridmapper:xy="2,0" /> <use x="13.86" y="24" xlink:href="#chip01" gridmapper:xy="0,1" /> <use x="41.57" y="24" xlink:href="#chip01" gridmapper:xy="1,1" /> <use x="69.28" y="24" xlink:href="#chip01" gridmapper:xy="2,1" />
チップレイヤー情報。チップ形状に合わせて表示位置を調整すると同時に、GridMapper上で扱う場合の座標も別に設定する。GridMapper上の座標を設定すると、チップ形状の変化による表示位置の調整がしやすくなる。
</g> <defs> <polygon id="gridline1" points="93.30,25 50,0 6.70,25 6.70,75 50,100 93.30,75" stroke="#000000" stroke-width="1" fill="none" /> </defs> <g id="Grid"> <use x="0" y="0" xlink:href="#gridline1" /> <use x="27.71" y="0" xlink:href="#gridline1" /> </g> </svg>
グリッド線レイヤー情報。
2007年10月12日
データをsvg形式にしようと考えたのは、Java製オンライン・セッション・ツール『たけとんぼ』の作者である幻月 輝夜氏のマップツール、『HEXA-MAP』のデータがxml形式だったことに由来する。 『HEXA-MAP』のデータはxml形式の独自仕様だったが、私はある日突然「xml形式+画像を扱う=svg形式にすれば良いではないか」と思いついた。元々絵を描くためsvgにも興味があり、簡単にだがsvgを試した経験があったからだ。そこでsvgの仕様を調べ、とりあえずグリッド・マップを扱うのに必要そうな部分だけをいろいろ試してみた結果、擬似的なチップ配置が可能なことが分かったので、ここにメモすることにした。 |