GridMapper開発メモ

CONTENTS

Hexグリッドについて

グリッドの幅・高さとHexグリッドの大きさ

Hexグリッドの大きさは、指定された幅と高さを持つ楕円に内接する大きさである。

  • 指定された幅と高さが等しい場合、Hexグリッドは正六角形である。
  • 指定された幅と高さが等しくない場合、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表示完全対応)

 作成したマップを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の仕様を調べ、とりあえずグリッド・マップを扱うのに必要そうな部分だけをいろいろ試してみた結果、擬似的なチップ配置が可能なことが分かったので、ここにメモすることにした。
最終更新:2007年10月21日 20:52