Git Product home page Git Product logo

aa-rectangle-js's Introduction

@dimensionalpocket/aa-rectangle

build Total alerts Language grade: JavaScript

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

aa-rectangle-js's People

Contributors

henry-brisson avatar pauldps avatar pauloddr avatar renovate-bot avatar renovate[bot] avatar

Stargazers

 avatar

Watchers

 avatar

aa-rectangle-js's Issues

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (github>whitesource/merge-confidence:beta)

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions
.github/workflows/node.js.yml
  • dimensionalpocket/development-js 0.7.0
npm
package.json
  • @dimensionalpocket/development 0.7.0
  • @dimensionalpocket/release 0.3.3
  • performance-now 2.1.0
  • node >= 14.17.1

  • Check this box to trigger a request for Renovate to run again on this repository

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.