表示モード

複雑な条件の当たり判定を調べる ​

複雑な条件の当たり判定を調べるには collision-js を利用します。

凡例 ​

javascript
var co = require("@akashic-extension/collision-js");

// 矩形を定義する
var box1 = {
  position: { x: 300, y: 200 }, // 矩形の中心座標
  halfExtend: { x: 128, y: 96 }, // 矩形の縦・横の半分の長さ
  angle: 0 // 矩形の回転角度[radian]
};

var box2 = {
  position: { x: 100, y: 100 },
  halfExtend: { x: 64, y: 48 },
  angle: 0
};

var isCollision = co.boxToBox(box1, box2); // box1 と box2 が衝突している場合は真を返す

利用例 ​

次のコンテンツは、青のポリゴンをドラッグ/スワイプし緑のポリゴンと衝突すると青のポリゴンの色が赤に変わります。

詳細 ​

collision-js を使うことで様々な形状の当たり判定を取得することができます。エンティティのような矩形の他に、AABB、円、直線、線分、点、ポリゴンなどの形状も判定に利用できます。また、利用できる形状の組み合わせに対して衝突判定関数を提供します。例えば線分と矩形の衝突判定を得たいのであれば、 segmentToBox() を利用することができます。

より簡単に衝突判定を行う方法として、Akashic Engine 標準のg.Collisionを利用することもできます。

collision-js は Akashic Engine での利用を念頭に開発されていますが、単体での利用も可能です。

javascript
var co = require("@akashic-extension/collision-js");

// 矩形を定義する
var box = {
  position: { x: g.game.width / 2, y: g.game.height / 2 },
  halfExtend: { x: 128, y: 96 },
  angle: Math.PI / 3
};

// 線分を定義する
var segment = {
  position: { x: 8, y: 128 },
  endPosition: { x: 128, y: 8 }
};

var isCollision = co.segmentToBox(segment, box);

それぞれの衝突判定関数と形状の利用方法は、 collision-js のサンプル を参照してください。

関連情報 ​