Box2Dで作れる物体の形は、
円を作るには
まずは円の作り方です。前回と似たような形で、
これをいつも通り以下のコマンドでコンパイルします。
mxmlc -source-path=C:\lib\Box2DFlashAS3_2.0.0 DrawingCircle.as
生成されるFlashは以下のようなものになります。
全体の流れについて
基本的な流れは長方形を作るときと変わりません。マウスのボタンが押されてmouseDownHandlerが呼ばれたら、
マウスのボタンが離されてmouseUpHandlerが呼ばれたら、
円を見ると、
プログラムは、
円の中心と半径を計算する
マウスのボタンが押されたら、
var x:Number = circleCenter.x / DRAW_SCALE;
var y:Number = circleCenter.y / DRAW_SCALE;
円の半径については、

円の中心
var dx:Number = (event.stageX - circleCenter.x) / DRAW_SCALE;
var dy:Number = (event.stageY - circleCenter.y) / DRAW_SCALE;
そして、
var radius:Number = Math.sqrt(dx * dx + dy * dy);
b2CircleDefで円を作る
円の中心と半径が求まったので、
var bodyDef:b2BodyDef = new b2BodyDef();
bodyDef.position.Set(x, y);
var shapeDef:b2CircleDef = new b2CircleDef();
shapeDef.radius = radius;
shapeDef.density = 1; // 密度 [kg/m^2]
shapeDef.restitution = 0.5; // 反発係数、通常は0~1
b2CircleDefにはradiusというプロパティがあります。これは名前のとおり円の半径を表すプロパティです。その他のdensityやrestitutionはb2PolygonDefのときと同じです。
ちなみに、
ちょっと早足でしたが、
三角形を作るには
円の次は三角形に挑戦します。ドラッグアンドドロップで三角形を作れるようにするのは難しいので、
- ソース: DrawingPolygon.
as
このソースをコンパイルすると、
点を3つ打つと三角形ができますね。ちなみに点を打つときは時計回りになるようにしてください。反時計回りに点を打つと不自然な動作をします。これはBox2Dの仕様です。ユーザが点を打つなどして三角形を作るようなFlashを作る場合は、
全体の流れについて
今まではマウスのボタンが押されたときと離されたときのイベントを拾って処理をしていましたが、
stage.addEventListener(MouseEvent.CLICK, clickHandler);
メインとなる処理は、
サンプルを動かしてみると分かりますが、
クリックされた点を記憶する
三角形を作るためには、
private var points:Array = [new Point(), new Point(), new Point()];
private var pointIndex:int = 0;
マウスがクリックされてclickHandlerが呼ばれたら、
points[pointIndex].x = event.stageX / DRAW_SCALE;
points[pointIndex].y = event.stageY / DRAW_SCALE;
pointIndex++;
if (pointIndex < points.length) {
return;
}
pointIndex = 0;
最初にクリックされたはpointIndexが0なので、
3回目のクリックになると、
中心座標を設定する
ここまでpointsに記憶してきた3つの点を使って三角形を作ります。三角形は、
var center:Point = new Point();
var i:int;
for (i = 0; i < points.length; ++i) {
center.x += points[i].x;
center.y += points[i].y;
}
center.x /= points.length;
center.y /= points.length;
まず、
中心座標が求まったので、
var bodyDef:b2BodyDef = new b2BodyDef();
bodyDef.position.Set(center.x, center.y);
頂点などを設定する
次はb2PolygonDefの設定です。長方形のときにも使ったクラスですが、
var shapeDef:b2PolygonDef = new b2PolygonDef();
shapeDef.vertexCount = points.length;
for (i = 0; i < points.length; ++i) {
shapeDef.vertices[i].Set(points[i].x - center.x, points[i].y - center.y);
}
違いが分かったでしょうか。長方形のときはSetAsBoxやSetAsOrientedBoxを使って形を設定していましたが、
vertexCountには、
verticesに設定する座標は、
その他のパラメータを設定する
仕上げとして密度、
shapeDef.density = 1; // 密度 [kg/m^2]
shapeDef.restitution = 0; // 反発係数、通常は0~1
shapeDef.friction = 0.5; // 摩擦係数、通常は0~1
摩擦係数frictionは新しく出てきたパラメータです。今までの長方形や円ではあまり意味がなさそうなので設定しませんでしたが、
クリックした点を描画する
最後に、
DebugDrawを使っている場合、
クリックした点を描く処理は以下のとおりです。
var i:int;
for (i = 0; i < pointIndex; ++i) {
graphics.drawCircle(
points[i].x * DRAW_SCALE,
points[i].y * DRAW_SCALE,
5);
}
今までクリックされた回数だけfor文を回し、
多角形を作るには
三角形のプログラムを書き換える
多角形を作るのは簡単です。というのも、
private var points:Array = [new Point(), new Point(),
new Point(), new Point(), new Point()];
これだけで、
おかしな動きをするケース
三角形の時には時計回りという制約がついていましたが、
しかし適当に点を打っていると、
また、

こういったことが起こるのは、
まとめ
円や多角形を作る方法について説明してきました。b2BodyDefを使って物体の中心座標を決めるところは全て共通ですが、
物体を作る方法については一通り説明し終わったので、