Cannon.jsで簡単なゲームを作ってみよう！

こんにちは、はっちゃんです。

今回は、前回話したCannon.jsの基本を使って簡単なゲームを作ってみます。

▼前回の記事

Cannon.jsで物理演算に触れてみよう

はっちゃん

2018.01.08

今回のゴール

こんなゲームを作ります。

球体を３つ置く

単純に球体と球体を当てるだけだとつまらないので、ビリヤードみたいに球体同士の跳ね返りを計算して当てるようにします。

3つめのでかい球体ははやちさんの記事によく登場するキャラクターにしてみました！ これを「はやちボール」と名付けるとします。はやちボールはランダムで配置するようにします。

▼3つの球体の物理世界の設定

// Sphere Material
  sphereMat = new CANNON.Material('sphereMat');
  // Sphereのシェイプの質量定義
  phySphere = new CANNON.Body({
    mass: 1,
    material: sphereMat
  });
  phySphere.addShape(new CANNON.Sphere(1));
  phySphere.position.set(20, 1, 0); // 剛体の位置
  // 角速度設定
  phySphere.velocity.set(0, 0, 0);
  // 減衰率
  phySphere.angularDamping = 0.1;
  // 物理世界に追加
  world.add(phySphere);
  
  // Sphere Material2
  sphereMat2 = new CANNON.Material('sphereMat2');
  // Sphere Material2シェイプの質量定義
  phySphere2 = new CANNON.Body({
    mass: 1,
    material: sphereMat2
  });
  phySphere2.addShape(new CANNON.Sphere(1));
  phySphere2.position.set(10, 1, 0); // 剛体の位置
  // 角速度設定
  phySphere2.velocity.set(0, 0, 0);
  // 減衰率
  phySphere2.angularDamping = 0.1;
  // 物理世界に追加
  world.add(phySphere2);
  
  // はやちボール
  sphereMat3 = new CANNON.Material('sphereMat3');
  // はやちボールの質量定義
  phySphere3 = new CANNON.Body({
    mass: 2,
    material: sphereMat3
  });
  phySphere3.addShape(new CANNON.Sphere(2));
  phySphere3.position.set(-10, 2, rand); // 剛体の位置
  // 角速度設定
  phySphere3.velocity.set(0, 0, 0);
  // 減衰率
  phySphere3.angularDamping = 0.1;
  // 物理世界に追加
  world.add(phySphere3);

input type=”range”から値を取得

htmlにinput type=”range”を用意して、ツマミのビジュアルを作ります。
値の取得はjQueryでささっと書いてしまいます。

var angle = 0;
$('.js-range').on('change', function(e) {
  e.preventDefault();
  angle = parseInt($(this).val(), 10);
});

OrbitControlsに注意

カメラをマウスコントロールするためのOrbitControlsは、デフォルトだとdocumentにバインドされてしまうため、inputの操作ができなくなります。

そのため、下記のようにしてcanvasの領域のみに絞る必要があります。

controls = new THREE.OrbitControls(camera, renderer.domElement);

発射ボタンを設置

こちらもjQueryでさくっと書いてしまいます。
rangeから取得した値を、球体のベクトルのz方向に代入します。

$('.js-fire').on('click', function(e) {
  e.preventDefault();
  phySphere.velocity.set(-20, 0, -angle);
});

完成！

ツマミで角度を調整して発射ボタンを押してみましょう。
うまく調節して、はやちボールに当たれば成功です。

See the Pen cannon.js test by k_hatsushi (@hatsushi_kazuya) on CodePen.

まとめ

いかがでしたか？
CANNON.jsはwebで3Dゲームを作るのに適したライブラリーだと思いますので、工夫して色々作ってみたいですね！

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。