How to display drawDebug

[sbfkcel]

Cannot find drawRegionAttachments, drawClipping, drawBones, drawMeshHull, drawMeshTriangles options

Is this series of options not available in pixi-spine?

[ivanpopelyshev]

Nope, you are free to make PR to introduce them :) Just fill up a Graphics element with stuff. If they exist in original spine-ts, you can copy part of code from here: https://github.com/EsotericSoftware/spine-runtimes/tree/3.8/spine-ts

[sbfkcel]

It is recommended to add, or in the form of plugin.

[ivanpopelyshev]

Whatever will be easy for you. Here's stub for drawMesh: https://codesandbox.io/s/laughing-robinson-oowcm

Also, good idea is to call redraw on every update(), you can hack it easily from outside:

const oldUpdate = Spine.prototype.update;
Spine.prototype.update = function( dt) { oldUpdate.call(this, dt); this.updateMyDebugGraphics(); }
Spine.prototype.updateMyDebugGraphics = function() { ... }

Its not that I cant write it on my own, its just I prefer for people to do main part of work when I'm playing support.

[sbfkcel]

👍🏻Thank you.

[sbfkcel]

I had to reopen the theme. I find a lot of data is not available. For example: bone.a, bone.c

[ivanpopelyshev]

In pixi-spine implementation all matrix data is in bone.matrix. Also, b and c are swapped because Spine is only software that uses

a b tx
c d ty

everyone else, and pixi too use

a c tx
b d ty

so compared to spine sources, our b and c are swapped.

[sbfkcel]

Ok i try to write a debug plugin

If you have any questions, please ask

[sbfkcel]

On which object is vertices?

The computeWorldVertices method is slightly different from the original spine.

[ivanpopelyshev]

Vertices array is created when we create PIXI.SimpleMesh: https://github.com/pixijs/pixi-spine/blob/master/src/Spine.ts#L564

That's how we update them: https://github.com/pixijs/pixi-spine/blob/master/src/Spine.ts#L359

I have utterior motive - the way you're going, we'll have one more specialist on pixi-spine. If other Chinese users ask for questions, I'll mention you ;)

[ivanpopelyshev]

Yes, it doesn't because we really don't need it, all computations are done in PIXI.Sprite: https://github.com/pixijs/pixi-spine/blob/master/src/Spine.ts#L468 . Local spine coords aren't calculated , but global ones are inside currentSprite.vertexData, they only appear there after currentSprite.calculateVertices() which is called inside sprite render method.

I don't know what to recommend there :( You can manually call that computeWorldVertices and give temp array that you copy and pass to graphics drawPolygon.

[sbfkcel]

oh,So easy

[ivanpopelyshev]

If computeWorldVertices doesnt produce result you need, it ma be because right now we use PIXI.Texture fields instead of region, so it can be a problem. I commented out updateRegion or region.updateUvs() or something like that, i dont remember :)

[sbfkcel]

The current result is indeed not a region

Float32Array(8) [-28.063657760620117, -212.8229522705078, -28.063657760620117, -212.8229522705078, -28.063657760620117, -212.8229522705078, -28.063657760620117, -212.8229522705078]

[ivanpopelyshev]

here it is:

https://github.com/pixijs/pixi-spine/blob/1f06f5c91554aeb336e1df6553af4c82dea9449e/src/core/SkeletonJson.ts#L339

You can call updateOffset() on that region before you call computeWorldVertices.

[sbfkcel]

Has been written

https://github.com/sbfkcel/pixi-spine-debug

[ivanpopelyshev]

Ok, added to https://github.com/pixijs/pixi.js/wiki/v5-Resources temporarily. I will think how to integrate this in main pixi-spine package.

Its good, we can now reference your plugin for people who need debug right now.
Now that it actually works, we can think about architecture-related things.

Usually I don't add N new fields, I just make a component, like spineObj.debug = mySpineDebug and call it from update:

let debug = new SpineDebug();
debug .drawDebug = true;
debug .drawBones = true;

...

spine1.debug = debug;
spine2.debug = debug;

and spine object calls it:

if (this.debug) {
    this.debug.update(this);
}

That way it'll be possible to share that component across many spine objects.
I'm not asking you to change the plugin right now, lets discuss it. What do you think about my approach?

[ivanpopelyshev]

If you make a screenshot how it looks, I can add it to https://github.com/pixijs/pixi-spine/blob/master/README.md#debug

[sbfkcel]

Good proposal.
However, I think it is necessary to separate multiple fields.

• Enabling all edge drawing information will be too much, which is not good for debugging
• In most cases, only some spine elements can enable some edge information.
• However, it is a good choice to perform hierarchical debugging

let debug1 = new SpineDebug({
     draw:['bones','paths,...],
     list:[spine1,spine2,...]
});
debug1.add(spine5)；
debug1.run();

[ivanpopelyshev]

Oh, yes, that's a good one :) Just don't implement it yet, i'll think about it more. No reason to rewrite good stuff before we have at least few users.

[sbfkcel]

update demo

https://sbfkcel.github.io/pixi-spine-debug/

[jonlepage]

nice jobs guys this look very awesome for debug.
I think it missing a draw events names.