「@GridMapper_Note」の編集履歴（バックアップ）一覧はこちら
「@GridMapper_Note」(2007/10/21 (日) 20:52:58) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
&font(b,167%){GridMapper開発メモ}
&font(b,144%){CONTENTS}
#contents
**グリッドの幅・高さとHexグリッドの大きさの関係
Hexグリッドの大きさは、指定された幅と高さを持つ楕円に内接する大きさである。
-指定された幅と高さが等しい場合、Hexグリッドは正六角形である。
-指定された幅と高さが等しくない場合、Hexグリッドは正六角形を幅と高さの比に応じて伸縮したものである。
#image(GridHex.png)
**データファイル仕様
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表示完全対応）
作成したマップを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>
グリッド線レイヤー情報。
***付記
|&font(b){2007年10月12日}&br(); データをsvg形式にしようと考えたのは、[[Java製オンライン・セッション・ツール『たけとんぼ』>http://www.interq.or.jp/earth/geo-ark/yume/]]の作者である幻月 輝夜氏のマップツール、『HEXA-MAP』のデータがxml形式だったことに由来する。&br(); 『HEXA-MAP』のデータはxml形式の独自仕様だったが、私はある日突然「xml形式+画像を扱う=svg形式にすれば良いではないか」と思いついた。元々絵を描くためsvgにも興味があり、簡単にだがsvgを試した経験があったからだ。そこでsvgの仕様を調べ、とりあえずグリッド・マップを扱うのに必要そうな部分だけをいろいろ試してみた結果、擬似的なチップ配置が可能なことが分かったので、ここにメモすることにした。|
&font(b,167%){GridMapper開発メモ}
&font(b,144%){CONTENTS}
#contents
**Hexグリッドについて
***グリッドの幅・高さとHexグリッドの大きさ
Hexグリッドの大きさは、指定された幅と高さを持つ楕円に内接する大きさである。
-指定された幅と高さが等しい場合、Hexグリッドは正六角形である。
-指定された幅と高さが等しくない場合、Hexグリッドは正六角形を幅と高さの比に応じて伸縮したものである。
#image(center,GridHex.png)
-元画像（SVGフォーマット）&br();&ref(GridHex.zip)
***グリッド形状マスク
マップチップの回転も想定した、Hexグリッド用マスク。
#image(center,HexMask.png)
-元画像（SVGフォーマット）&br();&ref(HexMask.zip)
半径を求める際、三平方の定理が非常に役立ちました。ピタゴラス万歳。
**データファイル仕様
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>
-サンプルセット一式&br();&ref(GridMapperFormat.zip)
***仕様解説
<?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表示完全対応）
作成したマップを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>
グリッド線レイヤー情報。
***付記
|&font(b){2007年10月12日}&br(); データをsvg形式にしようと考えたのは、[[Java製オンライン・セッション・ツール『たけとんぼ』>http://www.interq.or.jp/earth/geo-ark/yume/]]の作者である幻月 輝夜氏のマップツール、『HEXA-MAP』のデータがxml形式だったことに由来する。&br(); 『HEXA-MAP』のデータはxml形式の独自仕様だったが、私はある日突然「xml形式+画像を扱う=svg形式にすれば良いではないか」と思いついた。元々絵を描くためsvgにも興味があり、簡単にだがsvgを試した経験があったからだ。そこでsvgの仕様を調べ、とりあえずグリッド・マップを扱うのに必要そうな部分だけをいろいろ試してみた結果、擬似的なチップ配置が可能なことが分かったので、ここにメモすることにした。|
