Box2DとPapervision3DをWondeflで

wonderfl で 物理演算ライブラリ「Box2DAS3」が使えるようになったと聞いて、3Dエンジン「Papervision3D」と組み合わせたデモを作ってみました。

• wondefl : [Box2D][PV3D] 3D Ball Simulation

Ｂｏｘ2DとPapervision3Dの絡み

Box2DとPV3Dの表現を行う際に抑えておきたいポイントは、Box2Dは二次元の演算を行うものなので、3Dで扱うとしても平面的な物理演算しかできません。ですのでサンプルはあくまで２次元(縦・横)の動きしかしていません。その制約のなかで表現を模索するのが面白いといったところでしょうか。

3次元の物理演算を行うならJigLibFlashというのがあるので、そちらを使ってみるほうがいいと思います。(参考：JigLibFlashとSpringCamera3Dで3Dゲームっぽい動きを実現)

サンプルの解説ですが、いっこいっこ説明しても長くなってしまうので、ここでは処理の流れのポイントを。

• PV3D側のオブジェクトにマウスプレスのEventListenerを設置
• Box2Dにドラッグしているオブジェクトの座標を送る
• Box2D側で物理演算子座標位置を計算
• EnterFrame内でBox2Dの座標をPV3Dと同期する
• ドラッグの値を正確に取得するため、PV3DはFlashの表示領域に対して等倍表示をする必要がある

2つのライブラリを使って2つの仮想空間を作っているためコードが冗長になってしまうのが難点でしょうか。

マウスカーソルを手のひらに

今回、本題とは別にこだわったこととして、Flash Player 10から追加されたハンド形(MouseCursor.HAND)のマウスカーソルを試してみました。ドラッグするときのカーソルが手形だと気持ちいいですね。カーソルのカスタマイズについては次のブログがわかりやすく説明されているので、興味がある方は参考にしてみるといいと思います。

• blog.ipuheke.jp» Blog Archive » FlashPlayer10のMouse.cursorに「つかむ手」がありません。

フルスクリーンモードに

大きい画面で試したほうが面白いと思うので、デモの右上にフルスクリーンモードのボタンをつけています。ボタンにロールオーバーしているとツールチップが表示されますが、こんなところでも Progression が役に立ちました。ツールチップの実装はたったこの一行。

[source:javascript]
var btn:CastButton = new CastButton();
btn.toolTip.text = “テキスト入れるとツールチップに表示されるよ”;
[/source]

参考記事

• Box2D supported – wonderfl build flash online, developers blog
• 鮭とプログラムとか: PV3DとBox2Dでドラッグしたり

一応、ソースコードとデモ

• demo (require Flash Player 10)
• src (zip)