ざらめざいどにっき (G5)

_ [技術系][Web制作] JavaScript でアクションゲームを作ってはいけない

跳べ! ノミ野郎関連文章。

JavaScript でオブジェクト指向的なことをやるのは実用的なのか・ Ajax を実際に使ってみるとどんな感じか　ということを実験するために作ってみたこのゲーム。当初の目標は十分に達成することができましたが、もう一つ感じたことがあります。完璧に趣味で作る以外ではゲーム（特にアクション系）を JavaScript で作らない方がいいです。（多分いないけど）「こんな辺境のサイトでもこんなものができるんだー」と軽い気持ちで作り始めるときっと馬鹿を見ると思うので忘れないうちに書いておきます。

主な理由は以下のとおりです。

画像が扱いづらい

いわゆる DHTML でブロックは簡単に置くことができますので特定の色・パターンの四角形は簡単に扱えますが、それ以外の図形を扱おうとするととたんに難しくなります。画像の拡大・縮小ぐらいはできますが、回転になるともうだめです（ IE ではできますけど）。そういうことをしようとすると、全部のパターンをあらかじめ用意しておくか、あるいは画像生成を行うプログラムをサーバ側に用意しておくことになります。多分多くの方がお気づきだと思いますが、今回のゲームでも四角形ブロック以外はその都度サーバで生成してます。（円形も生成してるのは全色用意するのが面倒だから）

デバッグが大変

入れ物は HTML 、色付けなどは CSS 、クライアント側スクリプトは JavaScript 、そしてサーバ側スクリプトには Perl と、多くの技術を組み合わせないといけません。 JavaScript と Perl を同時に編集してるといい感じに頭が煮えてきます。そして当然バグが起こった時の原因も突き止めづらくなります。「ブロックが表示されないなー」と必死に JavaScript 内を見回して、結局原因は CSS の ID 指定の綴りが間違ってたってことも。

IE のタイマーの精度が悪い

先日の日記のとおりです。普通のアクションゲームはモニタのリフレッシュレートに合わせて秒60回更新か30回更新なんですけど、それができません。結果コマ落ちが起きます。シビアな反応が要求されるアクションゲームにとっては致命的です。今回のゲームは動きも比較的ミニマムなので何とかなってますけど。

音が鳴らない

JavaScript で直接的に音を扱う方法が存在しません（あったら教えてください）。 JavaScript & DHTML クックブックでも Windows Media Player との LiveConnection を使用した方法しか紹介していません。この本とは別に flash を使った方法も紹介されていますが、だったらゲーム自体 flash で作った方が、ね。ゲームの種類にもよりますが音はプレイヤーへの重要なフィードバックの1つですから、これがないのはゲームを制作する上での大きな問題です。

もちろん JavaScript で作るメリットもあるわけなのですが、特にアクション系ゲームにおいてはデメリットの方が圧倒的です。 flash は使ったことないんですが、恐らく flash を使った方が圧倒的に生産性も操作性も良いでしょう。賢い人は素直に flash を使いましょう。

要するに、適材適所ってことですよ。これまで flash ぐらいしか語られてこなかったところに Ajax のおかげで JavaScript という選択肢が一般に広がったのは大きな進歩です。と分かったような顔をしてシメ。

_ [2次元系][アニメ] SHUFFLE! が楽しいよ

最終回まではどう転ぶか分からないので作品全体としての評価はまだできませんが、現在他のアニメを大きく引き離して SHUFFLE! が面白いです。

現在の部分までだけでもエロゲー / ギャルゲー原作アニメとしては私がこれまで観た中で一番の良作です。断言。

昨日放送の第19話では、主人公の世話をして贖罪をしていくことでしか精神を保てないヒロインが主人公に相手にされなくなっていき、だんだんと壊れていく様子が描かれています。これまで何回かに分けて欠片を撒いておいてからの崩壊劇なので「そういうことか」と思うと同時に、ここにきて一気に壊れていく様は「恐い」の一言です。これを要所に挿入される瞬間的な暗転を始めとする効果的な演出で仕上げており、更に恐怖倍増。もうあまりの壊れっぷりのすごさに番組終わった後もしばらく頭の中回ってました。

これまでを通して作画クオリティも一定水準以上をキープしていて、安心して観れるという点でも良い作品です。

ここまで壊した後にどうやって話を繋げていくか、来週以降の展開が大いに気になるところです。

そんな感じなのでギャルゲー系が問題なさそうな人には「最近のアニメどうよ」との答えに「 SHUFFLE! 楽しいよ」と言っているのですが、ほとんどの場合「 BS 観れないよ」で終了してしまうのが悲しいところ。かりんも楽しいよ！ フルメタ TSR も良かったよ！ というか基本的に WOWOW アニメはクオリティがやたら高いので観てきっと損はしませんよ！ ついでに NHK BS2 の民放とはちょっとベクトルの違ったアニメも楽しめますよ！ ということで地上波にちょっと物足りなさを感じた方は是非 BS を。

ちなみに SHUFFLE! は第9話以降 R-15 指定になってますが、今回エロいのはアイキャッチぐらいでした。それよかかりん（年齢制限なし）の OP の方がエロい気が。

_ [技術系][Web制作] Windows IE JavaScript のタイマーは精度が悪い

先ほど公開した「跳べ! ノミ野郎」の制作時にちょっと気になったので検証ページを作ってみました。

• インターバル測定

JavaScript で使用できるタイマー機能の1つに setInterval というのがありまして、指定した命令を指定した間隔を置いて実行してくれます。このページではこの精度の測定を行っています。 start ボタンをクリックすると設定間隔 6ms から 60ms まで測定を行い、「設定間隔 / 100回繰り返すのにかかった時間 / 実際の間隔」の順で結果を出力します。

当然ながら「設定間隔」と「実際の間隔」が等しくなることが理想です。

Safari 2.0.2 だと結果はこんな感じ。

6ms / 792 / 7.92
8ms / 800 / 8
10ms / 1011 / 10.11
12ms / 1201 / 12.01
14ms / 1484 / 14.84
16ms / 1632 / 16.32
18ms / 1800 / 18
20ms / 2000 / 20
（中略）
60ms / 6000 / 60

8ms 以降では設定間隔と実際の間隔との誤差は 1ms 以内に収まっており、この誤差であれば実用上ほぼ問題ないでしょう。

それに対して Windows の Internet Explorer 6.0 だと結果は下のように。

6ms / 1562 / 15.62
8ms / 1578 / 15.78
10ms / 1563 / 15.63
12ms / 1562 / 15.62
14ms / 1563 / 15.63
16ms / 2937 / 29.37
18ms / 3125 / 31.25
20ms / 3125 / 31.25
22ms / 3125 / 31.25
24ms / 3125 / 31.25
26ms / 3125 / 31.25
28ms / 3125 / 31.25
30ms / 3125 / 31.25
32ms / 4625 / 46.25
34ms / 4688 / 46.88
36ms / 4687 / 46.87
38ms / 4688 / 46.88
40ms / 4687 / 46.87
42ms / 4688 / 46.88
44ms / 4687 / 46.87
46ms / 4688 / 46.88
48ms / 6250 / 62.5
50ms / 6250 / 62.5
52ms / 6250 / 62.5
54ms / 6250 / 62.5
56ms / 6250 / 62.5
58ms / 6250 / 62.5
60ms / 6250 / 62.5

大ウソつきですね。実際の間隔の飛び具合から見て内部で 1/64 秒（15.625ms）単位に置き換えていると考えられます。 IM で呼びかけて友人数人にテストしてもらっても同様の結果が出たのでマシン依存ではなくブラウザの問題で間違いないでしょう。

そんなわけですので、 JavaScript で小さい間隔のタイマーを使おうと考えている人は十分気をつけてください。

という記述ぐらい絶対探せば落ちてるんだろうなぁと思いつつ、結局自分で書いたのでありました。

_ [技術系][Web制作] 簡単にしました

でそのノミ野郎ですが、昨日自キャラの動きを見直した結果やたら簡単になりました。今までのゲームバランスで頑張っていた方ごめんなさい。「無理ゲーだー」と嘆いていた方は是非再チャレンジを。