平凡なエンジニアの独り言 はてなブログ出張所

ピアノをこよなく愛するエセRubyistが適当に書き綴ります

HTML5で動作するノベルゲームのエンジンを作ってみた

Rmake

ゲームを作成して共有するサイト - RmakeのゲームエンジンはFlashで作られているのですが、将来的なことを考えてHTML5 + JavaScriptで動作するエンジンを作ってみることにしました。スマートフォンやスレートPC（タブレット）などで動作することを踏まえて、まずはパフォーマンスをそれほど要求しないノベルゲームを移植してみました。

現在は一つしかありませんが、HTML5で動作するテストゲームは以下に配置してあります。

サンプルゲームは以下です。

f:id:akasata:20100810194719p:image

現在の状況

  • 一部の機能しか実装していない
  • WindowsのChrome/Safari/Firefoxで動作確認済み*1
  • 十分にチューニングしていないので動作が重い
  • iPadでの動作状況
    • 動作はするが、とにかく重い
    • マウス前提で作っているので使いにくい
    • 音が鳴らない（iPadのaudioタグでは音は同時に一つまでしか鳴らせない模様・・・）
    • メモリ不足に陥って動作が停止する場合がある

一番気になるのは重さです。特にiPad。Rmakeには、Rubyのサブセットとなるように開発されているArrpというスクリプト言語があります。ActionScript3版をJavaScriptに移植した際に速度が低下するのでは無いかという懸念があったのですが、これは杞憂に終わりました。

Rmakeでは、スクリプト言語を内部命令に変換した際、1フレームあたり1000命令しか実行しないようになっています。これは、PCの性能の影響を受けにくいように配慮してなのですが、JS版をiPadで実行しても、1フレームあたり1000命令は問題なく実行できました。

しかし、iPadではCanvasへの描画が重いようで、期待したフレームレートの1/3 〜 1/5くらいまで落ちてしまいました。ブラウザの最適化が不十分なのか、機器の性能（フィルレート）の問題なのかはわかりませんが、結果として、相当遅いということになってしまいました。とはいえ、PCでは問題なく動作します。

興味のある方は、以下のベンチマークを試してください。

まとめ

今のところ、HTML5実装はテストの域を出ていません。特に普及が期待されているモバイルの世界では、HTML5の実装が未成熟な問題*2や、モバイル機器のパフォーマンスなどの問題もあり、ノベルゲームでも今すぐ実用のレベルに到達させるのは難しいかもしれません。（いくつか高速化のアイディアはあるので、もう少しいろいろチャレンジしてみるつもりですが。。。）

とはいえ、世間的に言われているとおり、モバイル機器の性能はものすごい勢いで向上しています。ムーアの法則も真っ青な状況のようなので、2 〜 3年後くらいに出てくる機器なら、ノベルゲームくらいならまず間違いなく動作するでしょう。（あるいはブラウザの最適化で案外すぐに動作するようになってしまうかもしれませんが・・・。）

できるかどうかよりも、いつどんなものを出すか考える必要がありそうです。

余談

HTML5版Rmakeでは、iPad/iPhoneでCanvasのfillTextがまともに描画できないため、結局かなりの部分をDOM操作で解決しています。結果的には、HTML5なしでも実現できたなと・・・（苦笑）。HTML + JavaScriptって凄いなぁ。

関連記事

*1:Firefoxでは音が鳴らない

*2:例を挙げると、iPad/iPhoneでCanvasのfillTextがまともに描画できず、変な反転が起こる問題など。