HTML5とゲーム作成

HTML5によってゲーム作成はどう変わるのか

HTML5とはHTMLの5番目の大幅な改訂版のことです。では、HTML5とそれ以前のHTMLでは何がどう違うのでしょうか。その違いはとても大きいものであり、すべてを説明することは本講座の目的ではありません。 HTML5で追加された機能のうち、我々がゲームを作成する上で注目すべき題材は次のものです。

canvas要素による画像の描画
audio要素による音声の再生
Web Storageによる設定やデータの保存

実際のゲーム作成においては、これらはすべてJavaScriptによって制御されます。そして、その方法を解説することが本講座の主な目的です。

HTML5について全般的な知識を得たい人は、次のサイトを訪問すると良いでしょう。

それでは、なぜこれらの機能がゲーム作成において重要なのでしょうか。ゲームの作成では、背景やキャラクターの表示、BGMや効果音の再生、設定やデータの保存のしくみが必要になります。これらを実現するためにはHTML5の新しい機能がとても役立つのです。では、順番に見ていきましょう。

canvas要素

HTMLとJavaScriptでゲームを作る場合、ブロック崩しのブロックやボールやラケット、シューティングゲームの戦闘機や敵機などのゲームキャラクターを表現する方法は、div要素にキャラクターの画像を表示させて、キャラクターを移動させるときはそのdiv要素そのものを移動させるというものでした。実に涙ぐましい方法です。本来固定された画面部品をまとめるために存在するdiv要素をこのように使うのはスマートな方法とは言えません。しかも、キャラクタの数だけdivを作るので、キャラクタが増えるほど、Webブラウザーにかかる負担は大きなものになり、キャラクタの数が多いステージでは動作が重くなるという症状が発生しやすくなります。

では、canvas要素はどのようなものでしょうか。 canvas要素の目的はその名前からも分かる通り、ズバリ絵を描くことです。その主な機能は次のようなものです。

イメージ（jpg, gif, png）の描画
直線・長方形・楕円・ベジェ曲線等の描画
文字の描画
図形の拡大縮小・回転・平行移動

どうですか。まさにcanvas要素を使ってゲームを作ってくれと言わんばかりですね。また、たくさんのdiv要素を使って、無理矢理キャラクターを表現する方法と違い、一つの要素だけに描画を行うため、Webブラウザーの負担も軽く、快適に動作させることができます。

audio要素

HTML5ではaudio要素によって、音声の再生をすることが可能になりました。 audio要素を使った音声の再生では、開始位置、ボリューム、ループの有無等を指定することができます。

Web Storage

従来のHTMLでは、設定やデータの保存と言えば、cookieを利用することが唯一の方法でした。しかし、cookieには4KBという上限や有効期限が有り、使い勝手の良いものとは言えませんでした。 HTML5ではWeb Storageによって、5MBまでのデータを保存することができるようになりました。保存方法は、ブラウザーを閉じてもデータが保持されるLocal Storage、ブラウザーを閉じたときにデータが破棄されるSession Storageが有り、目的に応じて使い分けることができます。

こうして見てみると、「えっ、こんな機能がHTML4以前では使えなかったの？！」という驚きの声が聞こえてきそうです。確かにそう思われるのも無理はありません。しかし、それが現実なのです。 HTML5の登場で、我々は初めてHTMLによるブラウザゲーム作成の基礎を手に入れたと言えるでしょう。 Webの技術はまだまだ発展途上なのです。