2022/08/23

WEBゲームを作るならHTML(DOM)？Canvas？メリットを比較！

WEBブラウザゲームを作る方法は様々ですが、以前からよく使用されているのが、HTML（DOM）とCanvasです。今回は、そんなWEBブラウザゲームを作る手段について、それぞれのメリット・デメリットを元に、どちらを使うべきかを解説します。

【前提】WEBブラウザゲームの定義

本題に入る前に、ここで取り扱う「WEBブラウザゲーム」とは何か、言葉の定義をしておきましょう。

ここでいうWEBブラウザゲームとは、HTML/CSSとJavaScriptを組み合わせて作成される、ゲームを模したブラウザ上で動作するプログラムのことを指します。

HTMLタグをオブジェクトとして扱うDOM、要素の中で様々なオブジェクトを描画するCanvasのどちらも、HTMLとJavaScriptの技術で作られていますね。

Unityで作られたゲームを埋め込んでいるようなブラウザゲームは、今回は例外として扱います。一般的なWEBサイトに使われる技術で作られているものをイメージしてください。

では次に、DOMとCanvasとは何か、それぞれ解説していきます。
（※注意として、以降の解説はこの記事を読みやすくなるように言葉を選んでいます。実際の仕様と説明では異なる部分があるので、気になる方は各所のリファレンスを参照してください。）

DOMとは？

DOMに関して、この記事を読む上ではHTMLタグだと思っておいてください。
（※本当は違います。）

例えば、WEBサイトを構成する際、皆さんの目に見えているような画像や文字などのコンテンツは、基本的に全てHTMLタグをCSS等で装飾したものを、画面上に描画しています。

DOMを使ったゲーム制作というのは、そういった描画技術を使い、通常のWEBページを作るような感覚でWEBゲームを作ることを指します。

DOMを用いて作られたゲームとして代表的なのは、

God Field
ふぁんしーあいらんど
Gartic Phone

などです。

Canvasとは？

Canvasは、この記事を読む上では、オブジェクトを描画するための機能だと思っておけばOKです。Canvasの本体であるcanvasタグはHTML文書に直接記述しますが、Canvas APIを通じ、JavaScript側でcanvasタグの中に様々なオブジェクトを描画できます。

DOMと違い、JavaScript側で生成したオブジェクトのデータをcanvas上に描画しているだけなので、HTML側から見ても、オブジェクトに相当するタグや要素の存在は確認できません。

Canvasを用いて作られたゲームとして代表的なのは、

艦隊これくしょん
千年戦争アイギス

などです。

有名なDMMが運営するDMM GAMESでは、ブラウザで遊べるゲームのほとんどがCanvasを用いて作成されていますね。

また、以前までのDOMは現在のようにゲームに応用できるほど使い勝手の良いものではなかったため、5年以上前に作られたWEBブラウザゲームのほとんどはCanvasが使われているはずです。

HTML(DOM)でWEBゲームを作るメリット

DOM要素を用いてWEBゲームを作成するメリットは、結論としては「効率的に開発・機能実装が可能」という点にあります。

もう少し具体的なメリットとしては、主に以下の3つがあります。

CSSを利用可能
豊富なJSライブラリ・フレームワークを使える
WEBサイトとして運用できる

それぞれのメリットについて、詳しく見ていきましょう。

1．CSSを利用可能

DOM要素は、ほぼ全てのブラウザにおいてCSS等のスタイルシートを用いてデザインできます。

CSSでは、要素のデザインやアニメーションの実装を手軽に行うことができるため、上手に扱えば、簡単に高品質なWEBゲームを作ることができるというわけですね。

Canvas上のオブジェクトに対してはCSSは対応しておらず、CSSの恩恵を受けられるのはDOM要素の特権だと言えます。

2．豊富なJSライブラリ・フレームワークを使える

Canvas APIは機能として存在してはいるものの、WEBサイトにおける標準的な要素ではありません。このことから、JavaScriptのライブラリ・フレームワークも、自然とDOMに対応したものが乱立することになっています。

とりわけ、DOM要素やイベントを効率的に管理できるライブラリ・フレームワークには、以下のようなものがあります。

React
Vue.js
jQuery

これらはCanvasのオブジェクトには一切対応していないため、JavaScriptの著名技術を自由に扱えるのは、DOMの明確なメリットだと言えるでしょう。

ただし、後述しますが、当然ながらCanvasを意識したJavaScriptライブラリやフレームワークは数多く登場しています。DOM要素やイベントにフォーカスした場合に比べると少ないですが、Canvasだとライブラリ・フレームワークの恩恵を受けられないというわけではありません・

3．WEBサイトとして運用できる

DOM要素、すなわちHTMLタグを用いてWEBゲームを作る場合、それを自然とWEBサイトの一部として実装できるというメリットもあります。

言葉としては伝わりにくいと思うので、
例として株式会社闇のコーポレートサイトを挙げてみましょう。

こちらのサイトでは、実際にWEBサイトを閲覧するような感覚で、ホラー体験が得られるという変わった趣向がモチーフとなっています。

スマホを下にスクロールしていくような操作を多分に含んでいるため、正にWEBサイトのような形式でWEBゲームを実装しているわけですね。

Canvas APIでは、WEBサイトと同様のスクロール処理を実装するのは面倒であり、不要な開発工数をかけてしまうことになりかねません。

CanvasでWEBゲームを作るメリット

Canvasを扱うメリットは、やはり「WEBゲーム作りに適している」という点にあります。

WEBゲームを作るという点にフォーカスすると、主に以下の2つのメリットに細分化できます。

ゲーム作成用のライブラリ・フレームワークが豊富
アニメーションの自由度が高い
ブラウザの影響をほとんど受けない

それぞれのメリットについて、詳しく見ていきましょう。

1．ゲーム作成用のライブラリ・フレームワークが豊富

Canvasは昔からWEBゲームの作成に使われていただけあり、ゲーム作成用のライブラリ・フレームワークが非常に充実しています。

例えば、敵オブジェクトとの当たり判定を実装したり、オブジェクトのデータを効率よく管理できたり、本来なら実装が面倒となる処理も、ライブラリ・フレームワークを使えば簡単に実装できるのです。

有名なライブラリ・フレームワークとしては、

Phaser
enchant.js

などがあります。

2．アニメーションの自由度が高い

Canvasは、アニメーションの自由度が非常に高いという特長もあります。

CSSを使えば簡単に高度なアニメーションを実装できますが、直接的に座標を指定して動かすような、自由度の高いアニメーションを作ることはできません。
初心者向けではありますが、技術のある方にとっては痒い所に手の届かない機能だと言えます。

また、CSSを最大限に生かすためにはHTMLタグの設計から管理する必要があり、少しばかり開発の負担が高まってしまうというデメリットも存在します。

Canvasであれば、座標を指定してオブジェクトを動かしたり、複数のオブジェクトを同時に操作したりすることができるため、ゲーム制作で重要となるアニメーション実装を細かに行えるのが魅力です。

3．ブラウザの影響をほとんど受けない

Canvasは、ブラウザの影響を受けないことから、現在でもWEBゲームの運用に愛用されています。

少し説明をすると、ブラウザにはユーザの使い勝手を向上させるため、キャッシュという機能が実装されていたり、HTMLの各要素に初期スタイルが割り当てられたりします。

実は、これらのブラウザの思いやりは、開発する際には足手まといとなることが多々あるのです。

キャッシュは一度読み込んだWEBページの情報（HTMLやCSSファイルの中身）をブラウザ内で記憶する機能なのですが、そのせいでDOMを用いてWEBゲームを作成すると、そのゲームの状態がブラウザ内に保存されてしまいます。

キャッシュは優先的に読み込まれるため、頻繁にアップデートをするようなWEBゲームだと、メンテナンス終了後にメンテナンス前のゲームファイルが読み込まれてしまうというトラブルが起こりやすいです。
メンテナンスの内容が反映されないというのは、中々面倒ですよね。

また、ブラウザによってtableや文字タグの初期デザインは異なることから、基本的にWEBゲームをHTML/CSSで作っても、ブラウザによってゲームの見た目が変わる事態に繋がることがあります。

CanvasはJavaScriptで動的にオブジェクトを描画するため、これらの影響を受けず、トラブルが発生しにくいです。

DMM GAMESでCanvasが使われているのも、この点を重視しているからでしょう。

まとめ

HTML(DOM)とCanvas、どちらかでWEBゲームを作るかどうかは、使いやすい方を選ぶというのが結論です。
HTML/CSSとJavaScriptを扱う方が初心者にとって開発しやすいですが、保守・運用やカスタマイズの視点で考えると、Canvasの方に軍配が上がります。

自分に合った開発手法で、皆が楽しめるようなWEBゲームを作成してみましょう。