Canvas DE ダンジョン!
HTML5のグラフィック機能
Canvasを使ったダンジョンゲーム
⇒パステルカラーのダンジョンゲームをプレイしよう
次世代HTML規格といわれる
HTML5には、
CanvasというHTML要素が追加されています。
CanvasによってこれまでHTML/JavaScriptだけでは不可能だったグラフィック機能が利用でき、Flashに頼らなくても高度なエフェクトを実装できるようになります。
ところで以前、
3Dダンジョンゲームというページでウィザードリィ風のダンジョンゲームを公開しました。ここでは
wz_jsgraphics.js(
作者ページはいつの間にかリンク切れになってますが……)というずい分前からある図形描画ライブラリを用いました。一方、このライブラリはほぼすべてのブラウザで動作するのですが、DOMを使って疑似的にグラフィックを表現しているので、ブラウザによって処理速度に開きが出たり、動作が重くなってしまいます。
このダンジョン描画に
Canvasを使うとどうなるか、というのを今回試してみたところ、当たり前というか描画速度が格段に速いのが分かります。また、複雑な曲線や画像の回転といった高度な機能を使う必要がないので、スクリプトの書き換えもスムーズにいきました。
また、
CanvasはIEに実装されていないため、IE対策のためにGoogleの
ExplorerCanvasというJSライブラリを使いました。
このダンジョンゲームは
JS ADV.jsをベースとして、新たにダンジョンゲーム機能の
Canvas Dungeon.jsを追加して作成しました。
また、
マップデータは
3Dダンジョンのマップを作成しようで作成したデータを使っています。
-
JavaScript/Ajax, ゲーム, ブラウザ 3Dダンジョン, Canvas, HTML5, JavaScript