Raffaele Cecco「JavaScriptグラフィックス ゲーム・スマートフォン・ウェブで使う最新テクニック」オライリージャパン 相川愛三訳 2

軽量な jQuery UI に対し、Ext JS は過酷な使用に耐えるユーザーインターフェースを提供します。
　　――４章　高度なUI

　Raffaele Cecco「JavaScriptグラフィックス ゲーム・スマートフォン・ウェブで使う最新テクニック」オライリージャパン 相川愛三訳 1 から続く。

【１章　コードの再利用と最適化】

　なんとなく、著者は８ビット機の時代からゲームを作っていたんじゃないかと思う。というのも、１章から年寄りには懐かしいネタが次々と出てくるので。浮動小数点演算を避けるために予め計算してルックアップ・テーブルにキャッシュしておくとか、キャラクターはスプライト・オブジェクトを使って背景に重ねるとか、まるでファミコンだ。

　かと思えば、Duff's device(→Wikipedia)なんて懐かしいネタも出てきたり。低レベルの話だと、２の累乗での乗除算はシフト演算で代行って小技もあったが、JavaScriptでは「実際に調べてみると」乗除算ともに特に利益はないとか。こういう所を、ちゃんと測っているのが流石だし、測り方まで教えてくれるのが俺しい。

　ただし切り捨ては Math.floor() より n >> 0 の方が、Google Chrome だと３割ほど速かったとか。他のブラウザじゃ大差ないんだけど。

　やっぱり、と思ったのが、DOM の要素を jQuery で扱う時の注意点。ドキュメント全体から指定の要素を探すのは、ソレナリに時間がかかり、処理時間にして３～８倍の差が出る。だから、扱う要素は初期化時に予め DOM を呼び出して変数に代入しておき、ループの中ではなるたけ jQuery に検索させないようにするといい。

　同様に面白いのが、多くの要素を追加する時。これも、何度も append() するより、多数の要素を含む長い文字列で HTML を作っておき、一気に append() する方が速いとか。

　ここでの描画サンプルは、縦に細長い(１ピクセル)の div 要素を横に並べてサインカーブを描くなんて荒業を見せてくれる。その手があったかｗ

【２章　DHTML】

　２章では、Web ならではの最適化が出てくる。例えば多数のキャラクターを一枚の PNG 画像にまとめて収納しておき、描画時にクリッピングして表示するなんて小技。HTTP プロトコルだと、小さい画像を何枚も送るより、一枚の大きい画像を送る方が速いのだ。

　これをスプライト・オブジェクトとして、描画位置は css をいじって動かす。これならフリッカーに悩まないね←古い。

　ブラウザ・ゲームで辛いのが、マシンごとの性能の違い。setInterval() や setTimeout() を使ってもいいが、「Windows XP が提供するOSレベルのタイマー精度は15ミリ秒」と、あまし信用できない。

　また、スプライト・オブジェクトの移動量も、マシン性能に応じて変えなきゃいけない。遅いマシンじゃ一回の移動量を大きく、速いマシンじゃ移動量を小さくしたい。ところがPCだとブラウザ以外のアプリケーションが動いてたりするんで、最初にマシン性能を測っただけじゃ後で困ったことになる。

　ってんで、ここでは、スプライト・オブジェクト全体を処理するのにかかった時間を常に測り、これに応じてスプライト・オブジェクトの移動量を調整したり、タイムアウト値を変えたりしてる。そういう事かあ、と納得した。

【３章　スクロール 】

　最初に出てくるのは視差スクロール。複数のレイヤを重ね、手前のレイヤは速く、奥のレイヤは遅く動かすことで、立体感を出すテクニック。低予算アニメでもよく使ってたなあ。タイル・マップ・エディタ(Tiled)なんて便利なモノがあるとは。これなら私にも大戦略が作れそう←ツケあがるな

【４章　高度なUI 】

　ここでは軽量で軽快なユーザ・インタフェース・ライブラリの jQuery UI と、本格的な Ext JS 紹介。サンプルは jQuery UI を使い、回転木馬風に回る画像の列を描くもの。この章から、マウスイベントのハンドラが出てくるので、いじって楽しいプログラムが出てくる。

　ここでは Web プログラムの悩みの一つ、クライアントが画像などをキャッシュしている場合に、load イベントが発生しない問題の対処なんてのが面白い。

【５章　JavaScriptゲーム 】

　懐かしのインベーダーゲームを作る章。若い人はオリジナルのインベーダーゲームを知らないかも…と思ったが、ニンテンドーDSi や FLASH やスマートフォン向けのもあるのね。

　インベーダーゲームの細かい仕様については著者も詳しいが、註で訂正する訳者も相当なもの。段々とインベーダーが速くなる工夫は、「やはりそうか」と納得。衝突判定の工夫は楽しいが、コードそのものはコールバック使いまくりで相当に難しくなってくる。

【６章　HTML5 Canvas】

　いよいよ HTML5 の本領、Canvas。雰囲気は PostScript で、既に描いた物は参照できず、xor で描くとかは無理で、常に上書き。ただし描く際に透明度は指定可。そのためかアニメーションは難しそうで、Canvas 全体を描きなおす方法が載っている。

　最初のサンプルは、制御点をマウスで動かしベジェ曲線／二次曲線を描くもの。制御点は独立した div 要素を使う。やはり Canvas で描いた要素をスプライト的に動かすのは難しいようだ。

　FLASH/SVG/Illustrator 形式を Canvas 用 JavaScript に変換する道具が、サードパーティーから出てるのは嬉しい。

　別の意味で興奮するのが、WebSocket のチャット・ツール。ちょっと前、テロリストが情報交換に MMORPG のチャットを使ってるって話があったが、これと P2P を組み合わせると金楯を出し抜けるなあ、などと思ったり。にしても XAMPP(→Wikipedia) なんて便利なモンもあるのか。これ使えば PHP を独習できるね。

【７章　ベクトル計算 】

　シューティング・ゲームなどで必須のベクトルについて、大砲の弾丸の飛翔をシミュレートするアニメーションを例に説明してゆく。弾丸の残像が少しづつ消えていく効果を出すのに、背景画像の透明度を変えながら重ね書きするって大技を繰り出してるｗ

　最後に、複雑なキャラクタを軽い処理で描く手法が賢い。いったん隠れ Canvas に描き、「この隠れ要素を Canvas の drawImage() 関数のビットマップソースとして用いてみましょう」。

【８章　Google Chart Tools】

　HTTP 経由で Google の API を呼び出し、グラフに変換する Google Chart API の紹介。簡単な呼び出し法では <img> タグの src で URL を指定するだけなんで、固定の HTML 頁でも使える。JavaScript 経由で呼び出すなら、Google のライブラリ jsapi(→MDN)が便利。マウスなどのイベントにコールバックを設定すれば、エフェクトもつけられる。

【９章　jQuery Mobile】

　スマートフォン用のスライディングブロックパズル(→Wikipedia)を例に、スマートフォン用 JavaScript ライブラリ jQuery Mobile を紹介する。

【10章　PhoneGap】

　10章で作った JavaScript 版を、PhoneGap により Android のネイティブに変換する。といっても、内容の大半は開発用ツールのインストールと設定。入れるのは　JDK，Android SDK，Eclipse，Eclipse 用 ADT プラグイン，PhoneGap。インストールのコツや日本語版パッチも紹介してるのがありがたい。

【おわりに】

　意外と HTML5 Canvas の話は少なく、DHTML でコトが済むネタが多い。６章・７章のサンプルも DHTML で作れそうだし。

　などの JavaScript に特化した話よりも、リアルタイム系のゲーム作りの工夫のネタが楽しかった。昔はマシンが貧弱なため工夫せにゃならなかった。マシンが強力になった今は、OSやブラウザや JavaScript インタープリタが計算力を食いつぶし、結局はアプリケーション・プログラマが知恵を絞る羽目になってるのが皮肉。

　JavaScript に興味がなくても、ゲーム作りに興味があるなら、読んで損はないと思う。

【関連記事】

• Raffaele Cecco「JavaScriptグラフィックス ゲーム・スマートフォン・ウェブで使う最新テクニック」オライリージャパン 相川愛三訳 1
• David Flanagan「JavaScript 第六版」オライリージャパン 村上列訳
• Eric.A.Meyer「CSS完全ガイド第2版 CSS2&CSS2.1対応」オライリージャパン 株式会社クイープ訳
• Shelley Powers「初めてのJavaScript 第２版」オライリージャパン 武舎広幸・武舎るみ訳
• John Whitington「PDF構造解説」オライリージャパン 村上雅章訳
• 高林哲,鵜飼文敏,佐藤裕介,浜地慎一郎,首藤一幸「BINARY HACKS ハッカー秘伝のテクニック100選」オライリージャパン
• 書評一覧：科学/技術