css3 or canvas or SVG---HTMLゲームで地図を描くにはどれ使う？

diary


MMORPGブラウザゲームにて地図を斜めから見た地図をHTML上にどう描くかについて、

JavaScriptによる描画ロジックと三つの実現方法(css3,canvas,SVG)のどれが一番いいのかについての一考察です。

HTMLでグラフィックスの描画を実現する技術として今現在、実用的なものとしてcss3, canvas, SVGがあります。

全ての方法でデモを作ってみましたので、先にデモから見てもらいましょう。



css3で実装する

これが当然、一番簡単、軽量、お手軽で、ベストなソリューションです。

しかし、css3の実装状況がまちまちであり、使用可能なブラウザを選ぶので、その点だけ注意が必要です。





canvasで実装する

マップの描画のみであれば、一番簡単でなじみやすい方法かもしれません。

しかし、地図の番地をクリックしてどこか別のページに移動するとかが必要な場合（ほとんどの場合必要）、

クリック検知しイベントハンドリングするロジックをさらに実装する必要があり、少々面倒です。



SVGで実装する

SVGはマークアップ言語（XML）で、描画したオブジェクトを通常のDOMのように扱えるので大変便利です。

また、ベクター(線)でデータを持っているので、拡大しても劣化しないという点も、タブレットなどマルチデバイス対応が必要な場合有利です

（ちなみにcanvasはビットマップで情報を持っています）。

難点はAndroid2.X系で実装されていないところ。この一点に尽きると言ってもいいと思います。

しかしこれから発売されるAndroid機はほとんどの場合Android4系となるのでSVGは本格普及する可能性があります。

ちなみにこの実装デモでは、canvasライクにSVGが使え（学習コストが低い）、しかもIE6までブラウザ対応してくれる（！）という素晴らしいJavaScriptライブラリraphaelを使っています。

実装後気づいたのですが、各オブジェクトに固有のidがデフォルトで振られるみたいです。

$(#{ひし形のid名}).click(function(){});といったイベントハンドリングが可能なので（canvasにはこれがないのです）、Android2系に対応する必要がなければベストな方法なのではないかと思いました。



最後に、今回使った地図の座標点を指定するアルゴリズムについて少々解説を。。

x方向とy方向に、二つのfor文を使って、同じ間隔で少しずつずらしながらひし形を並べていきます。

1)地図を作りたい大きさの幅(width)と高さ(height)をとります。

2)widthとheightを、それぞれマス目の数*２の数で割り、それぞれをcellX,cellYとします。

3)xは0,yはheight/2、つまり縦軸のちょうど真ん中と横軸は左端を始点とし、下記の法則で描画すれば均等に分割された菱形の座標が得られます。



(i=0; i<cellの数;i++){
( j=0;j<cellの数;j++){
左のx = cellX*(i+j);

左のy = halfY-cellY*(i-j);

上のx = cellX*(i+j+1);

上のy = halfY - cellY *(i-j+1);

右のx = cellX*(i+j+2);

右のy = halfY - cellY *(i-j);

下のx = cellX*(i+j+1);

下のy = halfY+cellY-cellY*(i-j);

}

}



こういったグラッフィックスをHTMLで作成する場合、対応ブラウザ（デバイス）に応じて、また、地図にのせるオブジェクト（お城や作物など）も別途必要なので、それらを加味したうえで、ベストな方法を検討し、実装する必要がありそうです。

そういった際の、参考に少しでもなれば幸いです。