Hatena::ブログ(Diary)

Seasons.NET

2011-05-04

JavaScriptで書いたゲームがiOSネイティブで動くiOSIMPACT制作秘話(前編)

| 00:40 | JavaScriptで書いたゲームがiOSネイティブで動くiOSIMPACT制作秘話(前編)を含むブックマーク JavaScriptで書いたゲームがiOSネイティブで動くiOSIMPACT制作秘話(前編)のブックマークコメント

f:id:Seasons:20110505001733p:image

IMPACTというフレームワークをご存じでしょうか?

去年10月にJavaScriptで記述されたゲームがiPhone 3GS実機で

60fpsにて動作するという内容で衝撃デビューを狙ったフレームワークです。


残念ながらprivateフレームワークを利用しているという点で

iOSでの動作は見送りとなりましたが、、、HTML5でのゲームフレームワークとして

$99でライセンスが販売されました。正直その時点で私は少し熱が覚めてしまったのですが、

最近ついにiOSでも動作させる方法に成功し、みごとAppleの審査を通して

AppStoreで無料アプリとして公開されました。

Biolab Disaster

Drop JS

これらのゲームは、JavaScriptのみで記述されています。


特にBiolab Disasterは、びっくりするんじゃないでしょうか?

Box2Dとも連携できるようになっているので、

当たり判定やパーティクルの飛び散り方などとても自然で心地よいです。

IMPACT内では簡単な物理エンジンを実装しているため、ちょっとした

当たり判定やパーティクルの飛び散りに利用されています。

また、Box2D.jsを組み込むことでよりリアルな物理エンジンを使用することができます。


しかもこのフレームワーク、HTML5で記述されたレベルエディタまで付属してくるので

一見複雑に見えるステージもこれを使って作成することができます。

チュートリアル動画(本家より)


このIMPACT。最近UEIさんからリリースされたenchant.jsと比べると

$99支払う必要があるため、、、HTML5だけで動作させるのであれば、

正直メリットは少ないかもしれません。しかも覚える事も結構あるので

初心者お断りな空気も沢山あります...


とはいえこのフレームワークの真骨頂は、HTML5で書いたものが

iOS上でsafariのCanvasを使わずにパフォーマンスそのままにほぼ

そのまま動くということなのでこれは凄いことだと思います。


後編では、このフレームワークがiOS上で動くまでの秘話を

翻訳記事という形で公開したいと思います。

後編公開中

JavaScriptで書いたゲームがiOSネイティブで動くiOSIMPACT制作秘話(後編)

| 00:56 | JavaScriptで書いたゲームがiOSネイティブで動くiOSIMPACT制作秘話(後編)を含むブックマーク JavaScriptで書いたゲームがiOSネイティブで動くiOSIMPACT制作秘話(後編)のブックマークコメント

JavaScriptで書いたゲームがiOSネイティブで動くiOSIMPACT制作秘話(前編) - Seasons.NET

iOSIMPACTどうですか?興味出てきました?

今まさに個人的に今後の普及を考えて、仕事の合間にいじってるのですが

なかなかはまり所がおおくて大変ですが、”歯ごたえ”があって楽しいです。


さて、後編ですが、基本的にはこちらの記事の翻訳となります。

ボリュームがあるので時間をかけて読んで頂ければと思います。

翻訳に間違いがあるかもしれませんのでご指摘頂けると幸いです。


〜〜〜以下 翻訳記事となります〜〜〜

Appleは、私のJavaScriptで記述された2つのゲームを審査において許可した。

それは、Biolab Disaster と Dropである。共に無料で配信している。

しかも、これらはブラウザでもプレイすることができる。

これらのゲームは、とてもシンプルである。

Dropのソースコードは、300行程度のプログラムであり、

JavaScriptゲームエンジンのImpactで記述されている。


それらは、AppStoreで配布されているJavaScriptで記述された

最初のゲームではないだろう。PhoneGapやTitaniumは、iPhoneでは

ベーシックなブラウザであるUIWebViewを使用することでHTMLとJavaScriptを同居させている。

(訂正:TitaniumはUIWebViewを使っておらず、その代わりにいくつかのネイティブな

バインディングを持っている。

Impactで記述されたゲームは、iPhoneのブラウザやPhoneGapのブラウザでも動作する。


話は戻るが、この2つのゲームの何が特別なんだろうか?


それらは、PhoneGapとTitaniumを使っていないということである。

UIWebViewでさえも利用していない。


その代わりiPhoneのブラウザを全く経由せず、アップルのJavaScriptインタプリタ

(JavaScriptCore)を直接利用している。全てのグラフィックスは、ブラウザの

ウィンドウを利用する代わりにOpenGLを利用してレンダリングしている。


全てのサウンドは、OpenALを使って再生している。

iOSのmobile safariではHTML5は音を鳴らすことができなかったが、

これで問題なく音を鳴らすことができる。


HTML5のキャンバスとオーディオAPIの互換性は、今回のOpenGLとOpenAL

による実装によりそれが可能となった。

ブラウザは、Canvas要素とオーディオ要素を取り扱うが、

HTMLそのものをレンダリングはしないものであると考えてほしい。

つまり、HTML5ゲームにはとても適しているということだ。


これは、Impactによって記述されたJavaScriptゲームは、

iOSでもサウンドやタッチ処理を可能にし、且つMobile Safariよりも

優れた描画を行うことができることを意味する。


私は、Canvas APIの一部を実装したが、Impactで記述されたゲームを実行するには

それは十分だった。とはいえ全体的にまだ実験段階であることは変わりない。


もし、あなたがImpactを購入し、ライセンスを持っているのであれば、

ダウンロードページのリンクからこれに関する全てのソースコードを入手することができる。

また、私はこれからImpactを始めるあなたに僅かばかりのドキュメントも用意した。


iOSIMPACTを利用する上で理論的にはあなたがObjective-Cのことを理解していなくても問題ないが

この実装におけるObjective-Cのいくつかの知識は後々役に立つはずだ。

繰り返すがとても実験的なことなので全てが思い通りに動作するとは思わないでほしい。



【@Seasons 追記】

事実、iOS上でHTML5で記述したコードは、一部動かない。

例えば、console.logのメッセージは、デバッグ用に作者が

iOS上でも動作するように用意しているが、

console.warnといったメッセージはエラーになる。



あなたがこのブログの購読者ならば、2010年10月に私が同じ事を試みて

ブログにポストしたことを覚えていると思う。その当時、私はAppleによるMobile Safari内に

組み込まれているJavaScriptCoreライブラリを使って実装していた。


しかし、それには問題があった。使用しているそのライブラリ(JavaScriptCore)は、

Privateなライブラリだったのである。それはすなわち開発者には公開していないのを示しており

審査を通しアプリケーションを一般公開することはできなかった。

結局このアイディアは断念するしかなかった。


しかしながら、もう一度このプロジェクトについて考え直してみた。

なぜならば、まだこれを実現するチャンスがあったからだ。

JavaScriptCoreは、WebKitプロジェクトのオープンソースとして一部公開されている。


iOSに含まれているprivateなフレームワークを利用する代わりに、

理論的には自分でビルドしたバージョンのこのライブラリを

アプリケーション内にバンドルさせることができる。


私がやりたいことはそれだったのである。


Appleは、JavaScriptCoreをビルドするためのプロジェクトを配布していなかった。

また、ライブラリは、いくつかiOSのprivateなAPIを利用していたため

AppStoreで配布可能なスタティックなライブラリを作って内包することは

数日かかるほど厄介な作業だった。


私は、小さな犠牲も払う必要もあった。

JavaScriptCoreは、内部でunicodeのロケールに基づいて文字列を

ソートするlibicuライブラリを使用していた。

残念なことにlibicuは、プライベートなものであった。


また、ライブラリの容量のせいでアプリケーションにバンドルことを任意にしたかったが

それができないようになっていた。そこで私は、libicuを捨てることにした。

これはすなわち、ACIIコードの文字列だけは正しくソートすることができることを意味していた。

それ以外は、iOSの持つライブラリと同じく挙動をする自分専用のライブラリとして使用することができる。


また、iOSIMPACTでバンドルしているJavaScriptCoreライブラリは、

JITコンパイラを使用していない。あなたは、iPhone上で実行可能なメモリを確保することはできない。

また実行権限に引き上げることも禁止している。それについて私が知ることは何もない。


しかしながら、最近Appleは、Mobile Safariに限って例外の処置を取った。

JavaScriptCoreのAPIをパブリックに公開したのである。

つまりこれは、全ての開発者にJITコンパイルを許可したことになる。

これは大事件である。私は一体何がおこなったのかよくわからない。

あんなにネイティブな言語 Objective-Cの利用を好み、スクリプト言語を嫌っていたAppleなのにである。


私は、Appleがこの2つのアプリケーションをよくわからない理由で

リジェクトしないか恐れていたが彼らはそうしなかった。

それは私を不安にさせた。では何故JavaScriptCoreライブラリをプライベートな扱いにしたのだろう。

JavaScriptCoreをあなたのアプリケーションに追加すると2MBほどになる。

そんなに大きくはない。サイズを気にしていたのかと思ったが、

結局のところ彼らはの真意を掴み取ることはできなかった。


それはさておき、2つのゲームのパフォーマンスはとても良好だ。

iPhone 3GS上のBiolab Disasterにおいて時折、パフォーマンス低下(20fps)が

発生するがそれは大量にパーティクルを表示した時でゲームのプレイに支障は与えない。


iOS上におけるサウンドの処理もまた完璧だ。

いくつかのブラウザでさえまだこの部分に対して奮闘しているにも関わらず。


〜〜〜以上 翻訳記事となります〜〜〜

どうでしょうか? iOSIMPACT触ってみたくなりましたか?

今後開発環境のセットアップから実機動作までの手順を不定期で

配信していきたいと思っていますので宜しくお願いします。

shinriyoshinriyo 2012/01/20 02:00 まだ試してませんが紹介ありがとうございます。
CSS3でアニメーションで重くて、パラパラアニメもアルファで消す・出すでパフォーマンスが出ず、
JSでアニメーションさせてもうまくいかなかったので試してみたいです。
画像を透明にしたり、タイルベースではないゲームを作成したり、キャンバスサイズを
変更することも大丈夫ですよね?体験版がなく試せてないです。

SeasonsSeasons 2012/01/23 02:17 CSSは、確かGPUで処理できるはずなので結構速度出ていた気がしたんですが
デモはいじったレベルで実際コードはいじったことはないのであまり参考にはならないかもですね^^; すいません。

IMPACTは、購入すればソースコードが提供されるのでHTML5の機能を使って拡張することで様々な処理が可能になります。画像の透明度なんかも処理できますよ。
レベルエディタを使わずゲームを作ることも可能です。

また、キャンバスのサイズは、impactのmain.jsで変更することができますのでご安心を。