Pixi-overlap NPM

pixi-overlap

This project is an easy way of getting if sprites are overlapping

How to use this project
Project Template
How to use overlap tools
NPM
Video

How to use this project

Firstval you have to clone this project and open in a code editor of your choice, make sure you have node js installed.

Install

Open your terminal at the root project folder and type: npm install

this command will make sure all dependences will be installed).

Start

After all dependence is in the right place, let's start the project by typing: npm start

this project uses babel + webpack to initialize the application.

By default the project will run at http://localhost:8080/, it can change if you already running an application on port 8080.

Project template

This project uses a template that can be found here its includes all the documentation and how to use the template

How to use overlap tools

To check if pixi sprite is overlapping any other pixi sprite just call

AddOverLap( param1, param2 ); param1 = PIXI.Sprite() param2 = Callback() - returns a boolean and a PIXI.Sprite()

import { AddOverlap } from  "../scripts/pixi-overlaping"; // this path is relative to this project

let image = new PIXI.Sprite.fromImage('url');

AddOverlap(image, (isOverlapping, overlapImage)=> {
    if (isOverlapping) {
	    overlapImage.tint  =  0x000000;
    } else {
	    overlapImage.tint  =  0xffffff;
    }
  });

NOTE: the overlap will just check with images that has being added to the lint by using AddOverlap(image)

// you can also add an object to the list just calling the method with out the seconds paramenter (callback)

AddOverlap(image)

NPM

Yes, you can use it as a module

import { AddOverlap } from "pixi-overlap/pixi-overlap"

let image = new PIXI.Sprite.fromImage('url');

 AddOverlap(image, (isOverlapping, overlapImage)=> {
    if (isOverlapping) {
	    overlapImage.tint  =  0x000000;
    } else {
	    overlapImage.tint  =  0xffffff;
    }
 });