collider2d

Collider2D

A 2D collision checker for modern JavaScript games.

Table of Contents

• Geometry
  • Vector
  • Circle
  • Box
  • Polygon
• Collisions
  • pointInCircle
  • pointInPolygon
  • testPolygonPolygon
  • testPolygonCircle
  • testCircleCircle
  • testCirclePolygon

Prologue

Note, this project uses https://github.com/jriecken/sat-js as a foundation and builds on it. I will actively send updates that I find useful to the original repository as I find it to be a great resource still.

If you find collider2d useful please check out the original repository and give credit to the author.

Install

To install collider2d, use:

$ npm install collider2d

Initialization

If you're using collider2d in a browser environment, you can use the collider2d.js file found in the root directory or just a reference to the package if you're using webpack.

browser

// Non-webpack environment:
import Collider2D from '../node_modules/collider2d/collider2d.js';

// Webpack/other bundler environment:
import Collider2D from 'collider2d';

and in a Node environment, you can imply require the module:

node

const Collider2D = require('collider2d');

lastly you just have to make a new instance of Collider2D like so:

const c2d = new Collider2D();

Geometry

collider2d revolves around points and shapes, more specifically vectors, circles, and polygons.

Vector

A vector is a point in 2D space that has a x and y position.

property	type	description	default
x	number	The x position of the vector.	0
y	number	The y position of the vector.	0

example:

const vec1 = c2d.vector(10, 25);

To see the full list of properties and methods for circles, check out the vector documentation.

Circle

A circle consists of a center position and a radius.

property	type	description	default
position	Vector	A vector representing the center of the circle.	vector(0, 0)
radius	number	The radius of the circle.	0

example:

const circle = c2d.circle(c2d.vector(5, 5), 10);

To see the full list of properties and methods for circles, check out the circles documentation.

Polygon

A polygon consists of a convex shape with any number of points (specified in a counter-clockwise order).

property	type	description	default
position	Vector	A vector representing the origin of the polygon (all other points are relative to this one).	vector(0, 0)
points	Array	An array of vectors representing the points of the polygon, in counter-clockwise order.	0

example:

const polygon = c2d.polygon(c2d.vector(0, 0), [
  c2d.vector(0, 0),
  c2d.vector(40, 0),
  c2d.vector(40, 40),
  c2d.vector(0, 40)
]);

To see the full list of properties and methods for polygons, check out the polygon documentation.

Box

A box represents an axis-aligned bounding box with a width and a height.

property	type	description	default
position	Vector	A vector representing the position of this box.	vector(0, 0)
width	number	The width of this box.	0
height	number	The height of this box.	0

example:

const box = c2d.box(c2d.vector(5, 10), 100, 250);

To see the full list of properties and methods for boxes, check out the box documentation.

Collisions

There are three different types of collisions: point, circle, and polygon collisions.

Some collisions (testCircleCircle, testPolygonPolygon, testPolygonCircle, testCirclePolygon) have a details parameter that can be used to return extra details about the collision, if there is one.

The structure of the collision details object looks like:

property	type	description	default
a	Vector,Circle,Polygon	The first collision object
b	Vector,Circle,Polygon	The second collision object
overlapN	Vector	A unit vector representing the direction and magnitude of the overlap.
overlapV	Vector	A vector representing the minimum change necessary to extract the first object from the second one.
overlap	number	The amount that is overlapping.
aInB	boolean	Returns true if the first collision object is completely in the second collision object.
bInA	boolean	Returns true if the second collision object is completely in the first collision object.

Note that if you pass in true for the detail parameter and there is a collision, there will not be a boolean returned but the collision details object instead. If there is no collision then it will still return false.

Point Collisions

pointInCircle

Checks to see if a point is inside of a circle.

Returns true if the point is in the circle or false otherwise.

property	type	description	default
point	Vector	The point to test.
circle	Circle	The circle to test.

example:

const circle = c2d.circle(c2d.vector(100, 100), 20);

const collision = c2d.pointInCircle(c2d.vector(110, 110), circle); // true

pointInPolygon

Checks to see if a point is inside of a convex polygon.

Returns true if the point is in the polygon or false otherwise.

property	type	description	default
point	Vector	The point to test.
polygon	Polygon	The polygon to test.

example:

const triangle = c2d.polygon(c2d.vector(30, 0), [
  c2d.vector(0, 0),
  c2d.vector(30, 0),
  c2d.vector(0, 30)
]);

const collision = c2d.pointInPolygon(c2d.vector(35, 5), triangle); // true

Polygon Collisions

testPolygonPolygon

Checks whether polygons collide.

Returns true if the circles collide or false otherwise. If details is set to true and a collision occurs then a collision details object will be returned instead of true.

property	type	description	default
a	Polygon	The first polygon.
b	Polygon	The second polygon.
details	boolean	If set to true and there is a collision, an object highlighting details about the collision will be returned instead of just returning true

example:

const polygon1 = c2d.polygon(c2d.vector(0, 0), [
  c2d.vector(0, 0),
  c2d.vector(40, 0),
  c2d.vector(40, 40),
  c2d.vector(0, 40)
]);

const polygon2 = c2d.polygon(c2d.vector(30, 0), [
  c2d.vector(0, 0),
  c2d.vector(30, 0),
  c2d.vector(0, 30)
]);

// No details
const collided = c2d.testPolygonPolygon(polygon1, polygon2); // true

// Details
const collidedDetails = c2d.testPolygonPolygon(polygon1, polygon2, true);
console.log(collidedDetails.overlap); // 10

testPolygonCircle

Check if a polygon and a circle collide.

Returns true if the circles collide or false otherwise. If details is set to true and a collision occurs then a collision details object will be returned instead of true.

property	type	description	default
polygon	Polygon	The polygon to check.
circle	Circle	The circle to check.
details	boolean	If set to true and there is a collision, an object highlighting details about the collision will be returned instead of just returning true

example:

const circle = c2d.circle(c2d.vector(50, 50), 20);

const polygon = c2d.polygon(c2d.vector(0, 0), [
  c2d.vector(0, 0),
  c2d.vector(40, 0),
  c2d.vector(40, 40),
  c2d.vector(0, 40)
]);

// No details
const collided = c2d.testPolygonCircle(polygon, circle); // true

// Details
const collidedDetails = c2d.testPolygonCircle(polygon, circle, true);
console.log(collidedDetails.overlap.toFixed(2)); // 5.86

Circle Collisions

testCircleCircle

Check if two circles collide.

Returns true if the circles collide or false otherwise. If details is set to true and a collision occurs then a collision details object will be returned instead of true.

property	type	description	default
a	Circle	The first circle.
b	Circle	The second circle.
details	boolean	If set to true and there is a collision, an object highlighting details about the collision will be returned instead of just returning true

example:

const circle1 = c2d.circle(c2d.vector(0, 0), 20);
const circle2 = c2d.circle(c2d.vector(30, 0), 20);

// No details
const collided = c2d.testCircleCircle(circle1, circle2); // true

// Details
const collidedDetails = c2d.testCircleCircle(circle1, circle2, true);
console.log(collidedDetails.overlap); // 10

testCirclePolygon

Check if a circle and a polygon collide.

NOTE: This is slightly less efficient than polygonCircle as it just runs polygonCircle and reverses everything at the end.

Returns true if the circles collide or false otherwise. If details is set to true and a collision occurs then a collision details object will be returned instead of true.

property	type	description	default
circle	Circle	The circle to check.
polygon	Polygon	The polygon to check.
details	boolean	If set to true and there is a collision, an object highlighting details about the collision will be returned instead of just returning true

example:

const circle = c2d.circle(c2d.vector(50, 50), 20);

const polygon = c2d.polygon(c2d.vector(0, 0), [
  c2d.vector(0, 0),
  c2d.vector(40, 0),
  c2d.vector(40, 40),
  c2d.vector(0, 40)
]);

// No details
const collided = c2d.testCirclePolygon(circle, polygon); // true

// Details
const collidedDetails = c2d.testCirclePolygon(circle, polygon, true);

Tests

To run the tests available for collider2d use:

$ npm run test

License

MIT

Changelog

0.2.0 / 2020-02-18

• [FEATURE] Added translate to circle to easily modify the position like the polygon version.
• [TEST] Added testing for circle and polygon translations.