WIZ-CODE.blog

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

*

Canvas DE ダンジョン!

   

HTML5のグラフィック機能Canvasを使ったダンジョンゲーム dungeon_adventure01 ⇒パステルカラーのダンジョンゲームをプレイしよう 次世代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, ゲーム, ブラウザ , , ,