超マイペースでぼちぼち作っていた、AIで歩行動作を学習しようプロジェクト（１歩目、２歩目）なのですが、先日のイベントでお話したこともあり一段落したので、ひとまずトップページで正式公開することにしました。

» Earthwalker

今回のアップデートは遺伝的アルゴリズムの最適化、インターフェースの強化、そしてエディタ機能です。

今までは頑張るイモ虫君を見ているだけでしたが、これからは好きな構造の生き物を創って歩かせることができます。誰も見たことのない生き物たちが頑張って歩き方を覚えていく様子を、ほほえましく見守ってあげてください。

エディタ機能
生物の作り方をちょっと説明。真ん中の地球にマウスを持っていくとエディタ機能に入れます。その後、地球の下のほうの「HELP!」にマウスを合わせるとエディタの使い方を見ることができます。基本的には動きの軸となる関節を、棒の体で繋いであげれば完成です。左下のNODEやJOINTは身体構造をあらわしていて、それぞれ関節の数、棒の数になっています。

あまりにパーツの多い生物を作るとPCが重くなっちゃうし、たまに物理演算が崩壊して生き物が飛んでっちゃうので注意ですが、やっとコンテンツとして1ステップ進めることができたかなあ、といった感じです。

学習パラメータ
歩行動作のためのパラメータも少し変えました。
0.5秒ごとに各関節の速度が決められた数値に切り替わるようにして、それを5回繰り返します。1回関節の速度が切り替わる単位を1ステップとします。5ステップをまとめて、1回の歩行動作（＝1サイクル）とします。個体評価は3サイクルでおこないます。計測前の座標と、3サイクル経過後の座標を比べて、どれくらい進んだのかを評価値として遺伝的アルゴリズムを実行します。

左下のSTEPやCYCLEはこの値となっています。ちなみにAGEは世代数、SCOREはその世代の中での最高得点です。それぞれの生き物にくっついてる数字やグラフ表現は個人的な趣味で、中身は適当です、すみません、でも好きなんですこういうの。

今後の予定
このあとどうするかなのですが、まだノープラン。いろんな人の生き物を見れたりするビューアや、レースさせるバトル機能もおもしろそうですし、進化の系譜をまとめて図鑑にするのもいいかも。やりたいことは尽きないですけど、またマイペースに作っていきます。

今、自分が何を作りたいのか、恥ずかしながら模索中です。色々考えてはみるけど、いつも「たくさんの人に喜んでもらいたい」という結論にたどり着きます。僕にとってテクノロジーは大きなキャンバスであり、プログラムは絵筆なのかな。へっぽこプログラマな僕が言うのは何ともおこがましいのですが、音楽や文学や絵画やスポーツで世界中の人を感動させられるなら、プログラムにも何かきっとできるはず。

イベント会場でも、プロジェクタを使ってこいつを設置させてもらったのですが、多くの人に楽しんでいただき、僕が思いもかけないような生き物がたくさん生まれました。そんな生き物たちがだんだんと歩けるようになっていく様子がかわいくて、ただ感動していました（親心によるところも少なからずあると思いますが）。みなさま、どうもありがとうござました。

学習アルゴリズムというコアな技術の軸をぶらさずに、どう表現すればもっと多くの人に楽しんでもらえるのか。イモ虫君にとても勉強させてもらってます。感謝。

どうも間が空いてしまってすいません。
前回の何も学習しなかったバージョンに脳みそを加えて、単純なGAを組み込んできました。ageが世代、fitnessがその世代の生物が記録した中で一番良かった成績です。この数値が上がっていけば学習が成功しているといえます。3匹しか見えていませんが、一応裏側で10匹ほど動いています。

» Earthwalker Prototype02

う～ん、学習してるような、してないような。なんとも微妙な感じです。まだまだ改良が必要です。
GAの基本設定としては、エリート（淘汰や突然変異を受けず、次世代にそのまま残される個体）は生成最優秀の一匹、交配は2点交叉が1ペア、パラメータ化と評価方法は前回に示したとおり。かなり勘です。

ちなみに、今回から描画をnutsuさん作のFrocessingでおこなっています。生物の体が曲線描画になっているところなんかそうですね。ありがたやありがたや。

見た目が貧相なので、エンジンをバージョンアップしていくと共に、次回はもうちょっとかっこよくなる予定です。思いっきり趣味に走ります。メーターとかグラフをいっぱいつけます。(*ﾟ∀ﾟ)=3 ﾑｯﾊｰ!!。ではまた。

僕の大好きな、「マッチ箱の脳」という本があります。
人工知能についてとってもおもしろく解説してあるこの本を書いたのは、「がんばれ森川君2号」や「アストロノーカ」などの人工知能が組み込まれたゲームを作ったすごい人です。

» マッチ箱の脳(AI)―使える人工知能のお話

僕はアストロノーカしかやったこと無いのですが、人工知能が自然にゲームに組み込まれていてすごいなあと当時思ってました。中ではすっごい難しいことをやっているのに。その影響か、僕も人工知能を組みたいと思ってこれまで何度もチャレンジしては挫折してきましたが、懲りずにまたチャレンジすることにしました。

てなわけで、シャクトリムシに歩き方を学習させようと思います。昔は全部自分で作ろうとして失敗したけど、今は高速なAS3や物理エンジンライブラリもあるし、やってみよーGOGO！というわけで今はこんな感じ。

» Earthwalker Prototype01

ちなみに、まだ人工知能を組み込んでいないので、どれだけ待ってもうまく歩けません。クリックでカメラを切り替えるなどという、見た目な機能ばかり付けています。さいさき不安です。

まず、シャクトリムシの歩行について考えてみます。人工知能を組むときは、何を学習させるのかが一番大事なので、ここを見極めます。

いくつかの棒状のパーツが繋がった体をシャクトリムシと見立てます。体の繋ぎ目である関節を適当に動かすと、シャクトリムシがウニョウニョ動きます。でもこれだけだと、ただ暴れているだけで全然前へ進みません。前へ歩かせるためには、全ての関節が連携しながら動く必要があります。じゃあ、どのタイミングで、どのくらいの速さで、どれくらいの力で動かせば、もっとも前へ進めるのか。人が手動で調整しても良いのですが、関節の数が増えたら大変だし、途中で重力の大きさとか、少しでも変えるとまた最初から調整というのはちょっと。。。

なので、その辺をシャクトリムシ自身に学習してもらいます。問題を簡単にするために、0.5秒ごとに各関節の速度が決められた数値に切り替わるようにして、それを8回繰り返します。その8回の切り替わりをまとめて、1回の歩行動作のサイクルとします。関節は5個あるので、一体のシャクトリムシの歩行方法を決定するために、8×5=40のパラメータを必要とします。とりあえず、当面はこの40個のパラメータを学習していきます。そのうち形状の進化もさせたいので、そしたらまた別のパラメータにしなければならないのですが。

学習方法は、分かりやすくて学習過程が楽しい遺伝的アルゴリズム（Genetic Algorithm、以下GA）を使っていくことにします。

さてここからは、GAをちょっとでも分かってもらえればということで、GAの概要を書いておきます。うろ覚えな上に下手にドラマチックにしようとしたので、正確ではないと思いますが、興味のある方は何かの足しになるかも知れません。多分本当はもっとドラマチックなんです、きっと。それに、僕もこれ以上のことは分からずにやっているので大丈夫なはずです（何が）。本気で勉強したい人にはこのサイトがおすすめです。

準備編
適当な数のシャクトリムシを作ります。
このとき、シャクトリムシの関節の動き方（どんなタイミングで、どんな速度で、どんな力で動かすのか）をランダムに決定し、パラメータとして持たせておきます。このパラメータを生物のそれぞれの個性になぞらえてシャクトリムシの染色体と呼びます。同じ染色体を持ったシャクトリムシは、全く同じ動きをするわけです。で、色んな個性をもったシャクトリムシをひとまとめにして世代と呼ぶことにします。

激闘編
世代ができたところで、次はどいつが一番優秀なシャクトリムシなのかを見極めます。何をもって優秀なのかは色々意見がありますが、とりあえず全員を歩かせてみて、一定時間内に一番遠くまで歩いたシャクトリムシを優勝とします。歩かせた後は成績順にソートでもしておきましょう。

愛憎編　～淘汰～
競争すれば優秀なやつも出てくるし、落ちこぼれも出てきます。手を繋いでみんなで一等賞なんてこの世界には存在しません。しょせんこの世は弱肉強食、弱いシャクトリムシは生存競争に負けて死んでしまいます。この弱肉強食の世界をGAでは淘汰（選択）という処理でおこないます。

GAとは、何百世代も世代交代しながら、だんだんと優秀なシャクトリムシを作っていくという仕組みです。弱いシャクトリムシは次の世代に自分の子孫を残せず、捨てられます。どのシャクトリムシを、どれくらいの数だけ淘汰させるのかを決める方法もたくさんあって、単純にランキング最下位から選んだり、確率的に選んだり色々です。

愛憎編　～交叉～
生存競争に敗れるシャクトリ虫もいれば、生き残るシャクトリ虫もいます。そして、次世代に向けてシャクトリ虫をさらに進化させるべく、生き残ったシャクトリ虫の優秀な染色体をかけあわせて、もっと優秀な染色体をつくりだす処理を交叉といいます。

生き残ったシャクトリ虫の中から、何らかの方法（ランキングの上位からだったり、ランダムだったり色々あります）で2匹の親を選びます。選ばれた親は交配し、2匹の子供を作ります。この子供は、生き残った親の染色体から生まれるので、そこそこ優秀なシャクトリ虫だと予想されます。たまに親の良くない部分を引き継いだ子供も生まれますが。交叉の方法もそれこそたくさんあって、親の遺伝子をある1点で入れ替える一点交叉だったり、二点交叉だったり、解きたい問題によって良い方法は違ってきます。結構バクチなのがアレですが、これでひとまず次世代に希望をもたせることができました。

そうそう、淘汰しすぎた場合はランダムな染色体を持った新入りを追加したり交配したり、増えすぎた場合は多めに淘汰させるなどして、今の世代と次世代とでシャクトリ虫の総数が同じになるようにするのを忘れずに。いつの間にか絶滅しちゃったりとか寂しいから。

愛憎編　～突然変異～
次世代の卵もそろい、愛憎編もそろそろ終幕です。が、最後にちょっと味付けします。というのも、淘汰と交叉だけを繰り返していくと秀才はだんだんと多くなっていくのですが、壁をぶち破る天才は生まれにくいのです。このままだと、やがてそこそこ優秀な染色体にみんな同化し、進化が止まってしまいます。

そこで、染色体のどこか一部分を、極めて低い確率で全く別の値に書き換えてしまいます。これを突然変異と呼びます。突然変異のおかげで進化が停滞せずに、常にチャレンジャーな世代を生み出すことができます。突然変異をさせすぎると、副作用としてせっかくこれまで培ってきた優秀な染色体の情報が壊されてしまうので注意です。

歴史はちょっとだけ進んで繰り返す
そして、次世代はまた激闘編へと進み、だんだんとシャクトリムシは歩行動作を獲得していくのでした。

なので久々にQuickBox2Dネタを書こうとActionSnippetを見てみると、僕の知らないサンプルが30個以上。凄い、どれを紹介しようか迷う。というか機能が増えすぎてよくわからん、やばい！というわけで何日かに分けてこのエントリに、サンプルがどんなことをやっているのか、どこの部分がキモなのかだけ勉強がてら書いてみます。間違っていればどうぞ突っ込みお願いします。

QuickBox2Dのメソッドは引数にObject型を渡すことが多いです（Tweenerみたいに）。このObjectでメソッド特有の色々パラメータを指定します。例えば多角形を作成するaddPolyなど、剛体を作り出すaddXXX系のメソッドではx座標やy座標や角度などを標準で指定できます。今回このようなパラメータについて記述するとき、これらの標準プロパティについては省略して、addPolyならaddPolyでしか指定できない引数だけを記述していきます。addXXX系のメソッドで指定できる標準パラメータに関してはこちらのエントリの下の方にまとまっていますので参照してください。

コード中に出てくるsimはQuickBox2Dのインスタンスを表しています。

 var sim:QuickBox2D = new QuickBox2D(this, {オプション});

　
追記 09.10.04
とりあえずタイトルだけ書いた、先に。
　

32. setGroupIndexによる衝突判定有無の切り替え – QuickBox2D Mini-Machine
執筆中

31. テクスチャをジョイントに適用する – QuickBox2D Joint Skinning
執筆中

30. テクスチャサイズの自動調整 – QuickBox2D Skinning Examples
執筆中

29. 指定したgroupIndex同士の衝突を検出する – QuickBox2D Contact Filtering
執筆中

28. FlashPlayer10の3D表現 – QuickBox2D 3D
執筆中

27. QuickBox2Dによる衝突判定3 – QuickBox2D Contacts Part 3
執筆中

26. QuickBox2D 1.0の特長 – QuickBox2D 1.0 Features
執筆中

25. QuickBox2Dによる衝突判定2 – QuickBox2D Contacts Part 2
執筆中

24. QuickBox2Dによる衝突判定1 – QuickBox2D Contacts Part 1
執筆中

23. QuickBox2D 1.0リリース – QuickBox2D 1.0
執筆中

22. 指定時間後に関数を呼び出す – QuickBox2D addTimeStepSequence() Preview

sim.addTimeStepSequence(
  { time:時間, callback:呼び出す関数, args:[呼び出し時の引数配列] },
  { time:時間, callback:呼び出す関数, args:[呼び出し時の引数配列] },
  { time:時間, callback:呼び出す関数, args:[呼び出し時の引数配列] },
  ...
  { time:時間, callback:呼び出す関数, args:[呼び出し時の引数配列] }
);

addTimeStepSequenceにあらかじめ登録しておくことで、指定した時間ステップが経過すると指定し関数を指定した引数と共に呼び出すことができる。呼び出しのタイミングはFRIM(フレームレートに依存しない)ので、オブジェクトの状態とずれることがない。デモではオブジェクトの動きやタイミングに合わせての視点移動やズームをおこなっている。addTimeStepSequenceには一度にいくらでも登録可能。timeに指定する数値の計算方法を後で確認する。

21. ピタゴラスイッチ的なサンプル – QuickBox2D Vaguely Goldberg-esque
シーソー機構や、反発係数(restitution)を1以上にすることで打ち返す機構をつかったピタゴラスイッチのようなサンプル。おもしろい。

20. createメソッドによるオブジェクトの生成 – QuickBox2D create() Method

sim.create(生成するオブジェクトの種類, {オプション});

これまでaddCircle、addBox、addPolyなどメソッドそのものを使い分けることで様々なオブジェクトを生成したが、実はcreateメソッドだけで任意のオブジェクトを生成できる。第1引数に”circle”、”box”、”poly”などオブジェクトの種類を文字列で指定すればOK。第2引数はオブジェクトの生成パラメータ。

19. 衝突判定の有無をを動的に切り替える – QuickBox2D groupIndex Platforms

var object:QuickObject = ...
var filter:b2FilterData = object.shape.GetFilterData();
filter.groupIndex = 1;
object.shape.SetFilterData(filter);

Box2DFlashAS3の衝突判定フィルタであるb2FilterDataのgroupIndexを動的に書き換えることで、上方向からの衝突判定だけを持っているオブジェクトを生成するサンプル。
また、sim.w.GetContactCount() メソッドにより現在衝突が起こっているオブジェクトの数を知ることができる。

18. 人体と一輪車の連動サンプル – QuickBox2D Unicycler
一輪車でバランスを取りながら前後に移動する人間を模したデモ。一見リアルな動きに、バランスと取るための凄いアルゴリズムが組まれていそうに感じるが、実は転けないように毎フレーム上体の角度をコントロールしている。
バランスを取っているように見せるために腕の動きをフリーにしていること、上体を三角関数で揺らしていること、車輪と足の繋ぎの見せ方が秀逸。上体と車輪の接続部分にどうもテクニックを使ってるっぽいので後で調べないと。あと、QuickBox2DのコンストラクタパラメータとしてrenderJointsを指定するとジョイントを表示するかどうか切り替えられる。

17. 足の動きを作るサンプル – QuickBox2D Floating Walker
原始的な二足歩行ロボットのスケッチらしい。ジョイントを使って足の動きを作ってる。ジョイント生成用のconnect関数が便利そう。あと、QuickBox2DのコンストラクタパラメータにgravityX、gravityYを指定すれば重力を簡単に設定できる。

16. プリズムジョイント（PrismaticJoint）を作る – QuickBox2D Prismatic Joint

var object:QuickObject = sim.addJoint({
  type:"prismatic",
  a:オブジェクトAのbody,
  b:オブジェクトBのbody,
  anchor:オブジェクトAとジョイントの接続点(b2Vec2),
  axis:ジョイントの駆動方向を表すベクトル(b2Vec2)
});

DistanceJoint以外のジョイントを作ろう第四弾はプリズムジョイント。このジョイントはピストンの動きを実現する。anchorを軸として、axisの方向に向かってピストン運動をするっぽいな。
ピストンの移動幅はupperTranslationやlowerTranslationで制御できる。こういう、サンプルで使われてないけど指定できるパラメータに関しても後で追記しときます。
あまり関係ないけどオブジェクトのbody.GetWorldCenter()でそのオブジェクトのグローバル座標をb2Vecインスタンスで取得できるのか、なるほど。
QuickBox2Dクラスによく使いそうな文字列は定数化されてるのを発見したのでメモ。

QuickBox2D.STEP      // "step"
QuickBox2D.DISTANCE  // "distance"
QuickBox2D.REVOLUTE  // "revolute"
QuickBox2D.PRISMATIC // "prismatic"
QuickBox2D.GEAR      // "gear"
QuickBox2D.PULLEY    // "pulley"

これでジョイントの指定にスペルミスが減る、よかった。

15. ギアジョイント（GearJoint）を作る – QuickBox2D Gear Joint

var object:QuickObject = sim.addJoint({
  type:"gear",
  a:接続するオブジェクトAのbody,
  b:接続するオブジェクトBのbody,
  joint1:影響するジョイント1,
  joint2:影響するジョイント2
});

DistanceJoint以外のジョイントを作ろう第三弾はギアジョイント。このジョイントは2つのジョイントの動きの大きさの和を保存するように働く。
デモでは、joint1としてプリズムジョイント（次のサンプルで解説）、joint2として回転ジョイントを指定してる。このとき、joint1の伸びとjoint2の回転角の和はいつも等しくなる。また、joint1とjoint2の接続オブジェクトaはどちらも空間（sim.w.GetGroundBody()）である必要がある。これは使ってみて慣れるしかない。難しいねー。

14. ジョイントを空間中の1点と接続する – QuickBox2D Connect to GroundBody

var object:QuickObject = sim.addJoint({
  type:"revolute",
  a:接続するオブジェクトのbody,
  b:sim.w.GetGroundBody()
});

QuickObjectインスタンスのwプロパティ（b2World）のGetGroundBodyメソッドで取得したb2bodyを、ジョイントの片方の接続オブジェクトとして設定すると、空間にジョイントを接続することができる。上手くいえないけど空中に固定する感じ。

13. 回転ジョイントに角速度を加える – QuickBox2D Revolute Walker

var joint:b2RevoluteJoint = revJointA.joint as b2RevoluteJoint
joint.SetMotorSpeed(1.0);

3つのオブジェクトを回転ジョイントで接続し、角速度を与えることでモーターの役割をさせるデモ。QuickObjectからb2RevoluteJointを取り出し、Box2DFlashAS3のSetMotorSpeedメソッドを呼び出して回転させている。

12. 滑車ジョイント（PulleyJoint）を作る – QuickBox2D Pulley Joint

var object:QuickObject = sim.addJoint({
  type:"pulley",
  a:接続するオブジェクトAのbody,
  b:接続するオブジェクトBのbody,
  groundAnchor1:オブジェクトA側の固定接続点(b2Vec2),
  groundAnchor2:オブジェクトB側の固定接続点(b2Vec2)
});

DistanceJoint以外のジョイントを作ろう第二弾は滑車ジョイント。固定接続点は2次元ベクトル(b2Vec2)で渡すこと。そうするとオブジェクトA-groundAnchor1-groundAnchor2-オブジェクトBという関係で結ばれる。

11. 回転ジョイント（RevoluteJoint）を作る – QuickBox2D Revolute Ragdoll

var object:QuickObject = sim.addJoint({
  type:"revolute",
  a:接続するオブジェクトAのbody,
  b:接続するオブジェクトAのbody,
  enableLimit:回転角度を制限する場合はtrue、360度ぐるぐる回す場合はfalse,
  lowerAngle:最小の回転角度,
  upperAngle:最大の回転角度
});

DistanceJoint以外のジョイントを作ろう第一弾は回転ジョイント。enableLimitで回転角度を制限する場合はlowerAngle、upperAngleで回転範囲を指定する（ラジアン角）。

10. リンケージされているテクスチャを貼る – QuickBox2D Skinning

var object:QuickObject = sim.addXXX({
  skin:リンケージクラス名
});

QuickObjectを生成するときにオブジェクトに貼り付けるテクスチャを指定できる。貼り付けるテクスチャはflaファイルのライブラリにリンケージされている必要がある。Bitmapじゃなくても大丈夫。

9. groupIndexによる衝突判定の制御 – QuickBox2D groupIndex

var object:QuickObject = sim.addXXX({
  groupIndex:衝突グループインデックス（符号付き整数）
});

QuickObjectを生成するときにgroupIndexを整数で指定できる（負の値も可）。同じ正の数でグループ付けされたオブジェクトは必ず衝突し、同じ負の数でグループ付けされたオブジェクトは必ず衝突しない。デモがとても楽しいので是非見るべし！QuickBox2Dにおける衝突判定の制御については『QuickBox2DやBox2DFlashAS3での衝突判定をグループ分け』参照。

8. 外部XMLにASを記述して動的に実行する – XML to ActionScript #3 (AsXML)
ちょっとこれはよく読んでないのでわかんない。どうやらASを記述した外部XML（AsXML形式？）をswfに読み込んでスクリプトを実行する様子。デモでは、QuickBox2D、Papervision3D、TweenLiteのスクリプトをAsXMLに記述して連携させている。勉強しとこう。

7. フレームレートに依存しないシミュレーション – QuickBox2D FRIM

var sim:QuickBox2D = new QuickBox2D(this, {
  frim:FRIMを使用する場合はtrue、そうでない場合はfalse
});

QuickBox2D初期化時に、frimプロパティをtrueにするとFRIM(frame rate independent motion)モードとなる。通常フレームレートが低いとモーションは遅く、逆にフレームレートが高いと速くなる。FRIMモードではフレームレートに関わらない時間ベースでのシミュレーションが可能となる。そのかわり、フレームレートが低いとそれだけ粗いモーションとなることに注意。とっても便利な機能。

6. オブジェクトに速度を加える – QuickBox2D w/ Key Controls

var object:QuickObject = ...
var vec2:b2Vec2 = object.body.GetLinearVelocity();
var scalar:Number = object.body.GetAngularVelocity();
object.body.SetLinearVelocity(vec2);
object.body.SetAngularVelocity(scalar);

キー操作によってオブジェクトに力を加えるデモ。GetLinearVelocityで現在の速度、GetAngularVelocityで現在の角速度をそれぞれ取得できる。また、SetLinearVelocityとSetAngularVelocityで速度、角速度を設定できる。この辺はQuickBox2Dから、直接Box2DFlashAS3のメソッドを呼び出している感じ。

5. addGroupによるテトリスのブロック生成 – QuickBox2D Tetris Pieces
addBoxで生成したたくさんの正方形をaddGroupで結合し、テトリスのブロックを形作るデモ。

4. addGroupによるオブジェクトのグループ化 – QuickBox2D Groups

var object:QuickObject = sim.addGroup({
  objects:[オブジェクトA, オブジェクトB, オブジェクトC, ... , オブジェクトZ]
});

objects配列で渡したオブジェクトをひとまとめにしたQuickObjectを生成する。frequencyHzとdampingRatioを適度に設定したバネっぽいジョイントの動きにも注目。

3. addPolyによる多角形の生成（凹面も可能） – QuickBox2D Polys

var object:QuickObject = sim.addPoly({
  points:[x1, y1, x2, y2, x3, y3, ... , xn, yn],
  wireframe:全ポリゴンのワイヤーフレームを表示する場合はtrue、輪郭のみを表示する場合はfalse
});

addPolyによる複雑なポリゴン生成のデモ。頂点を格納する順番はどうすればいいのか要確認。

2. addJointによるジョイントの生成 – QuickBox2D Chain

var object:QuickObject = sim.addJoint({
  a:接続するオブジェクトAのbody,
  b:接続するオブジェクトBのbody,
  x1:Aとジョイントの接続点のx座標,
  y1:Aとジョイントの接続点のy座標,
  x2:Bとジョイントの接続点のx座標,
  y2:Bとジョイントの接続点のy座標,
  length:ジョイントの長さ,
  frequencyHz:ジョイントの伸びやすさ,
  dampingRatio:ジョイントの元の長さへの戻りやすさ,
  collideConnected:AとBの間に衝突判定を持たせる場合はtrue、そうでない場合はfalse
});

addJointでオブジェクトAとオブジェクトBをつなぐジョイントを生成できる。このサンプルが投稿されたときはまだDistanceJointしか実装されていなかった。それ以外の、ギアや滑車などのジョイント生成のサンプルは後述。
x1,y1,x2,y2はオブジェクトAやオブジェクトBのローカル座標系でなく、QuickBox2Dのグローバル座標系で指定することに注意。省略するとそれぞれのオブジェクトの基準点が接続点となる。
lengthプロパティはジョイントの長さ。デフォルトではジョイント生成時のオブジェクト同士の距離となるが、別の値を指定する場合は設定する。
frequencyHzはジョイントの柔らかさ。0に近い数値ほどよく伸びるジョイントになり、大きな数値ほど固いジョイントとなる。また、0で完全に剛体となる。
dampingRatioは弾性。0に近い数値ほど伸びた状態から元の長さに戻る力が強まり、大きな数値ほど元の長さへ戻ろうとしなくなる。frequencyHzとdampingRatioでバネのようなジョイントを実現できる。

1. x、y、angleプロパティによるオブジェクトの移動と回転 – QuickBox2D Play

var object:QuickObject = ...
object.x = 10;
object.x = 5;
object.angle = 1;

addBoxやaddCircleなどで作成できるQuickObjectはx,y,angleプロパティの変更で簡単に移動や回転が可能。『QuickBox2D オブジェクトの平行移動と回転』参照。
　

他のQuickBox2Dネタ一覧もどうぞ » tag : QuickBox2D

QuickBox2Dの小ネタ。
運動の状態を保持したままオブジェクトを平行移動や回転させるには、
QuickObjectインスタンスのx、y、angleプロパティを変更すれば良いみたい。
あるオブジェクトのQuickObjectインスタンスはaddしたときに戻り値として受け取れる。
Box2DFlashAS3のSetXFormを使うよりも簡単で便利。

以下サンプルのソースコード（実行には別途Tweenerが必要です）

import com.actionsnippet.qbox.*;
import caurina.transitions.Tweener;

//初期化
var sim:QuickBox2D = new QuickBox2D(this);
sim.setDefault( { fillColor:0x0, lineAlpha:0 } );

//地面を作る
sim.addBox( { x:10, y:13, width:30, height:0.1, density:0 } );

//円を3つ作って配列 _circles に入れておく
var circles:Array = new Array();
circles.push( sim.addCircle( { x:4 , y:8, radius:0.3, isBullet:true } ) );
circles.push( sim.addCircle( { x:6 , y:8, radius:0.6, isBullet:true } ) );
circles.push( sim.addCircle( { x:8 , y:8, radius:1.0, isBullet:true } ) );

//バーを作って変数 _bar に入れておく
var bar:QuickObject = sim.addBox( { x:9, y:5, width:4, height:0.2, angle:0.3, density:0, fillColor:0xcc0000 } );

//シミュレーション開始
sim.start();
sim.mouseDrag();

//各種イベントリスナの登録
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
stage.addEventListener(MouseEvent.CLICK, stageClickHandler);

//円をループさせる処理
function enterFrameHandler(e:Event):void
{
    var sw:Number = stage.stageWidth / 30;

    //全ての円を走査する
    for each(var b:QuickObject in circles)
    {
        var r:Number = b.params.radius;

        //左端から出たら右端に移動させる
        if (b.x < -r    ) b.x = sw + r;
        else
        //右端から出たら左端に移動させる
        if (b.x > sw + r) b.x = -r;
    }
}

//ステージがクリックされたときにバーを回転させる処理
function stageClickHandler(e:MouseEvent):void
{
    //バーの角度を変更
    Tweener.addTween(bar, {
        angle:bar.angle + ((mouseX / stage.stageWidth) - 0.5) * 10,
        time:1,
        transition:"easeOutQuart"
    } );
}

他のQuickBox2Dネタ一覧もどうぞ » tag : QuickBox2D

なるほど。
categoryBitsとmaskBitsを両方指定しないといけなかったのか。

QuickBox2DやBox2DFlashAS3でのオブジェクト同士の衝突判定をコントロールする話。
そもそもBox2DFlashAS3には（多分Box2Dにも）2種類の衝突判定方法が用意されている。
(1) groupIndexを使う方法
(2) categoryBits、maskBitsの組み合わせを使う方法

(1) groupIndexを使う方法

• 同じ正の数でグループ付けされたオブジェクトは必ず衝突する
• 同じ負の数でグループ付けされたオブジェクトは必ず衝突しない

デフォルトは0で、このときは次に書くcategoryBits、maskBitsの組み合わせを使う方法が優先される。0以外の数値を記述するとgroupIndexの方法が優先される。

(2) categoryBits、maskBitsの組み合わせを使う方法

• categoryBitsに、自分が所属するグループを記述する（デフォルトは0×0001）
• maskBitsに、自分と衝突が起こるグループを記述する（デフォルトは0xffff）

(2)のcategoryBits、maskBitsの組み合わせを使う方法についてちょっと解説。
自分と何かが衝突するかどうかは、自分のmaskBitsと相手のcategoryBitsの論理積をとって計算できる。結果が0なら衝突しない、0以外なら衝突する。

サンプルのソースコードは以下

import com.actionsnippet.qbox.*;

var sim:QuickBox2D = new QuickBox2D(this);
sim.setDefault( { lineAlpha:0, fillAlpha:0.5 } );

// 壁 （デフォルト値を使用）
// categoryBits = 0x0001 (0000 0000 0000 0001)
// maskBits     = 0xffff (1111 1111 1111 1111)
sim.createStageWalls( { fillColor:0xCCCCCC } );

var i:uint;

// ●
// categoryBits 0000 0000 0000 0010
// maskBits     0000 0000 0000 0111
for (i = 0; i < 3; ++i)
{
    sim.addCircle( { x:0.8 + 1.2 + i * 6, y:2, radius:0.5, fillColor:0xFF0000, categoryBits:0x0002, maskBits:0x0007 } );
}
sim.addBox( { x:3.2, y:5, width:3, height:3, density:0, fillColor:0xFF0000, categoryBits:0x0002, maskBits:0x0007 } );

// ▲
// categoryBits = 0x0002 (0000 0000 0000 0010)
// maskBits     = 0x0007 (0000 0000 0000 0111)
for (i = 0; i < 3; ++i)
{
    sim.addPoly( { x:0.8 + 2.4 + i * 6, y:2, verts:[[0, 0, 0.5, 0.87, -0.5, 0.87]], fillColor:0x00CC00, categoryBits:0x0004, maskBits:0x0007 } );
}
sim.addBox( { x:9.2, y:5, width:3, height:3, density:0, fillColor:0x00CC00, categoryBits:0x0004, maskBits:0x0007 } );

// ■
// categoryBits = 0x0008 (0000 0000 0000 1000)
// maskBits     = 0x0001 (0000 0000 0000 0001)
for (i = 0; i < 3; ++i)
{
    sim.addBox( { x:0.8 + 3.6 + i * 6, y:2, width:1, height:1, fillColor:0x0000FF, categoryBits:0x0008, maskBits:0x0001 } );
}
sim.addBox( { x:15.2, y:5, width:3, height:3, density:0, fillColor:0x0000FF, categoryBits:0x0008, maskBits:0x0001 } );

sim.start();
sim.mouseDrag();

QuickBox2Dを使う場合は上記サンプルのように、オブジェクトをaddするときに
maskBits
categoryBits
groupIndex
パラメータを指定する。

Box2DFlashAS3ならば
b2ShapeDef.filter.groupIndex
b2ShapeDef.filter.categoryBits
b2ShapeDef.filter.maskBits
を設定。

参考にさせていただいたページ
物理エンジンライブラリ Box2DFlashAS3 衝突判定と衝突のグループ・カテゴリ分け
Box2D:衝突判定のグループ分け
　

他のQuickBox2Dネタ一覧もどうぞ » tag : QuickBox2D

Zevan Rosser氏が作ってる、簡単にBox2DAS3を使うためのライブラリ「QuickBox2D」のチュートリアル。

第一回は、僕の勉強も兼ねて、QuickBox2Dの導入方法と簡単なサンプルの説明です。

メニューはこちら
QuickBox2Dの導入
サンプルファイルのダウンロード
Sample 01 「四角形と円を作ってみる」
Sample 02 「高精度な衝突判定を使う」
Sample 03 「オブジェクトの色や透明度を変える」
Sample 04 「パラメータのデフォルト値を設定する」
Sample 05 「静的オブジェクトを作る」
Sample 06 「多角形を作る」
Sample 07 「複雑な多角形を作る」
Sample 08 「Box2Dのデバッグ表示を使う」
　

導入
まず、QuickBox2Dライブラリを使うには手元にQuickBox2DライブラリとBox2DFlashAS3ライブラリが必要なので、以下のページからそれぞれダウンロードします。

QuickBox2D – Downloadsにある最新版をダウンロード（6月27日現在でQuickBox2D alpha 107）
Box2DFlashAS3 – 緑色のDownloadボタンからダウンロード

ダウンロードしたファイルを解凍し、クラスパスを通します。
めんどうならflaファイルが置いてあるところにBox2Dフォルダとcomフォルダを置けばOK。
導入はこれで完了。
　

サンプル
今回紹介するサンプルのFlashDevelop用プロジェクトファイル一式をダウンロードできます。
Download

以下では，QuickBox2Dのスタートページに載っている8個のサンプルコードを上から順番に説明していきます。
基本的には本家のソースコードそのままですが、とても簡単に物理シミュレーションを実現できる事が分かると思います。
コードはタイムラインに書いてもクラスのコンストラクタに書いてもOK。
赤文字はそのサンプルで大事な部分です。ではどうぞ。
　

Sample 01 「四角形と円を作ってみる」

import com.actionsnippet.qbox.*; // (1)

var sim:QuickBox2D = new QuickBox2D(this);　// (2)

sim.createStageWalls(); // (3)

sim.addBox( { x:5, y:5, width:1, height:1 } ); // (4)

sim.addCircle( { x:4, y:8, radius:2 } ); // (5)

sim.start(); // (6)

sim.mouseDrag(); // (7)

実行結果

真っ赤っか（笑）　はい、ひとつずついきまーす。

import com.actionsnippet.qbox.*;

(1)　QuickBox2Dのインポート。これがないと始まらない。Box2DFlashAS3はインポートしなくてもQuickBox2Dが勝手にやってくれるのでOK。

var sim:QuickBox2D = new QuickBox2D(this);

(2)　QuickBox2Dインスタンスを作る。こいつの中で物理シミュレーションする。引数として渡したMovieClipにシミュレーション結果をバリバリ描画していく。クラスベースでやるときはついついSprite型を渡してしまわないように注意（笑）

sim.createStageWalls();

(3)　とても便利なメソッド。こいつを呼び出せばステージ四方に壁を作ってくれる。ブラウザリサイズに対応してなかったり厚みをコントロールできなかったりするのがあれだけど、とりあえず実験するぶんにはかなり重宝。

sim.addBox( { x:5, y:5, width:1, height:1 } );

(4)　四角形のオブジェクトを作る。Box2DFlashAS3でなにか作るには、まず形状の定義をして、それから実体化する手順がいるけどQuickBox2DではこれひとつでOK。パラメータとしていろんな値を渡せるけど、ひとまず幅1m、高さ1mの四角形をx座標5m、y座標5mの地点に置いてます。

QuickBox2Dでは1mを30ピクセル固定で表現しているので、1ピクセルが1mだと思ってパラメータを指定するとバカでかいオブジェクトが出現してしまいます。なので例えばオブジェクトをx座標90ピクセルに置きたいときは、xのパラメータを3にすればよいです。

sim.addCircle( { x:4, y:8, radius:2 } );

(5)　同じようにして円形のオブジェクトを作る。radiusは半径。要は半径2mの円をx座標4m、y座標8mの地点に置いてます。

sim.start();

(6)　シミュレーションを開始する。これを書いとけば毎フレーム自動でオブジェクトを更新してくれる。Papervision3DでいうところのstartRenderingみたいなもん。

sim.mouseDrag();

(7) これも便利。壁みたいな固定オブジェクト以外のオブジェクトをマウスでドラッグできるようになる。
　

Sample 02 「高精度な衝突判定を使う」

import com.actionsnippet.qbox.*;
var sim:QuickBox2D = new QuickBox2D(this);
sim.createStageWalls();

sim.addBox( { x:5, y:5, width:1, height:1, isBullet:true } );

sim.addCircle( { x:4, y:8, radius:2 } );
sim.start();
sim.mouseDrag();

実行結果

前回との違いはisBulletパラメータをtrueにして渡すだけ。これだけで、この四角形に対しては精度の高い(でも負荷の高い)衝突判定アルゴリズムに切り替わる。試してみると確かにfalseの場合に比べて衝突後の慣性が自然に表現されてて気持ちいいなー。ポイントとなる部分で使うと良いかも。ちなみにBulletは弾丸という意味。
　

Sample 03 「オブジェクトの色や透明度を変える」

import com.actionsnippet.qbox.*;
var sim:QuickBox2D = new QuickBox2D(this);
sim.createStageWalls();

sim.addBox( { x:5, y:5, width:1, height:1, lineColor:0xFF0000, fillColor:0xFFFF00 } );
sim.addCircle( { x:4, y:8, radius:2, fillColor:0xCC0000, fillAlpha:.5, lineThickness:3, lineAlpha:.5 } );

sim.start();
sim.mouseDrag();

実行結果

lineColorで線の色、lineAlphaで線の透明度、lineThicknessで線の太さ、fillColorで塗り色、fillAlphaで塗りの透明度をそれぞれ変更できる。サンプルでは四角形の線の色を赤、塗りの色を黄色、円の塗りの色をグレー、線と塗りの透明度を0.5、線の太さを3に変更してる。
　

Sample 04 「パラメータのデフォルト値を設定する」

import com.actionsnippet.qbox.*;
var sim:QuickBox2D = new QuickBox2D(this);

sim.setDefault( { fillColor:0x00CC22, lineAlpha:0, radius:1.5 } ); // (1)

sim.createStageWalls();

sim.addBox( { x:5, y:5, width:1, height:1, lineColor:0xFF0000, lineAlpha:1 } );
sim.addCircle( { x:4, y:8, radius:2 } );
sim.addCircle( { x:10, y:4, fillColor:0x666666 } ); // (2)

sim.start();
sim.mouseDrag();

実行結果

ほい解説。

sim.setDefault( { fillColor:0x00CC22, lineAlpha:0, radius:1.5 } );

(1) setDefaultメソッドを使えば全オブジェクトに対するデフォルト値を設定できる。ここでは塗りの色を緑、線の透明度を0（表示しない）、半径を1.5mに設定してる。ただしオブジェクトをaddするときのパラメータとデフォルト値では、addするときのパラメータの方が優先される。

sim.addBox( { x:5, y:5, width:1, height:1, lineColor:0xFF0000, lineAlpha:1 } );
sim.addCircle( { x:4, y:8, radius:2 } );
sim.addCircle( { x:10, y:4, fillColor:0x666666 } );

(2) それぞれのオブジェクトをaddするときに、未指定パラメータに関してだけデフォルト値が設定されている。
　

Sample 05 「静的オブジェクトを作る」

import com.actionsnippet.qbox.*;
var sim:QuickBox2D = new QuickBox2D(this);
sim.setDefault( { fillColor:0x00CC22, lineAlpha:0, radius:1.5 } );
sim.createStageWalls();
sim.addBox( { x:5, y:5, width:1, height:1, lineColor:0xFF0000, lineAlpha:1 } );
sim.addCircle( { x:4, y:8, radius:2 } );
sim.addCircle( { x:10, y:4, fillColor:0x666666 } );

sim.addBox( { x:5, y:6, width:4, height:.3, angle:0.3, density:0, fillColor:0xCC0000 } );

sim.start();
sim.mouseDrag();

実行結果

壁のような動かないオブジェクトを作るにはdensityを0にしてあげればOK。densityが0のオブジェクトはmouseDragを実行してもマウスでドラッグできなくなる。ここでは赤いバーを設置。
　

Sample 0６ 「多角形を作る」

import com.actionsnippet.qbox.*;
var sim:QuickBox2D = new QuickBox2D(this);
sim.setDefault( { fillColor:0x00CC22, lineAlpha:0, radius:1.5 } );
sim.createStageWalls();
sim.addBox( { x:5, y:5, width:1, height:1, lineColor:0xFF0000, lineAlpha:1 } );
sim.addCircle( { x:4, y:8, radius:2 } );
sim.addCircle( { x:10, y:4, fillColor:0x666666 } );
sim.addBox( { x:5, y:16, width:4, height:.3, angle:0.3, density:0, fillColor:0xCC0000 } );

sim.addPoly( { x:15, y:8, verts:[[0, 0, 2, 2, 0, 2]], fillColor:0x0000FF } );

sim.start();
sim.mouseDrag();

実行結果

ちょい複雑なので詳しく解説。
好きな形の多角形を作るにはaddPolyを使い、頂点配列をvertsに渡すことで作れる。(x1, y1)、(x2, y2)、(x3, y3)の3点で定義される頂点配列は[x1, y1, x2, y2, x3, y3]となる。3点は最上部の点から書き始めて，時計回りになる順番で書いていく。

ここで書く頂点座標はステージ座標ではなく、オブジェクトを定義するための頂点間の関係を示す座標なので、(0, 0)と書いたからといってステージの(0, 0)に置かれるわけではない。分かりづらければ(0, 0)に最初の点があると思って座標を書いていけばOK。

サンプルでは(0, 0)、(2, 2)、(0, 2)の3点で定義される三角形を作ってx=15、y=8の位置に置いている。vertsが2重配列になっているのは複数の頂点配列を渡せるようにするため(次のサンプルで解説)。

サンプルでは頂点数が3個だけど、頂点数は8個まで増やせる。ただし，凹な形にすると衝突判定がおかしくなるので注意が必要。

もっと複雑な形のオブジェクトを作る場合は，Sample7で解説する3角形の組み合わせで表現する方法や、vertsではなくpointsを用いる方法(後で解説)を使いましょう．
　

Sample 07 「複雑な多角形を作る」

import com.actionsnippet.qbox.*;
var sim:QuickBox2D = new QuickBox2D(this);
sim.setDefault( { fillColor:0x00CC22, lineAlpha:0, radius:1.5 } );
sim.createStageWalls();
sim.addBox( { x:5, y:5, width:1, height:1, lineColor:0xFF0000, lineAlpha:1 } );
sim.addCircle( { x:4, y:8, radius:2 } );
sim.addCircle( { x:10, y:4, fillColor:0x666666 } );
sim.addBox( { x:5, y:16, width:4, height:.3, angle:0.3, density:0, fillColor:0xCC0000 } );

sim.addPoly( { x:15, y:8, verts:[[0, 0, 2, 2, 0, 2], [0, 0, 0, 1, -2, -0.2]], fillColor:0x0000FF } );

sim.start();
sim.mouseDrag();

実行結果

addPolyのvertsに複数の頂点配列を渡せば、複数のポリゴン組み合わさったがオブジェクトを作れる。

サンプルでは(0, 0)、(2, 2)、(0, 2)からなる三角形と、(0, 0)、(0, 1)、(-2, -0.2)からなる三角形を組み合わせたオブジェクトを作ってる。サンプルでは2個のオブジェクトを組み合わせているが，何個でも組み合わせることができる。
　

Sample 08 「Box2Dのデバッグ表示を使う」

import com.actionsnippet.qbox.*;

var sim:QuickBox2D = new QuickBox2D(this, { debug:true } );

sim.setDefault( { fillColor:0x00CC22, lineAlpha:0, radius:1.5 } );
sim.createStageWalls();
sim.addBox( { x:5, y:5, width:1, height:1, lineColor:0xFF0000, lineAlpha:1 } );
sim.addCircle( { x:4, y:8, radius:2 } );
sim.addCircle( { x:10, y:4, fillColor:0x666666 } );
sim.addBox( { x:5, y:16, width:4, height:.3, angle:0.3, density:0, fillColor:0xCC0000 } );
sim.addPoly( { x:15, y:8, verts:[[0, 0, 2, 2, 0, 2], [0, 0, 0, 1, -2, -0.2]], fillColor:0x0000FF } );
sim.start();
sim.mouseDrag();

実行結果

今回最後の解説。
QuickBox2Dのコンストラクタの第2引数にdebug:trueを含むオブジェクト渡せば、Box2Dのデバッグ表示に切り替わる。
　

おつかれさまでした。
以上が、QuickBox2Dをとりあえず使ってみたい人のための導入方法と簡単なサンプルの説明でした。
QuickBox2Dは現在どんどん機能拡張されていたり、おもしろいサンプルが本家でどんどん紹介されているので（GroupとJointの使い方とかFRIM、任意の形を三角ポリゴンに分けてオブジェクトを作る、表示オブジェクトを切り替えるなどなど）、本家に書いてあることはできるだけ紹介していきたいです。あと僕がライブラリのソースコードを読んでて気づいた点やライブラリ拡張の方法とか。

本家のドキュメントも充実していますので、読んでみると良いかも。
　

他のQuickBox2Dネタ一覧もどうぞ » tag : QuickBox2D

Full Adder

Flashで物理演算をしたくても計算が難しいし、Box2DAS3を使うにしても手順が多くてややこしい。そんな人はこれ使うといいかも。
QuickBox2D
Box2DAS3を簡単に使えるようにしてくれるライブラリです。まだ対応していないオブジェクトもあるみたいだけど、とりあえず動くものなら簡単に作れるらしい。

さっそく物理演算のおもちゃを作ってみたのがサムネイルのアレ。
これは全加算器といって、2進数の足し算をしてくれるおもちゃ。

ちょっと遊び方を説明。

1. 玉を上に書いてある数字(+1,+2,+4,+8,+16,+32)のとこに乗せる(同じ数字のとこに同時に2つ乗せちゃだめ)
2. 上のpullを右へひっぱると玉がころころ転がってが2進数の足し算をする
3. ひっぱった後にシーソーに引っかかってる玉の横に書いてある数字(1,2,4,8,16,32)の合計が答え
4. 続けて上にまた玉を乗せてどんどん足し算できる
5. 一番左から玉がこぼれたらオーバーフロー、計算機の限界を超えました(笑)
6. 下のpullをひっぱると強制リセット

詳しくはこことかここを見るといいです。

次回からQuickBox2Dの使い方を解説していくよ。
　

他のQuickBox2Dネタ一覧もどうぞ » tag : QuickBox2D