Skip to content

Commit

Permalink
README update
Browse files Browse the repository at this point in the history
  • Loading branch information
Paulo Procopiou committed Mar 12, 2017
1 parent e127669 commit 16d957b
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 133 deletions.
99 changes: 74 additions & 25 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,90 @@
# AARectangle - Axis-Aligned Rectangle
# AARectangle

[![Code Climate](https://lima.codeclimate.com/github/pauloddr/aa-rectangle-javascript/badges/gpa.svg)](https://lima.codeclimate.com/github/pauloddr/aa-rectangle-javascript)
[![Build Status](https://semaphoreci.com/api/v1/pauloddr/aa-rectangle-javascript/branches/master/shields_badge.svg)](https://semaphoreci.com/pauloddr/aa-rectangle-javascript)
[![Test Coverage](https://lima.codeclimate.com/github/pauloddr/aa-rectangle-javascript/badges/coverage.svg)](https://lima.codeclimate.com/github/pauloddr/aa-rectangle-javascript/coverage)
[![Code Climate](https://lima.codeclimate.com/github/pauloddr/aa-rectangle-javascript/badges/gpa.svg)](https://lima.codeclimate.com/github/pauloddr/aa-rectangle-javascript)
[![Issue Count](https://lima.codeclimate.com/github/pauloddr/aa-rectangle-javascript/badges/issue_count.svg)](https://lima.codeclimate.com/github/pauloddr/aa-rectangle-javascript)
[![Build Status](https://semaphoreci.com/api/v1/pauloddr/aa-rectangle-javascript/branches/master/shields_badge.svg)](https://semaphoreci.com/pauloddr/aa-rectangle-javascript)

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

This is a JavaScript implementation of a 2D Axis-Aligned Rectangle with the following additional features:
This is a JavaScript implementation of an [Axis-Aligned](https://en.wikipedia.org/wiki/Axis-aligned_object) 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.

* Hierarchy (add boxes inside boxes);
## Features

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

__This is a work in progress.__
### What about Rotation?

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

See this [wikipedia article](https://en.wikipedia.org/wiki/Axis-aligned_object) 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()`.

Attributes:
### `translateX` and `translateY`

* `width` - box width.
* `height` - box height.
* `x` - the X coordinate of the pivot, relative to the parent.
* `y` - the Y coordinate of the pivot, relative to the parent.
* `globalX` - the X coordinate of the pivot, relative to the world. Populated after calling `update`.
* `globalY` - the Y coordinate of the pivot, relative to the world. Populated after calling `update`.
* `translateX` - used to move the box along the X axis without changing its pivot.
* `translateY` - used to move the box along the Y axis without changing its pivot.
* `parent` - an instance of another box where this instance is contained inside.
Set these properties to define how far the box is moved along the X/Y axis, without changing its pivot.

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

* `update` - updates global coordinates.
* `add(box)` - adds another box as a child instance.
* `flipX` - flips this box horizontally.
* `flipY` - flips this box vertically.
* `unflipX` - unflips this box horizontally.
* `unflipY` - unflips this box vertically.
* `collides(box)` - returns `true` if this instance collides with the given box.
### `parent`

Examples:
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

```javascript
var box1 = new AARectangle(1, 1, 0, 0);
Expand All @@ -58,6 +102,11 @@ console.log(box3.globalX); // 8 (-2+10+0)
console.log(box3.globalY); // -16 (4-20-0)
```

## TODO/Wishlist

* Viewport methods to return the visible area of a box, when it's larger than its parent box, or is moved out of the bounds of the parent.
* Browserify support to allow component usage in browsers.

## License

MIT
2 changes: 1 addition & 1 deletion lib/aa-rectangle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ class AARectangle {
this.orientationY = 1;
}

collides (box) {
collision (box) {
this.update();
box.update();

Expand Down
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@
"devDependencies": {
"chai": "3.5.0",
"eslint": "3.17.1",
"eslint-config-google": "^0.7.1",
"mocha": "3.2.0",
"nyc": "10.1.2",
"performance-now": "2.1.0"
Expand Down
109 changes: 3 additions & 106 deletions test/aa-rectangle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,116 +38,14 @@ describe('AARectangle', function () {

});

// describe('#x1/y1', function () {

// it('is x/y less half of width/height', function () {
// let box = new AARectangle(8, 6, 0, 0);
// expect(box.x1).to.equal(-4);
// expect(box.y1).to.equal(-3);
// box.x = 2;
// box.y = -2;
// expect(box.x1).to.equal(-2);
// expect(box.y1).to.equal(-5);
// });

// it('accounts for translation', function () {
// let box = new AARectangle(8, 6, 0, 0);
// box.translateX = 2;
// box.translateY = -2;
// expect(box.x1).to.equal(-2);
// expect(box.y1).to.equal(-5);
// box.x = 2;
// box.y = -2;
// expect(box.x1).to.equal(0);
// expect(box.y1).to.equal(-7);
// });

// it('accounts for orientation', function () {
// let box = new AARectangle(8, 6, 0, 0);
// box.flipX();
// expect(box.x1).to.equal(-4);
// box.translateX = 2;
// expect(box.x1).to.equal(-6);
// box.x = 2;
// expect(box.x1).to.equal(-4);
// box.flipY();
// expect(box.y1).to.equal(-3);
// box.translateY = 2;
// expect(box.y1).to.equal(-5);
// box.y = -2;
// expect(box.y1).to.equal(-7);
// });

// });

// describe('#x2/y2', function () {

// it('is x/y plus half of width/height', function () {
// let box = new AARectangle(8, 6, 0, 0);
// expect(box.x2).to.equal(4);
// expect(box.y2).to.equal(3);
// box.x = 2;
// box.y = -2;
// expect(box.x2).to.equal(6);
// expect(box.y2).to.equal(1);
// });

// it('accounts for translation', function () {
// let box = new AARectangle(8, 6, 0, 0);
// box.translateX = 2;
// box.translateY = -2;
// expect(box.x2).to.equal(6);
// expect(box.y2).to.equal(1);
// box.x = 2;
// box.y = -2;
// expect(box.x2).to.equal(8);
// expect(box.y2).to.equal(-1);
// });

// it('accounts for orientation', function () {
// let box = new AARectangle(8, 6, 0, 0);
// box.flipX();
// expect(box.x2).to.equal(4);
// box.translateX = 2;
// expect(box.x2).to.equal(2);
// box.x = 2;
// expect(box.x2).to.equal(4);
// box.flipY();
// expect(box.y2).to.equal(3);
// box.translateY = 2;
// expect(box.y2).to.equal(1);
// box.y = -2;
// expect(box.y2).to.equal(-1);
// });

// });

describe('#width/height', function () {

it('transform negative values into zero', function () {
it('converts negative values to zero', function () {
let box = new AARectangle(-10, -20, 0, 0);
expect(box.width).to.equal(0);
expect(box.height).to.equal(0);
});

// it('is always equal to x2-x1/y2-y1', function () {
// let width = Math.floor(Math.random() * (10000 - 1) + 1);
// let height = Math.floor(Math.random() * (10000 - 1) + 1);
// let x = Math.floor(Math.random() * (50 - (-50)) + (-50));
// let y = Math.floor(Math.random() * (50 - (-50)) + (-50));
// let translateX = Math.floor(Math.random() * (50 - (-50)) + (-50));
// let translateY = Math.floor(Math.random() * (50 - (-50)) + (-50));
// var box = new AARectangle(width, height, x, y);
// box.translateX = translateX;
// box.translateY = translateY;
// expect(box.x2 - box.x1).to.equal(width);
// expect(box.y2 - box.y1).to.equal(height);
// box.flipX();
// expect(box.x2 - box.x1).to.equal(width);
// box.flipY();
// expect(box.y2 - box.y1).to.equal(height);
// });

});

describe('#update', function () {
Expand All @@ -163,16 +61,15 @@ describe('AARectangle', function () {
box4.add(box5);

it('runs fast!', function () {
this.retries(10);
this.retries(10); // allows engine to optimize
box2.flipX();
box3.flipY();
let time1, time2, i;
for (i = 0; i < 10; ++i) {
time1 = now();
box4.update();
time2 = now();
expect(time2 - time1).to.be.at.most(0.009); // ms
//console.log(time2 - time1);
expect(time2 - time1).to.be.at.most(0.009); // 9 nanoseconds
}
box2.unflipX();
box3.unflipY();
Expand Down

0 comments on commit 16d957b

Please sign in to comment.