NJF

以前こんな記事を書きました(html5のブラウザゲームについて)が、実際手を動かしてみないとわからない事もあるだろうとWeb Creator’s Contest Qというのをやっていてそれ用にゲーム（JSWars）を作りました。今更画面遷移も効果音もない、プログラムの入門書の最後におまけのようについているようなゲームとか作るのもどうかと思ったのと、普段作っているFlashのゲームと比べて見たかったので、コンテストの雰囲気とは違う事は重々承知でFlashゲームっぽいRTSを作ってみました（きっと小規模で様子が良くてコピペしやすいのが受けるんでしょうね。そういうの興味ないですが）。そしてその感想をここにまとめておきます。あまり良いことは書いてありませんのでhtml5大好きって人は見ない方が良いかもしれません。もともとFlash開発やっていますので、いささか内容は偏向しているかもしれません。Flash嫌いだしこんなこと気にせずに開発しよう、って人はそうすれば良いかと思います。そうじゃない人は何かの参考にどうぞ。

・音
音は一度に２、３個しか鳴らないようです。今回はありませんが、通常うち一つはBGMで使ってしまうので、これはシューティングやRTSを作るにはかなり痛いです。そして音を止めるメソッドが一時停止しかなく、ちゃんと止まった事になって、同時再生数からはずされているのか怪しい気がします（アホらしくなったので検証はしていません。どちらにせよ２，３個ではね）。音のオブジェクトを複製するメソッドもないので、サーバーに音ファイルをおいてる場合はnewするたびにサーバーにアクセスする事になり、無用の負荷がかかります。なのでキャッシュする処理を作る必要があります。そしてブラウザによって対応する音声のファイル形式が違うので、少なくとも同じ音声に対して2種類のファイルを用意する必要があります。正直Flashにくらべると使い物にならない印象です。

・負荷
Flashと違い、描画負荷はビットマップなので軽いですが、一般的な処理自体は遅いです。今回、この程度ならさほどパフォーマンスは気にしなくいいかな、と思って特に高速化するような事はしなかったらあっさり重くなりました。私の作ったFlashゲームのブラックネイビーウォーではそれぞれ１００以上のユニットが動いて多対多の戦闘をしているのだし、一方このJSWarsではグリッドごとでしか当たり判定しておらず軽いはずなので、もう少し頑張っていただきたいところです。

・画像エフェクト
唯一使えるフィルターがシャドウブラーだけなのですが品質があまりよくない上にブラウザによって挙動が違います。半透明の領域かなにかにかけるとFirefoxとChromeで別物になったりしました。またサイズは変えられますが強さは変えられません。ブレンドモードもブラウザによって違います。なかなかつらいです。画像の色変更や反転は軽い処理でする方法がわからなかったのですがあるんですかね。いちいち1ドットずつ操作するのは非現実的と思うのですが。

・言語
言語自体は他の言語を使いこなせていれば、すぐ修得できるとおもいます。ただ型宣言のないスクリプト言語なので、エラーを実行時にとることが多くなってどうしてもデバッグは大変になります。あと、個人的には「this」が実行状況によって変わるのがわかりにくく感じました。他にIE9では__proto__というプロトタイプにアクセスする変数がありませんので注意が必要です。ただし、AS3と比べればイラッとするところもありますが、型のない、他のスクリプト言語に比べて取り立ててやりづらいところは無い気がします。

・開発環境
型宣言のない言語に良くあるように、ちゃんとした補完が効く開発環境は見当たらないので、変数名など間違えずに書くのが面倒くさいです。ちなみに「Aptana Studio 3」ってのを最初使って書いていましたが、3000行超えたあたりで動きがカクカクになったのでサクラエディタで編集してAptana Studio 3は文法チェックだけに使っていました。また、たとえばこのゲームでは歩兵が走る画像はFlashで作ってビットマップ化して作成しています。細かなアニメーション制御は現状のhtml5では難しいので、ゲームなどでそれなりの動きをつけたければ、結局Flashか何かアニメーションを作るツールが別に必要です。

・テキスト
テキストをうまく折り返したり部分的に書体を変えたりする機能はないようです。htmlを使えと言うことかも知れませんが、ゲームではオブジェクトにテキストを入れ込んで動かしたい場合もあるので、そうするとcanvasとhtmlの動きをうまく同期したり重ね順を考えたりする必要が出てきて使いづらいです。

他にもいろいろあるのですが（当たり判定とか回転とか）、特に気になったのはこのへんです。これらはライブラリを導入すれば何とかなる部分もあるかもしれませんが、そのかわり問題が発生したときに自分で書いていない大量のソースコードをデバッグする事になるリスクを負うことになります。それに今回はFlashと比較したかったのであえてライブラリは使っていません。またこれらは出来れば言語仕様の段階で解決してほしい物ばかりと思います。

欠点ばかりだとなんなので一応利点もあげておきます。2個しか思いつきませんでしたが。

・利点１　コンパイルしなくていい
コンパイルしなくていいので最後の微修正とかは楽です。Flashだと開発後半けっこうパブリッシュに時間がかかります。

・利点２　線の描画が速い
Flashにはビットマップに直接図形を描く機能がないので線を何本も描くと重くなりがちですが、JavaScriptはそうではないので大量に重ね描きしても軽いです。

・終わりに
総じて、コンテストで言語が指定されているとか、スマートフォンのようにそもそも選択肢がないとか、html5特有の機能を使いたいとかでない限り、ある程度以上の規模のブラウザゲームをJavaScriptで作るのは一種の曲芸でしかない気がします。とりあえずFLASHでいいんじゃないですかね。５年ぐらいしてから思い出せばいい気がします、JavaScriptでPCのブラウザーゲーム作るのは。ただ、画像を紙芝居のように動かすだけと言った簡単な処理ならJavaScriptとFlashは変わらない気がします。

もちろんこれはPCでの話で、スマートフォンは外にしようがないので別です。スマートフォンだとそもそもブラウザで大規模なプログラムを作ってもスペック的につらいですし。また実際お仕事もすでに受けておりますので何かありましたらお気軽に。別にhtml5を目の敵にしてるわけではありません。