お知らせ
2010-08-10
■[Rmake]HTML5で動作するノベルゲームのエンジンを作ってみた
ゲームを作成して共有するサイト - RmakeのゲームエンジンはFlashで作られているのですが、将来的なことを考えてHTML5 + JavaScriptで動作するエンジンを作ってみることにしました。スマートフォンやスレートPC(タブレット)などで動作することを踏まえて、まずはパフォーマンスをそれほど要求しないノベルゲームを移植してみました。
現在は一つしかありませんが、HTML5で動作するテストゲームは以下に配置してあります。
サンプルゲームは以下です。
現在の状況
一番気になるのは重さです。特に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って凄いなぁ。
関連記事
- 143 http://b.hatena.ne.jp/
- 109 http://b.hatena.ne.jp/hotentry/it
- 97 http://blog.livedoor.jp/antenna22/archives/51489036.html
- 89 http://b.hatena.ne.jp/hotentry
- 70 http://twitter.com/
- 63 http://www.google.co.jp/search?q=html5+ゲーム&hl=ja&ei=8gJiTMPDL8TXcYOS9aUJ&start=20&sa=N
- 63 http://www.google.co.jp/url?sa=t&rct=j&q=html5 ノベル&source=web&cd=1&ved=0CCMQFjAA&url=http://d.hatena.ne.jp/akasata/20100810/1281439398&ei=FJajTrKvMY_zmAWGu5yeCQ&usg=AFQjCNEhWHE-xrqjv_SpRIBn499fkMYPFg
- 60 http://jp.html5collect.net/demo/Tool/html5で動作するノベルゲームのエンジンを作ってみた/?utm_source=tw
- 60 http://www.google.co.jp/url?sa=t&rct=j&q=ノベルゲーム html5&source=web&cd=2&sqi=2&ved=0CCMQFjAB&url=http://d.hatena.ne.jp/akasata/20100810/1281439398&ei=TICmTp6ZPK_ImAXZ_uzEDw&usg=AFQjCNEhWHE-xrqjv_S
- 54 http://d.hatena.ne.jp/



