@dimensionalpocket/aa-rectangle

var box = new AARectangle(width, height, x, y);

This is a JavaScript implementation of an Axis-Aligned Rectangle with extended features.

It is tailored for usage in 2D games that require a box management system, for handling things such as scrolling stages, hitboxes/hurtboxes, etc.

Features

• Hierarchy: add boxes inside boxes
• Horizontal and vertical flipping
• Translation along X or Y axis
• Global positioning based on all of the above

What about Rotation?

Axis-aligned objects do not rotate by design. This allows for much faster and easier collision algorithms.

See this wikipedia article for details on axis-aligned objects.

Properties

x and y

Set/get the pivot position of the box.

Change these properties to move the box around.

If a parent is defined, positioning will be relative to the parent.

width and height

Set/get the box dimensions. They will stretch evenly around the pivot.

globalX and globalY

These getters return the X and Y coordinates relative to the world.

They are populated after calling update().

translateX and translateY

Set these properties to define how far the box is moved along the X/Y axis, without changing its pivot.

Changing these properties affects the behavior of flipping mechanics. They are not intended to be used for moving the box (set x/y instead).

parent

Returns another box where this instance is contained into.

For setting a parent, refer to the add() method.

Methods

add(box)

Adds another box as a child instance.

update

Updates globalX and globalY properties, moving up the parent tree and handling parent positioning accordingly.

flipX/flipY

Flips the box horizontally or vertically. They do not act as a toggle.

Affects calculation of global coordinates when update is called.

unflipX/unflipY

Resets the horizontal/vertical orientation of the box.

collision(anotherBox)

Returns true if the box collides with anotherBox.

Automatically calls update on both boxes to fetch correct global coordinates.

Examples

var box1 = new AARectangle(1, 1,  0,   0);
var box2 = new AARectangle(1, 1, 10, -20);
var box3 = new AARectangle(1, 1, -2,   4);
box1.add(box2);
box1.update();
console.log(box1.globalX); // 0
console.log(box1.globalY); // 0
box2.update();
console.log(box2.globalX); // 10 (10+0)
console.log(box2.globalY); // -20 (-20+0)
box3.update();
console.log(box3.globalX); // 8 (-2+10+0)
console.log(box3.globalY); // -16 (4-20-0)

Installation

Install the package directly from GitHub (X.Y.Z == release tag):

npm i -S -E github:dimensionalpocket/aa-rectangle-js#X.Y.Z

License

MIT