Box2DでActionScript物理プログラミング

第3回 マウスのドラッグ&ドロップで,好きなサイズの箱を作る

この記事を読むのに必要な時間:およそ 3 分

今回はマウスを使って箱を作れるFlashを作ります。前回はクリックすると決まった場所から1つだけ箱が落ちてくるものでしたが,それを少し進化させ,マウスのドラッグ&ドロップで好きなサイズの箱を何個でも落とすことができるようにします。

クリックした場所から箱を落とすには

いきなり好きなサイズの箱を作るFlashに取り掛かると難しいので,まずは前回の記事で解説したDropBoxをほんの少し書き換え,クリックした場所から箱が落ちてくるFlashを作ります。動作としては以下のようになります。

マウス操作に応じた処理をしているので,少しは自分で操作している感覚が得られると思います。これを実現するためにどのぐらいプログラムを書き換えているかというと,実はたったの1行です。

前回からの変更点

前回のプログラムの中で箱の場所を決めていたのは,61行目から始まる以下の部分でした。

// 箱の位置を左から2.5m、上から1mとする
var boxBodyDef:b2BodyDef = new b2BodyDef();
boxBodyDef.position.Set(2.5, 1);

この中の最後の行を以下のように書き換えると,クリックした場所から箱を落とせるようになります。

boxBodyDef.position.Set(event.stageX / 100, event.stageY / 100);

eventはMouseEvent型の変数で,プロパティstageXとstageYは,マウスがクリックされた場所です。この値はもちろんピクセル単位なので,200や300などといった値になります。しかし,物理エンジン内の単位はメートルなので,このままでは大きすぎます。そのため,マウスの座標を100で割っています。

100で割る理由については,前回説明したDebugDrawが関係してきます。DebugDrawについては軽く説明しましたが,今回は特にここが大事なのでもう一度詳しく説明します。

マウスの座標を物理エンジン内の座標へ

「画面上での座標」「物理エンジン内の座標」を対応付けているのは,b2DebugDrawクラスのプロパティであるm_drawScaleです。この値は,物理エンジン内での1mを何ピクセルにするかを表しています。m_drawScaleの値は100にしているので,1mが100ピクセルということになります。

例えば,画面上の(200, 100)という座標でマウスがクリックされたとします。これを物理エンジン内の単位に置き換えると,左から2m,上から1mの位置になります。

カーソル座標との対応

カーソル座標との対応

この関係を式にすると,以下のようになります。

物理エンジン内の位置 = マウスの座標 / m_drawScale
      (2, 1)      =  (200, 100)  /  100

つまり,マウスカーソルの座標をm_drawScaleで割ることによって,物理エンジン内の位置に変換することができます。この座標に箱を作れば,マウスでクリックした位置と箱の作られる位置がぴったりと一致します。

stageXとstageYについて詳しく

話が変わりますが,この記事に貼り付けられているFlashのサイズは400x300です。しかし,DropBoxの物理エンジンは,横5m,縦3.75mとして設定してあります。ではm_drawScaleが中途半端な値になっているかというと,そうではありません。ここまで説明してきているのと同じように,100を使っています。それでもクリックした位置から箱が降ってくるのはなぜでしょうか。

実はFlashそのものはmxmlcデフォルトの500x375として作ってあるのですが,HTMLに貼り付けるときに400x300というサイズを指定しています。こうすると,マウスをクリックしたときにstageXとstageYに設定される値は,自動的に500x375の範囲内になります。このようにマウスカーソルの座標は勝手に調整されるので,プログラムを作っているときは,表示されるときのサイズを考えなくても大丈夫です。

マウスをドラッグして箱を作る

いよいよ本題に移ります。今回もActionScriptファイル1つだけのシンプルなプログラムです。クラス名は,箱を積み重ねていくということでTsumikiという名前にしています。

初期化や床の設置など,大部分はDropBoxのプログラムを流用しています。箱を作る部分も,基本的な流れは同じです。

コンパイルするときのコマンドは,ActionScriptファイルがTsumiki.asになっている部分を除いて,前回と同様です。

mxmlc -source-path=C:\lib\Box2DFlashAS3_2.0.0 Tsumiki.as

無事コンパイルできると,以下のようなFlashが作られます。

サンプルでできること

初期状態では前回使った床が表示されていますが,箱がどこにもありません。画面内でマウスのボタンを押し,そのままドラッグしてどこかで離すと,その大きさの箱が画面に現れます。前回とは違い,何個も箱を落とすことができます。

画面下にある床は固定したものとして作られているので,何があっても動きません。床をまたぐような箱を作ろうとすると,上か下に強制的に押し出されます。また,たくさん箱が詰まったところの中に箱を作ろうとすると,他の箱が外に押し出されます。

マウスをドラッグしている間に,作られる箱の枠を表示したほうが見やすくなるかとも考えたのですが,プログラムが少し複雑になってしまうので表示していません。

著者プロフィール

木村秀敬(きむらひでたか)

茨城高専,北陸先端大を卒業後,独立系ベンチャーにあこがれてjig.jpに就職。 ActionScript好きですが,根はコテコテのC/C++プログラマです。Flash/ActionScriptに興味のある方は是非Spark Projectへ。

コメント

コメントの記入