added docs for the new extendable debug thingy

README.md

@@ -117,37 +117,50 @@ let spine = new PIXI.heaven.Spine(spineData);
 
 ### Debug
 
-To show bones and bounds you can set `yourSpine.drawDebug = true`  
-Only after you set `drawDebug` to true, debug graphics are created.
+To show debug graphics you can set `yourSpine.debug = new SpineDebugRenderer()`  
 
 Control what gets drawn with the following flags:
 
 ```js
-yourSpine.drawMeshHull = true;
-yourSpine.drawMeshTriangles = true;
-yourSpine.drawBones = true;
-yourSpine.drawPaths = true;
-yourSpine.drawBoundingBoxes = true;
-yourSpine.drawClipping = true;
-yourSpine.drawRegionAttachments = true;
+// Master toggle
+yourSpine.debug.drawDebug = true; 
+
+// Per feature toggle
+yourSpine.debug.drawMeshHull = true;
+yourSpine.debug.drawMeshTriangles = true;
+yourSpine.debug.drawBones = true;
+yourSpine.debug.drawPaths = true;
+yourSpine.debug.drawBoundingBoxes = true;
+yourSpine.debug.drawClipping = true;
+yourSpine.debug.drawRegionAttachments = true;
 ```
 
 To have even more control, you can customize the color and line thickness with
 ```js
-yourSpine.debugOptions.lineWidth = 1;
-yourSpine.debugOptions.regionAttachmentsColor = 0x0078ff;
-yourSpine.debugOptions.meshHullColor = 0x0078ff;
-yourSpine.debugOptions.meshTrianglesColor = 0xffcc00;
-yourSpine.debugOptions.clippingPolygonColor = 0xff00ff;
-yourSpine.debugOptions.boundingBoxesRectColor = 0x00ff00;
-yourSpine.debugOptions.boundingBoxesPolygonColor = 0x00ff00;
-yourSpine.debugOptions.boundingBoxesCircleColor = 0x00ff00;
-yourSpine.debugOptions.pathsCurveColor = 0xff0000;
-yourSpine.debugOptions.pathsLineColor = 0xff00ff;
-yourSpine.debugOptions.skeletonXYColor = 0xff0000;
-yourSpine.debugOptions.bonesColor = 0x00eecc;
+yourSpine.debug.debugOptions.lineWidth = 1;
+yourSpine.debug.debugOptions.regionAttachmentsColor = 0x0078ff;
+yourSpine.debug.debugOptions.meshHullColor = 0x0078ff;
+yourSpine.debug.debugOptions.meshTrianglesColor = 0xffcc00;
+yourSpine.debug.debugOptions.clippingPolygonColor = 0xff00ff;
+yourSpine.debug.debugOptions.boundingBoxesRectColor = 0x00ff00;
+yourSpine.debug.debugOptions.boundingBoxesPolygonColor = 0x00ff00;
+yourSpine.debug.debugOptions.boundingBoxesCircleColor = 0x00ff00;
+yourSpine.debug.debugOptions.pathsCurveColor = 0xff0000;
+yourSpine.debug.debugOptions.pathsLineColor = 0xff00ff;
+yourSpine.debug.debugOptions.skeletonXYColor = 0xff0000;
+yourSpine.debug.debugOptions.bonesColor = 0x00eecc;
 ```
 
+You can reuse a single debug renderer and they will share the debug settings!
+```js
+const debugRenderer = new SpineDebugRenderer();
+
+oneSpine.debug = debugRenderer;
+anotherSpine.debug = debugRenderer;
+```
+
+If you want to create your own debugger you can extend `SpineDebugRenderer` or create a class from scratch that implements `ISpineDebugRenderer`!
+
 ## Build & Development
 
 You will need to have [node][node] setup on your machine.

packages/base/src/SpineDebugRenderer.ts

@@ -7,12 +7,23 @@ import { AttachmentType } from "./core/AttachmentType";
 import { SkeletonBoundsBase } from "./core/SkeletonBoundsBase";
 
 /**
+ * Make a class that extends from this interface to create your own debug renderer.
  * @public
  */
 export interface ISpineDebugRenderer {
+    /**
+     * This will be called every frame, after the spine has been updated. 
+     */
     renderDebug(spine:SpineBase< ISkeleton, ISkeletonData, IAnimationState, IAnimationStateData>):void;
 
+    /**
+     *  This is called when the `spine.debug` object is set to null or when the spine is destroyed.
+     */
     unregisterSpine(spine:SpineBase< ISkeleton, ISkeletonData, IAnimationState, IAnimationStateData>):void
+
+    /**
+     * This is called when the `spine.debug` object is set to a new instance of a debug renderer.
+     */
     registerSpine(spine:SpineBase< ISkeleton, ISkeletonData, IAnimationState, IAnimationStateData>):void
 }
 
@@ -32,6 +43,7 @@ type DebugDisplayObjects = {
 }
 
 /**
+ * This is a debug renderer that uses PixiJS Graphics under the hood.
  * @public
  */
 export class SpineDebugRenderer implements ISpineDebugRenderer {