今回はThree.jsを使って簡単なゲームコンテンツ「だるま落とし」を作ってみましたので、その制作談です。

なぜ、だるま落とし？

先日Three.js入門のハンズオンセミナーにて物理演算のオススメのライブラリを聞いたところ
「Cannon.js」を教えていただいたので、実際に使ってみようと物理演算が必要になる「だるま落とし」を作ろうということになりました。

完成デモ

制作したデモです！

だるま落とし
http://moon.junni.jp/daruma/

実装について

ゲーム部分の実装は割愛して、だるま落としの物理演算設定の部分だけ簡単に掲載します。
 

ワールドの設定

物理演算の世界での設定を行います。

var world = new CANNON.World();
//重力設定
world.gravity.set(0, -10, 0);
//衝突イベント発生させる
world.broadphase = new CANNON.NaiveBroadphase();

剛体同士の衝突反応

剛体同士の衝突反応を細かく設定して、なるべくブロックやハンマーがリアルな動きにみえるように調整します。

//ブロックと床の判定
var mat = new CANNON.ContactMaterial(materials.base, materials.block, { friction: 0.01, restitution: 0});
world.addContactMaterial(mat);
//ブロック同士の判定
var mat2 = new CANNON.ContactMaterial(materials.block, materials.block, { friction: 0, restitution: 0.0});
world.addContactMaterial(mat2);
//ハンマーとブロックの判定
var mat3 = new CANNON.ContactMaterial(materials.hammer, materials.block, { friction: 10.0, restitution: 0.0, frictionEquationRelaxation:0, contactEquationRelaxation:0 });
world.addContactMaterial(mat3);

当たり判定

剛体同士の衝突反応を細かく設定して、なるべくブロックやハンマーがリアルな動きにみえるように調整します。

//頭ブロック（黒）に対して床についたときにイベントを起こします。
phyList.block[i].addEventListener("collide", function(e) {
  //事前に地面のBodyに対してname で名前を設定しておきます
  if(e.contact.bi.name == "base"){
    game.headStatus = setTimeout(function(){
      if(game.deathCount==itemList.block.children.length-1){
        game.clear();
      }else{
        game.end();
      }
    },500);
  }
});

こんな失敗ありましたログ

■何もしてないのにブロックが崩壊する

→　ブロック同士の反発が強く、ステージに出現するときの演出で最初から落ちてしまいました。。。

■ブロックが床にめり込む

→　ハンマーで打ち出した際、一番下のブロックと床の摩擦で行き場に迷ったブロックが沈み込んでしまったようです。。。

今回記事の内容をLTで発表予定です（今夜）
Three.js入門者LT大会

資料は発表後ここでも載せようと思います。