Skip to content

Align display objects relationally. Javascript library for Pixi and Phaser.

License

Notifications You must be signed in to change notification settings

genellann/Align

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

The Align library allows you to align display objects relative to one another

Calculate the x and y position of a child display object relative to the parent.

Relationships: center, left, right, top, or bottom

Get a calculation by passing in the display object or passing in numbers.

If you pass in the display objects, the x and/or y positions of the child will get set.

You have the option to add the child to the parent.

This library works with any javascript display objects that have these properties/methods: x, y, width, height, addChild. You can use it with frameworks like PIXI and Phaser.

Relations

Consts

Methods

alignX(parent, child, alignX = 0, padding = 0, addChild = false)
alignY(parent, child, alignY = 0, padding = 0, addChild = false)
alignXandY(parent, child, alignX = 0, alignY = 0, paddingX = 0, paddingY = 0, addChild = false)

Example

Example

How to determine whether to make the padding pos/neg when using CENTER align

Center Padding

The Calculations

CENTER
x = (parentWidth * 0.5) - (childWidth * 0.5) + padding;
y = (parentHeight * 0.5) - (childHeight * 0.5) + padding;
LEFT
x = padding;
TOP
y = padding;
RIGHT
if (parentWidth > childWidth) {
  x = parentWidth - childWidth - padding;
} else {
  x = -(childWidth - parentWidth) - padding;
}
BOTTOM
if (parentHeight > childHeight) {
  y = parentHeight - childHeight - padding;
} else {
  y = -(childHeight - parentHeight) - padding;
}

CODE

The functions in the Align library are static. This mean you do not need to instantiate the class. You can just call it like: LibraryName.functionName().

In your index.html, add a script tag to include the version of the align.min.js file that you want from the dist/ directory. You will be able to use the library within your code without needing to import it.

myFunc() {
    let parent = new Sprite();
    let child = new Sprite();

    Align.alignX(parent, child, Align.CENTER, 5, true);
}    

UNIT TESTS

The tests are here.

Please open an issue if you find any bugs. We will fix the issue and add a test for it.

JSDOCS

Please download or clone the repo and open /docs/index.html in a web browser

MY OTHER GITHUB PROJECTS

PhaserSignals - A library for Phaser. Add any listener to any signal. Dispatch any signal anywhere/anytime.

AssetLoader - A library for Phaser. Load assets externally from a json file.

More coming soon...

CREDITS

This project used the webpack-library-starter project

ABOUT ME

My name is Genell Radley. I am a game developer w/7yr professional experience writing games in Flash, Unity and HTML5. I believe in unit testing and documenting my code well. I am very excited to share my code here with you on GitHub. I hope you will contribute.

Please see my github profile and linkedin profile.

About

Align display objects relationally. Javascript library for Pixi and Phaser.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published