Om Nom からの教訓: 「Cut the Rope」が Windows と Web の未来をどう示すか
Om Nom は愛すべき小さなモンスターで、甘いものへの欲求を満たしたいという単純な理由で、何時間も「Cut the Rope」をプレイさせ続けることができるキャラクターです。
しかし、ZeptoLabによるこのゲームの舞台裏は、決して単純なものではありません。揺れるロープ、浮かぶシャボン玉、繊細なリアリズム、そしてその他の複雑な要素を実現するには、ビデオゲーム界の他のどのゲームとも異なる物理エンジンが基盤として必要となります。
これは、シアトル地区の開発会社Pixel Labのチームにとっての課題の一つでした。Pixel Labは、MicrosoftのInternet Explorerチームと提携し、オリジナルのiOS版「Cut the Rope」をWebに移植するプロジェクトを任されました。実際、開発の過程では、プロジェクト全体を中止せざるを得なくなる可能性もあったほどです。
最終的に、彼らはオリジナル版に匹敵するブラウザ版のゲームを開発しました。Cut the RopeはHTML5を使用しているため、様々なブラウザで無料でプレイできます。IE9ユーザー向けの限定レベルや、Om NomをWindows 7のタスクバーにピン留めする機能などの特別な機能も提供しています。
Pixel Labチームは、「Cut the Rope」のプレイをマスターするだけでなく、HTML5とJavaScriptの可能性と限界についても多くのことを学びました。課題としては、古いハードウェアでもゲームを十分な速度で動作させることや、一部のブラウザでオーディオ処理に一貫性がないことが挙げられます。このため、Internet Explorer以外のブラウザではFlashオーディオを使用するという難しい決断に至りました。
マイクロソフトが今月下旬に予定しているコンシューマー プレビューを皮切りに Windows 8 のリリースに向けて準備を進めるにつれ、ユーザー エクスペリエンスの重要性はさらに増していくでしょう。Windows 8 には新しい Windows ストアや、Web の基本的なテクノロジを使用する PC アプリへの重点的な取り組みが含まれています。
彼らの最大の収穫は、「HTML5に賭けることに不安を感じる人はいないはずです」と、Pixel Labの創設者兼クリエイティブディレクターであるロビー・インゲブレッセン氏は語る。「一般的に、95%のケースにおいて、HTML5は間違いなくその役割を果たします。」
技術的な課題以外にも、1月のコンシューマー・エレクトロニクス・ショーで発表するまでプロジェクトを秘密にしておく必要があった。マイクロソフトはショー会場でアーケード風の筐体にゲームを収めて展示した。
「子供たちに隠すのは、少なくともうちの子の場合は、ちょっと難しいんです」と、Pixel Labのシニアソフトウェアエンジニア、ジョエル・フィルモアは言う。「ゲームが完成して遊べるようになるのを、みんなと同じくらい楽しみにしていたんです。」
Pixel Labはどのようにこれを実現し、何を学んだのでしょうか？Ingebretsen氏とFillmore氏との最近の会話から抜粋し、プロジェクトの技術的な詳細もご紹介します。
どのようにして『Cut the Rope』の HTML5 バージョンを作成したのですか?
インゲブレッセン：約1年前、「Agent 008 Ball」というビリヤードゲームを作りました。HTML5に少し触れてみたいと思ったんです。その可能性にとても興奮していました。当時、Microsoftに友人がいて、IE9がリリースされる頃だったので、彼らを説得してゲームを作らせてもらいました。
結局、ビリヤードゲームを作って、とても楽しかったです。そのゲームは大きな注目を集めました。HTML5でこんなことができるなんて、みんな驚きました。ブラウザを予想外の形で操作できたんです。…
MicrosoftはZeptoLabと関係がありました。彼らがCut the Ropeに私たちを招待してくれたんです。そして、私たちの仕事は決まりました。当時、私はあらゆるプロジェクトに断りを入れていましたが、このプロジェクトは絶対に成功すると確信していたので、実現させることにしました。
最初は少し不安でした。他のゲームとは物理エンジンが違うので、うまくいかないのではないかと不安でした。契約書では、ロープをレンダリングしてキャンディーを壊してスプライトをレンダリングするという、文字通りのマイルストーンを設定していました。
そのマイルストーンで、そろそろ終わりにしようかという瞬間を迎えました。60フレーム/秒は達成していたものの、古いハードウェアを使うとすぐに速度が落ちてしまうのです。原因を突き止め（IE9のプロファイリングツールを使って）、Microsoftの担当者にも助けてもらったところ、その後は調子が戻ってきました。
どのような課題に直面しましたか?
フィルモア：ゲームのフレームを描画するたびに、2つのフェーズがあります。1つは更新フェーズで、ここではロープの状態を決定するための物理計算をすべて行います。ロープは複数のセグメントで構成されているため、非常に複雑です。それぞれのロープに対して物理エンジンを実行し、どのように動くかを計算する必要があります。重力や他のゲーム要素との相互作用も考慮する必要があります。つまり、物理計算にはかなり多くの計算が投入されているということです。
まず更新を行い、次に描画を行います。これらは、レンダリングされる各フレームに含まれる2つのフェーズです。今回の問題は更新フェーズで発生しました。このフェーズでは主にJavaScriptが実行され、物理エンジンが実行され、様々な位置が計算されます。
JavaScriptコンパイラとインタープリタ（ウェブブラウザ内）は非常に高性能になってきています。かなり高速です。しかし、従来のコンパイラほどコードの最適化に時間をかける余裕はありません。従来のコンパイラは「インライン」と呼ばれる処理を実行できます。これは、関数を引数に取り、その関数自身を何度も呼び出すのではなく、ロジックを必要な場所に配置することで、非常に高速に実行できるようにするものです。
JavaScriptのジャストインタイムコンパイラでは、静的コンパイラのように最適化する時間がないために、これを実現するのは困難です。そこで、最適化に時間をかけられるコンパイラであれば行うであろう作業の一部を、コンパイラに代わって実行しました。ロジックの一部を適切な場所に移動することで、非常に高速に実行できるようにしました。そして、関数が自身を呼び出すという再帰的な処理を、逐次的に実行される反復的なメソッドへと分解しました。こうして、真の高速化を実現したのです。
インゲブレッセン： 簡単に言えば、JavaScriptはJavaScriptを書くように書かなければならないということです。コンパイル型の言語のほとんどは、同じコードを複数回書き直さないといった、一定の原則に従って記述します。しかしJavaScriptの場合は、その性質上、コードの書き方に対する理解を少し変える必要があります。JavaScriptのためにJavaScriptを書かなければならないのです。
Windows 8 用のバージョンも作成しましたね。PC アプリでの HTML5 と JavaScript の使用についてはどうお考えですか? また、どのようなことを学びましたか?
フィルモア： とにかく、それが可能だと学んだと思います。このゲームに関して私が最もありがたかったのは、まるでネイティブアプリのように感じられることです。これまではそれが難しかったのですが、HTML5アプリがネイティブアプリのように感じられるようになる段階が見えてきました。
Windows 8 の JavaScript アプリに何が変わるのかとお尋ねであれば、ネイティブアプリと変わらない操作感になることを願っています。ネイティブアプリと同じようなスムーズさと操作感を得られることを願っています。
しかし、なぜネイティブ アプリではなく、HTML5 と JavaScript で PC アプリを作成したいと思うのでしょうか?
インゲブレッセン： JavaScriptとHTML5は本質的に協調的な言語です。他の場所からスクリプトを取り込むのも簡単です。言語自体も本質的に協調的です。それだけでなく、この言語には巨大なコミュニティサポートがあり、どこにでも存在しています。また、多くの人が持っているスキルセットであり、Objective-Cに比べて学習の早い段階で多くのことができるため、学習に適した言語です。iPhoneのような言語への参入障壁は非常に高いです。
フィルモア： Web開発者として学んだことを、Windows 8のようなプラットフォーム向けの開発にも活かせるという実感があります。私はこれまでのキャリアで様々な言語を使って開発してきました。C++やその他の言語もそうです。JavaScriptでWindows 8向けアプリを作成できるようになったことで、Web開発で培った知識や経験をすべて活かせるようになったと感じています。人々が作成した様々なライブラリを活用でき、WebでもWindows 8でも動作する一つの環境に集中できるのです。
インゲブレッセン：明らかに、こうした技術への需要は大きいです。PhoneGapもありますし、他にも同様の技術を提供しようとしているプラットフォームはあります。非常に人気があり、人々に愛されています。そして、その理由も同じです。人々はこうしたスキルセットを持っており、それを他の場所でどのように活用できるかを模索しているのです。
このプロセス全体から得た最大の収穫は何でしたか?
インゲブレッセン： HTML5に賭けることに不安を感じる人はいないはずです。それが私の最大の収穫です。（過去には）Flash、Objective C、Silverlightなど、UIの大きなブームがあり、そろそろ落ち着きそうだと懸念される可能性もあったと思います。しかし、落ち着きません。…何らかの理由で、よりハードウェアに近いものが必要になる場合もあるでしょう。ドライバーやデバイスなど、何かに近づける必要があるかもしれません。しかし、一般的に言えば、95%のケースでは、HTML5は間違いなく問題なく機能します。
フィルモア： JavaScriptがWebで実用的な言語として発展していくかどうかについて、コミュニティで今、盛んに議論されています。当初は多くの人が同じ疑問を抱いていたと思います。しかし、1桁、あるいは2桁も高速化すれば、人々の懸念は大きく解消されます。ゲームでこれほどのパフォーマンスが得られると…人々は可能性を再考するようになると思います。
これからどうなるのでしょうか?
インゲブレッセン： HTML5には大きな可能性があります。今はまだ未完成の部分を扱っている段階です。Canvasは、FlashやSilverlightにあるものに比べると比較的低レベルのAPIです。しかし、コミュニティとしてこれらの低レベルの部分を作り上げてきたので、その上にさらに大きな部分を構築していく大きなチャンスがあると考えています。
1年後、2年後には、CanvasとHTMLをベースに構築された、信じられないほどリッチなUIプラットフォームが登場するでしょう。SilverlightやFlashと同等の開発の容易さと、スピード、そして質の高いユーザー体験の両方を実現できるでしょう。人々が参入し、これらのフレームワークの構築を始めるには絶好のタイミングです。
関連リンク
- Ingebretsen 氏は、一部のブラウザでゲームに Flash オーディオが使用される理由を説明します。
- ウェブ上の「Cut the Rope」
- プロジェクトのより技術的な背景
