The aim of this repo is to add a couple of useful functions to all display objects that will show their bounding box using a PIXI graphic. By default, it shows a 1px red rectangle around whatever object calls the utility function. Custom coloring and thickness is supported.
To include this in your project, you can just add the src/bounding.js file to your main page. Alternatively, if you're using Node or something similar, you can copy/paste the code directly into your project when needed.
You can use these function right in your JavaScript as such:
let weirdObjectWithWeirderPoisitioning = new PIXI.Sprite.from('./unscrupulousContent.png');
let container = new PIXI.Container();
container.addChild(weirdObjectWithWeirderPoisitioning);
container.showBoundingBox();
//reposition the object and redo the bounding box
weirdObjectWithWeirderPoisitioning.position.x += 20;
container.hideBoundingBox(); //not necessary as showBoundingBox will call this function before creating a new box
container.showBoundingBox(0x00ff00, 4); //fancy colors supportedAlternatively, these were written with the debug console in mind for showing bounds after an object is rendered.
- Write a Node JS version of this (currently don't use PIXI inside of Node directly, so not high on the priority list)
- Write a function that will animate a bounding box (ran into some weird issues with my first pass at that, so PRs very welcome)
- Make this work without the assumed global PIXI namepace