WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

Google MapとGeoHexでシミュレーションは可能か?

   

オンラインでもっとも利用される地図サービスGoogle Map。どちらかというと実用面が重視される傾向が強いGoogle Mapに、もっとゲームっぽい遊びを結び付けられないものか。そう考えていたところ、geogames.netというサイトを発見。ここで公開されているライブラリを使うと地図上を六角形のヘクスを配置することができます。 ヘクスマップは「大戦略」のなどシミュレーションでよく使われるシステム。非常に面白い試みなので、シミュレーションゲームを想定したいくつかの実験をすることに。 戦場となるエリアをヘクスで描画したところ google_map1 Google Mapでは特定の位置を示すのに、緯度と経度を用いていて、たとえば東京都心は(lat: 35.68, lng: 139.75)といった表され方をします。一方で、GeoHexは従来のと違い、ピンポイントで示すわけでない(点ではなく面)ので、ある座標をコード化したり、整数値のXY座標にしたりなど柔軟な方法で位置の特定や測定ができるようになります。また、描画後のヘクス位置を保存するときも、各地点のコードを配列などに保管すればいいので、管理も楽になります。 一方で、このポリゴン図形をFirebugで調べるとSVG要素を使っているようですが(IEは分からないですが)、マップ全体を本当にヘクスで埋め尽くそうとすると数千から数万の要素を作るので、ブラウザによって処理が固まったり重くなったりと大変な目に遭います。 結果としてはマップ全域をヘクスマップにするのは無理と考え、主要な通路(道路)や各勢力の支配地、通行できない区間など限定するのがいいと考えました。 とりあえず首都高をなぞるように描いてみたところ google_map2 地形などに合わせてヘクスの色を変えるといいかもしれません。 次にユニットのアイコンをどう配置するかという問題があります。これはAPIのMarkerクラス(地図上のマーカーを管理する)をそのまま戦車の画像などにして使うのがよさそうですね。 その他、ターン制の導入、敵ユニットの行動パターンの構築など・・・少しずつやっていこうと思います。 Google Mapのテスト用ページ

 - JavaScript/Ajax, ゲーム , , , ,