SVG---HTMLゲームで地図を描くにはどれ使う?MMORPGブラウザゲームにて地図を斜めから見た地図をHTML上にどう描くかについて、JavaScriptによる描画ロジックと三つの実現方法(css3,canvas,SVG)のどれが一番いいのかについての一考察です。全ての方法でデモを作ってみましたので、先にデモから見てもらいましょう。お手軽で、ベストなソリューションです。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を、それぞれマス目の数*2の数で割り、それぞれをcellX,cellYとします。3)xは0,yはheight/2、つまり縦軸のちょうど真ん中と横軸は左端を始点とし、下記の法則で描画すれば均等に分割された菱形の座標が得られます。iこういったグラッフィックスをHTMLで作成する場合、対応ブラウザ(デバイス)に応じて、また、地図にのせるオブジェクト(お城や作物など)も別途必要なので、それらを加味したうえで、ベストな方法を検討し、実装する必要がありそうです。いった際の、参考に少しでもなれば幸いです。行ってきました通勤電車で作曲し、そのままSoundCloudでシェアできるって素晴らしい月別アーカイブはてなブログをはじめよう!dentaqさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。