HTML5ゲームのできるまで~描画の高速化 (1)~

 

こんにちは。システム本部プラットフォーム部の坊野です。

 

エグゼクティブセミナー『HTML5/OSS ビジネスサミット 2014』~新たなビジネスを切り開くHTML5とオープンソース~」でもお話させていただきましたが、今回から何回かに分けて「HTML5ゲームのできるまで」と題してHTML5ゲームのリリースまでの過程で私たちが行ってきたことをお話します。

 

昨年より「ダンジョンポッパー」や「ラルディシア クロニクル」などHTML5の機能をもちいたゲームのリリースを行っていますが、そこに至るまでには以下にあげるような複数の過程を経る必要がありました。

1.   HTML5ゲームの試作

2.   HTML5ゲーム開発ツールの開発

3.   プラットフォームの改良

4.   HTML5ゲームの開発

また、これらの各過程では様々な技術的問題が発生していましたが、これからお伝えしていく手法により、解決していきました。今回はその中から私たちが最初に行った描画高速化手法について説明させていただきます。

 

HTML5ゲームの試作

当社のゲーム開発者たちにHTML5ゲームの開発を始めてもらうため、まずHTML5ゲームの実用性 (つまりHTML5で開発者の期待するようなゲームを作成可能かどうか) を証明する必要がありました。

これを証明するために実際にゲームを試作してデモをおこなうことにしました。また、彼らに比較してもらうため、新しいHTML5ゲームを試作するのではなく、彼らが作ったスマートフォンゲームを移植することにしました。

スマートフォンゲームの「Blood Brothers」をHTML5に移植し、それを当時一般的だったiPhone 4sを用いたデモをすることにしました。

Blood Brothers」のHTML5への移植を開始したのですが、当時私たちは非常に楽観的だったため、単に「Blood Brothers」のゲームプログラムをそのままHTML5JavaScriptで書き直せば同等のものができると考えていました。

このため、特に最適化などを行うこともなく最初の試作を行ったのですが、残念ながら結果は散々なものでした。この試作ゲームは非常に描画速度が遅く(iPhone 4sで約1フレーム/) てとても実用にならないものでした。さらにHTML5非標準の機能に依存していたためInternet ExplorerFirefoxで動作しないという問題もありました。

この結果を受けて、私たちは根本的に設計を見直すことにしました。設計を見直すにあたり、まず現在の描画エンジンがどのようにして画像を描画しているのか調査しました。

たとえば図1のようなゲーム画面について考えてみます。

図1 ゲーム画面

図1 ゲーム画面

これは実際にブラウザ上で動作している「Blood Brothers」のゲーム画面ですが、なんとこの画面は約250枚の画像から構成されています。わかりやすくするために個々の画像の周囲に赤い四角形を書くと図2のようになります。この図から、現在の描画エンジンは毎回約250枚の画像を描画する必要があり、その結果として非常に遅くなっていることが考えられます。

図2 最適化前のゲーム画面

図2 最適化前のゲーム画面

一方、このゲーム画面の中で実際に移動した画像の周りに青い四角形を書いてみます。すると図3のようにこのゲーム画面の中で実際に動いている画像はたった2枚しかありません。つまり、この青い四角形の外側の部分の画像は全く変化していないということです。

図3 移動した画像

図3 移動した画像

これらのことから、ゲーム画面の中から実際に移動した画像のみを取り出し、その部分のみを再描画することによって無駄な画像の描画を防ぐことができます。具体的に説明すると以下のようになります。

1.   移動した画像によって囲まれている部分を消去します。

image5.png

2.   消去された部分と重なっている画像を再描画します。

image6.png

3.   移動した画像を再描画します。

image7.png

この高速化処理後に再描画された画像の回りに赤い四角形を書くと、図7のように約20枚に減少していることが分かります。またiPhone 4sにおける描画速度も約15フレーム/秒まで改善しました。

図7 最適化後のゲーム画面

図7 最適化後のゲーム画面

今回の高速化処理は非常に一般的なものですが、これを実際のゲームで用いることによって描画速度が改善することがお分かりいただけたと思います。

とはいえ、残念ながら15フレーム/秒という描画速度はスマートフォンゲームと比べるとまだ改善の必要があります。また、この高速化処理は画面スクロールなどの移動した画像が多い場合に効果がないという問題もあります。

これらの問題を解決するためにさらなる高速化を行ったのですが、その処理については次回の記事で説明させていただきます。