PR

「Box2DFlashAS3」を試す!

2008年6月14日(土)
林 俊之

円も降らせてみよう

 先ほどは四角の箱のみでしたが、今度は円も降らしてみましょう。

 まずこちらより、サンプルファイルをダウンロード(http://www.thinkit.co.jp/images/article/91/2/9122.zip)してください(9122.zip/7.07 KB)。解凍されたsample2.fla、sample2.asをBox2DFlashAS3_2.0.0フォルダ内に配置してください。

 基本的には前ページのものと一緒ですが、79行目からの「オブジェクトをワールドに追加するメソッド」に円を生成するロジックを追加しています。

 Bodyにシェイプを追加する際にランダムに箱か円を追加するようになっています。違いは「箱の場合のシェイプの生成はb2PolygonDef();」と「円の場合のシェイプの生成はb2CircleDef();」の違いになります。

 ではFlash上でプレビューしてこのFlashを動作させてみましょう。色とりどりの箱に加えて円も落ちてくるのが確認できるかと思います。円が加わることで、オブジェクト同士の動きが違ってくるのもわかるかと思います。

 ちなみに箱のシェイプを作る際、「boxDef.SetAsBox(30, 3);」と、大きさを指定していますが、これはあくまで中心からの距離なので、実際のサイズはその倍になります。ですので、ディスプレイオブジェクトと関連づける際に「bodyDef.userData.width = 30 * 2 * m_physScale;」と2倍しているのです。

 また、多角形を作るにはb2PolygonDefのvertexCountで角の数を設定し、各頂点の座標を指定します。

 さらに複雑な図形を作る場合にはBodyに対して複数のシェイプを登録することで実現できます。四角や、多角形の組み合わせでいろいろな図形も作れますので慣れてきたら試してみてはいかがでしょうか。

Box2DFlashAS3を用いたサイト

 いままでのサンプルを見ていただくと、Box2DFlashAS3は「実験的に使うもの」という印象が強いかもしれません。しかし、最近ではいくつか商用サイトに使われることも増えてきました。以下2つ事例を紹介します。

 BEYES Watch the world(http://www.beyes.jp/recommend/60/)は、世界中の腕時計を紹介するサイトです。上からどんどん腕時計のテクスチャが張られたボックスが落ちてきます。眺めているだけでも楽しいサイトです。

 In an ABSOLUT World(http://www.absolut.com/iaaw/)は、皆が投稿したそれぞれのVisionをさまざまなUIで見ることができるCGMサイト。Box2DFlashAS3以外にもTweenerやPapervision3Dなどのオープンソースのライブラリを使って構築されています。少々重いのが難点ですが、完成度の高いサイトです。FlashもJavaScriptのように単体で開発するのではなく、ライブラリやフレームワークを使って開発するというのも増えてきています。

 いかがだったでしょうか?今回のサンプルはとてもシンプルなロジックですので、Box2DFlashAS3をちょっと試してみたい!という方にはちょうどいい量かと思います。ぜひ皆さんも物理演算シミュレーションの世界を体感してみてください。

NTTレゾナント株式会社
So-net、MSNを経て現在gooを運営するNTTレゾナントでデザインエンジニアとして勤務。UIデザイン、HTML開発、JavaScript開発を主軸に仕事中。iGoogleガジェットコンテストで「インプレスR&D インターネットマガジン賞」を受賞。http://www.goo.ne.jp/

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています