Merge pull request #453 from miltoncandelero/spine-base-debug

Adding debug capabilities to every single spine!

README.md

@@ -117,9 +117,49 @@ let spine = new PIXI.heaven.Spine(spineData);
 
 ### Debug
 
-To show bones and bounds you can use [pixi-spine-debug](https://github.com/sbfkcel/pixi-spine-debug). If you want to write your own debug plugin, look at how this one [was created](https://github.com/pixijs/pixi-spine/issues/324)
+To show debug graphics you can set `yourSpine.debug = new SpineDebugRenderer()`  
 
-Demo: https://sbfkcel.github.io/pixi-spine-debug/
+Control what gets drawn with the following flags:
+
+```js
+// 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.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
 

packages/base/src/SpineBase.ts

@@ -23,6 +23,7 @@ import {Rectangle, Polygon, Transform} from '@pixi/math';
 import {hex2rgb, rgb2hex} from '@pixi/utils';
 import type {Texture} from '@pixi/core';
 import {settings} from "./settings";
+import { ISpineDebugRenderer } from './SpineDebugRenderer';
 
 let tempRgb = [0, 0, 0];
 
@@ -74,7 +75,6 @@ export abstract class SpineBase<Skeleton extends ISkeleton,
     AnimationState extends IAnimationState,
     AnimationStateData extends IAnimationStateData>
     extends Container implements GlobalMixins.Spine {
-
     tintRgb: ArrayLike<number>;
     spineData: SkeletonData;
     skeleton: Skeleton;
@@ -85,6 +85,19 @@ export abstract class SpineBase<Skeleton extends ISkeleton,
     localDelayLimit: number;
     private _autoUpdate: boolean;
     protected _visible: boolean;
+    private _debug: ISpineDebugRenderer;
+    public get debug(): ISpineDebugRenderer {
+        return this._debug;
+    }
+    public set debug(value: ISpineDebugRenderer) {
+        if (value == this._debug) { // soft equality allows null == undefined
+            return;
+        }
+        this._debug?.unregisterSpine(this);
+        value?.registerSpine(this);
+        this._debug = value;
+    }
+
 
     abstract createSkeleton(spineData: ISkeletonData);
 
@@ -266,7 +279,7 @@ export abstract class SpineBase<Skeleton extends ISkeleton,
             let region = (attachment as IRegionAttachment).region;
 
             let attColor = (attachment as any).color;
-            switch (attachment.type) {
+            switch (attachment != null && attachment.type) {
                 case AttachmentType.Region:
                     let transform = slotContainer.transform;
                     transform.setFromMatrix(slot.bone.matrix);
@@ -471,6 +484,9 @@ export abstract class SpineBase<Skeleton extends ISkeleton,
                 }
             }
         }
+
+        // if you can debug, then debug!
+        this._debug?.renderDebug(this);
     };
 
     private setSpriteRegion(attachment: IRegionAttachment, sprite: SpineSprite, region: TextureRegion) {
@@ -766,7 +782,10 @@ export abstract class SpineBase<Skeleton extends ISkeleton,
         return [list_d, list_n];
     };
 
+
     destroy(options?: any): void {
+        this.debug = null; // setter will do the cleanup
+
         for (let i = 0, n = this.skeleton.slots.length; i < n; i++) {
             let slot = this.skeleton.slots[i];
             for (let name in slot.meshes) {