2011-12-01

Box2D(Titanium)サンプルコードを読み下してみよう 第2編 ui.js

■ 次にui.js
Titanium向けBox2DのサンプルであるTiBallの2つめのファイルui.jsのソースコードを読んでいきたいと思います。
マークの部分で重要なことを書いていますので拾い読みしてください。

大まかにいえば、ui.jsはメニュー画面やゲーム画面を載せるような大きなViewとそれを載せるWindowをつくるところです。


1. 即時関数でapp.uiのオブジェクトを作ります。あとはここに順次載せていく。

2. app.uiにoverlayというプロパティを持たせる。
ここのoverlay重要。Box2Dのタップなどのイベントの制御は(生成されたボディそのものではなく)このoverlayに載せていくことになる。
⇒つまり、動いているボディを制御するためには、(そのボディそのものにイベントリスナをつけることはできず)e.globalPoint.xなどの座標を指定するなどした、見えない新しいボディを生成して、その別のボディが”衝突”したように見せかけて制御する。イベントはTitaniumのものを使用する。
※ボディとは、ゲームの世界で動くもの(ピンボールのボール)やゲームの世界で動かないもの(ピンボールの壁など)のこと。詳しくはworld.jsの項で後述。

3. メニュー画面やゲーム本体のWindowやViewの載せていきかたはソースコードを読めば分かる。Titaniumなどと一緒。


上記をまとめた感じでソースコードに落としこんでみます。



以上です。