Kengo's blog

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

HTML5ゲーム開発環境構築支援ツールを作った件

プログラミング HTML5 Javascript Maven

testlingの登場によりQUnitを捨てる可能性が出てきたeller86です。操作を間違ったときのリアクションがわかりにくい*1のですが、それを大きく上回るメリットを享受できそうです。大半のOSS開発なら無償プランでも充分じゃないかと。唯一の不安は、サイトが潰れるんじゃないかというところでしょうか。


さて以前HTML5ゲームを快適に遊んでもらうために素材をzipで圧縮すればいいんじゃないかという話をしました。が、ちょっと考えたらJSに素材を埋め込んでしまう方がラクかもしれませんね。例えばこんな感じ。

var image = game.assets["data:image/png;base64,...."]

前回考えた方法とざっくり比較した際の特徴は以下のとおりです。

  • メリット
    • zip解凍とかしなくていい（依存ライブラリが減らせる）
    • 通信回数をより削減できる（zip取得のための通信を減らせる）
    • たぶんenchant.jsに手を加えずに済む
  • デメリット
    • zipに比べて通信データ量が増える可能性がある
    • Data URIに変換するのがめんどい
    • コードの見通しが悪くなる
    • 漠然とした不安
      • 素材のライセンスによっては使えないかもしれない
      • 世の中のJS実行環境は数十MiBのData URIを扱う可能性を想定して作られているんだろうか

通信データ量増大のインパクトが最も不安な要因でしょうか。Data URIにするだけで約33%増大しますし、zipと違って圧縮も無いので。まぁ普通JavaScriptみたいなテキストはgzip圧縮されるでしょうし、あまり影響はないんじゃないでしょうか（要検証）。

デメリットをツールでフォローする

めんどさとコードの見通しはわりとどうでもいいといいますか、ツールで自動化できそうです。ということで作ってみました。

イメージとしては、プロジェクトのルートディレクトリで

java -jar Dola-0.1-SNAPSHOT-jar-with-dependencies.jar build

と実行すると以下の処理を勝手にやる、という感じです。

  1. JavaScriptを適当に解釈してData URIに変換した素材を埋め込み
  2. 複数のJSファイルの連結
  3. 複数のCSSファイルの連結
  4. YUI CompressorによるJSファイルの圧縮

結果として、HTMLファイルと圧縮されたJSと圧縮されたCSSの3つだけ公開すればいいわけです。これらも最終的には1つのHTMLファイルにまとめられそうですが。

課題

作ってみて分かった残念さとしては、ファイルの連結順序を自動的に判断できないというものがあります。例えばmain.jsとgame.jsとlib.jsがあった場合に、lib->main->gameと連結するのがいいのかmain->game->libと連結するのがいいのか、プログラムで判別するのがめんどう難しいのです*2。今回はファイル名の順に連結する仕様にしましたが、およそ実用的ではありません。
もしゲームがCommonJSのModulesを採用する形で書かれているならば単にnode-browserifyで連結してしまえばいいのですが、個人のゲーム開発にはまだ浸透していない気がします。そもそもenchant.js自体がModuleではありませんし*3。
浸透していない理由はHTMLゲーム開発においてMavenのような開発支援ツールが存在しないからだと思ってる*4んですが、どうなんでしょう。そこまで求めるならUnity使えって話なんでしょうか。

他の細かい課題としては以下のような感じです。継続開発するならば1つずつ片付けるでしょうが、nodeで書きなおすほうが幸せになれる気がします。でもWindowsユーザーにはそうでもないのかもしれません。よくわかりません。

  • assets[~]をヘタレ正規表現ではなくASTを使って探すべき
  • CSSを圧縮すべき
  • SassとかLESSとかCoffeeScriptとかに対応すべき
  • ドキュメント書くべき
  • テスト支援があるべき？
  • スクリプトと素材の遅延（非同期）読み込みを想定すべき？
    • now loading...画面を見せつつロードしたほうがユーザに親切とも言える（それが必要なほど待たせたくないけど）
    • スクリプトの非同期読み込み→http://unscriptable.com/code/Using-AMD-loaders/
  • デバッグ用に「圧縮しないモード」があるべき
  • プロジェクトのディレクトリ配置はどうあるべきか考える
    • フレームワークにこだわらないなら、HTMLファイルが複数になる可能性についても考えるべき
    • js, css, imageの3ディレクトリあれば足りる？音声と画像は？
    • cssとimageは同じフォルダにしたい？
    • 細かいディレクトリ構成はユーザーにお任せして、./index.htmlと./main.js（仮称）と./main.css（仮称）を必須要件にして、後はnode-browserifyみたいな仕組みで芋づる式に持ってくるのがいいのかも
  • ハンパにMavenを真似たインタフェースをどうにかしたい
  • 今時java -jarって……
  • npm initみたいなプロジェクト開始を支援する機能があるとよさそう
    • 小さいものをたくさん作る人が多そうなので
    • HTMLとかのスケルトンを用意して勝手に配置してくれるとか
  • 画像のメタデータとか勝手に落としてくれるといいんじゃないか（データ量削減）
  • package.jsonからデータ取ってくるといろんなことができそう
  • jsdo.itからインポートしてプロジェクト作れると楽しそう
  • jsdo.itにプロジェクトをエクスポートできると楽しそう
  • 9leapにプロジェクトをデプロイできると楽しそう

*1:curl: (52) Empty reply from serverとか言われる……

*2:追記：HTMLをparseするというか木をたどればそんなに難しくない気がしてきた

*3:要望出したいけど今のインタフェースだと苦労しそう

*4:[http://d.hatena.ne.jp/t_43z/20110626/1309082158:title=CommonJSオワコン説]はまだ追えていない