Kengo's blog

Technical articles about original projects, JVM, Static Analysis and TypeScript.

How to accelerate launching your HTML game

 HTML5ゲームに関するイベントleapfestに参加してきました。そしてLTの機会もいただけたので、旧ブログでも触れた起動高速化について話させていただきました。ここに絞って基本戦略とか横断的なネタとかをまとめたのが意外と楽しかったです。
 なおスライドはSlideShareにアップしてあります。いろんなところに参考情報へのリンクが埋めてあるので、LTだけではよくわからなかった箇所についてもキャッチアップいただけるかと思います。

 実際はブラウザが並列ダウンロードしたりキャッシュしたりするのでもうちょい複雑ですが、基本的には「ファイルを小さく少なく」で良いでしょうたぶん。わりと簡単に高速化できるので、プレイヤーに快適に遊んでほしいときにぜひご参照いただければと思います。

画像形式に関する補足

 画像形式を選ぶ基準には「写真っぽければJPEG、ドット絵っぽければGIF」などと言われます。JPEGなんかは圧縮率を指定できたりするので、高速化にめっちゃこだわりたいなら試してみてもいいでしょう。個人的には、普通の圧縮率でJPEG作ってからJPEGminiに突っ込んでしまうのが、考えることが少ない&見た目の損失が少ないのでおすすめです。

DataURIについて

 JavaScriptファイルへのデータ埋込みは「JavaScriptの読み込み完了を遅くする」というデメリットがあるので慎重に利用すべきですが、往復時間(latency)は意外と大きく影響するので数KiBのデータならひとまず検討していいかと思います。DataURI自体はシンプルですしバイナリからの変換も簡単なので、わりと気軽に使えるでしょう。
 現在のenchant.jsはURIから拡張子を取り出してファイルタイプを判別しているので、そのままではDataURIが使えません。拡張子が存在しないURIが使われた場合はDataURIであることを疑う、というロジックを入れる必要があります。これはそのうちpull requestを送るつもりです。

追記

 DataURIについてpatchを送りました。