diff --git a/README.md b/README.md index e660bca9..f2aaf7a1 100644 --- a/README.md +++ b/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 diff --git a/packages/base/src/SpineBase.ts b/packages/base/src/SpineBase.ts index de752564..f7e3041a 100644 --- a/packages/base/src/SpineBase.ts +++ b/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 extends Container implements GlobalMixins.Spine { - tintRgb: ArrayLike; spineData: SkeletonData; skeleton: Skeleton; @@ -85,6 +85,19 @@ export abstract class SpineBase):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 +} + +type DebugDisplayObjects = { + bones: Container; + skeletonXY: Graphics; + regionAttachmentsShape: Graphics; + meshTrianglesLine: Graphics; + meshHullLine: Graphics; + clippingPolygon: Graphics; + boundingBoxesRect: Graphics; + boundingBoxesCircle: Graphics; + boundingBoxesPolygon: Graphics; + pathsCurve: Graphics; + pathsLine: Graphics; + parentDebugContainer: Container; +} + +/** + * This is a debug renderer that uses PixiJS Graphics under the hood. + * @public + */ +export class SpineDebugRenderer implements ISpineDebugRenderer { + private registeredSpines:Map, DebugDisplayObjects> = new Map(); + + public drawDebug: boolean = true; + public drawMeshHull: boolean = true; + public drawMeshTriangles: boolean = true; + public drawBones: boolean = true; + public drawPaths: boolean = true; + public drawBoundingBoxes: boolean = true; + public drawClipping: boolean = true; + public drawRegionAttachments: boolean = true; + + public lineWidth: number = 1; + public regionAttachmentsColor: number = 0x0078ff; + public meshHullColor: number = 0x0078ff; + public meshTrianglesColor: number = 0xffcc00; + public clippingPolygonColor: number = 0xff00ff; + public boundingBoxesRectColor: number = 0x00ff00; + public boundingBoxesPolygonColor: number = 0x00ff00; + public boundingBoxesCircleColor: number = 0x00ff00; + public pathsCurveColor: number = 0xff0000; + public pathsLineColor: number = 0xff00ff; + public skeletonXYColor:number = 0xff0000; + public bonesColor:number = 0x00eecc; + + /** + * The debug is attached by force to each spine object. So we need to create it inside the spine when we get the first update + */ + public registerSpine(spine: SpineBase) { + if (this.registeredSpines.has(spine)) + { + console.warn("SpineDebugRenderer.registerSpine() - this spine is already registered!", spine); + } + const debugDisplayObjects = { + parentDebugContainer: new Container(), + bones: new Container(), + skeletonXY: new Graphics(), + regionAttachmentsShape: new Graphics(), + meshTrianglesLine: new Graphics(), + meshHullLine: new Graphics(), + clippingPolygon: new Graphics(), + boundingBoxesRect: new Graphics(), + boundingBoxesCircle: new Graphics(), + boundingBoxesPolygon: new Graphics(), + pathsCurve: new Graphics(), + pathsLine: new Graphics(), + }; + + debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.bones); + debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.skeletonXY); + debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.regionAttachmentsShape); + debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.meshTrianglesLine); + debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.meshHullLine); + debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.clippingPolygon); + debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.boundingBoxesRect); + debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.boundingBoxesCircle); + debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.boundingBoxesPolygon); + debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.pathsCurve); + debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.pathsLine); + + spine.addChild(debugDisplayObjects.parentDebugContainer); + + this.registeredSpines.set(spine, debugDisplayObjects); + } + public renderDebug(spine:SpineBase):void { + + if (!this.registeredSpines.has(spine)) { + // This should never happen. Spines are registered when you assign spine.debug + this.registerSpine(spine); + } + + const debugDisplayObjects = this.registeredSpines.get(spine); + + debugDisplayObjects.skeletonXY.clear(); + debugDisplayObjects.regionAttachmentsShape.clear(); + debugDisplayObjects.meshTrianglesLine.clear(); + debugDisplayObjects.meshHullLine.clear(); + debugDisplayObjects.clippingPolygon.clear(); + debugDisplayObjects.boundingBoxesRect.clear(); + debugDisplayObjects.boundingBoxesCircle.clear(); + debugDisplayObjects.boundingBoxesPolygon.clear(); + debugDisplayObjects.pathsCurve.clear(); + debugDisplayObjects.pathsLine.clear(); + + for (let len = debugDisplayObjects.bones.children.length; len > 0; len--) { + debugDisplayObjects.bones.children[len - 1].destroy({ children: true, texture: true, baseTexture: true }); + } + + const scale = spine.scale.x || spine.scale.y || 1; + const lineWidth = this.lineWidth / scale; + + if (this.drawBones) { + this.drawBonesFunc(spine, debugDisplayObjects, lineWidth, scale); + } + + if (this.drawPaths) { + this.drawPathsFunc(spine, debugDisplayObjects, lineWidth); + } + + if (this.drawBoundingBoxes) { + this.drawBoundingBoxesFunc(spine, debugDisplayObjects, lineWidth); + } + + if (this.drawClipping) { + this.drawClippingFunc(spine, debugDisplayObjects, lineWidth); + } + + if (this.drawMeshHull || this.drawMeshTriangles) { + this.drawMeshHullAndMeshTriangles(spine, debugDisplayObjects, lineWidth); + } + + if (this.drawRegionAttachments) { + this.drawRegionAttachmentsFunc(spine, debugDisplayObjects, lineWidth); + } + } + + private drawBonesFunc(spine:SpineBase, debugDisplayObjects: DebugDisplayObjects, lineWidth:number, scale:number): void { + const skeleton = spine.skeleton; + const skeletonX = skeleton.x; + const skeletonY = skeleton.y; + const bones = skeleton.bones; + + debugDisplayObjects.skeletonXY.lineStyle(lineWidth, this.skeletonXYColor, 1); + + for (let i = 0, len = bones.length; i < len; i++) { + const bone = bones[i], + boneLen = bone.data.length, + starX = skeletonX + bone.matrix.tx, + starY = skeletonY + bone.matrix.ty, + endX = skeletonX + boneLen * bone.matrix.a + bone.matrix.tx, + endY = skeletonY + boneLen * bone.matrix.b + bone.matrix.ty; + + if (bone.data.name === "root" || bone.data.parent === null) { + continue; + } + + // Triangle calculation formula + // area: A=sqrt((a+b+c)*(-a+b+c)*(a-b+c)*(a+b-c))/4 + // alpha: alpha=acos((pow(b, 2)+pow(c, 2)-pow(a, 2))/(2*b*c)) + // beta: beta=acos((pow(a, 2)+pow(c, 2)-pow(b, 2))/(2*a*c)) + // gamma: gamma=acos((pow(a, 2)+pow(b, 2)-pow(c, 2))/(2*a*b)) + + const w = Math.abs(starX - endX), + h = Math.abs(starY - endY), + // a = w, // side length a + a2 = Math.pow(w, 2), // square root of side length a + b = h, // side length b + b2 = Math.pow(h, 2), // square root of side length b + c = Math.sqrt(a2 + b2), // side length c + c2 = Math.pow(c, 2), // square root of side length c + rad = Math.PI / 180, + // A = Math.acos([a2 + c2 - b2] / [2 * a * c]) || 0, // Angle A + // C = Math.acos([a2 + b2 - c2] / [2 * a * b]) || 0, // C angle + B = Math.acos((c2 + b2 - a2) / (2 * b * c)) || 0; // angle of corner B + if (c === 0) { + continue; + } + + const gp = new Graphics(); + debugDisplayObjects.bones.addChild(gp); + + // draw bone + const refRation = c / 50 / scale; + gp.beginFill(this.bonesColor, 1); + gp.drawPolygon(0, 0, 0 - refRation, c - refRation * 3, 0, c - refRation, 0 + refRation, c - refRation * 3); + gp.endFill(); + gp.x = starX; + gp.y = starY; + gp.pivot.y = c; + + // Calculate bone rotation angle + let rotation = 0; + if (starX < endX && starY < endY) { + // bottom right + rotation = -B + 180 * rad; + } else if (starX > endX && starY < endY) { + // bottom left + rotation = 180 * rad + B; + } else if (starX > endX && starY > endY) { + // top left + rotation = -B; + } else if (starX < endX && starY > endY) { + // bottom left + rotation = B; + } else if (starY === endY && starX < endX) { + // To the right + rotation = 90 * rad; + } else if (starY === endY && starX > endX) { + // go left + rotation = -90 * rad; + } else if (starX === endX && starY < endY) { + // down + rotation = 180 * rad; + } else if (starX === endX && starY > endY) { + // up + rotation = 0; + } + gp.rotation = rotation; + + // Draw the starting rotation point of the bone + gp.lineStyle(lineWidth + refRation / 2.4, this.bonesColor, 1); + gp.beginFill(0x000000, 0.6); + gp.drawCircle(0, c, refRation * 1.2); + gp.endFill(); + } + + // Draw the skeleton starting point "X" form + const startDotSize = lineWidth * 3; + debugDisplayObjects.skeletonXY.moveTo(skeletonX - startDotSize, skeletonY - startDotSize); + debugDisplayObjects.skeletonXY.lineTo(skeletonX + startDotSize, skeletonY + startDotSize); + debugDisplayObjects.skeletonXY.moveTo(skeletonX + startDotSize, skeletonY - startDotSize); + debugDisplayObjects.skeletonXY.lineTo(skeletonX - startDotSize, skeletonY + startDotSize); + } + + private drawRegionAttachmentsFunc(spine:SpineBase, debugDisplayObjects: DebugDisplayObjects, lineWidth:number): void { + const skeleton = spine.skeleton; + const slots = skeleton.slots; + + debugDisplayObjects.regionAttachmentsShape.lineStyle(lineWidth, this.regionAttachmentsColor, 1); + + for (let i = 0, len = slots.length; i < len; i++) { + const slot = slots[i], + attachment = slot.getAttachment(); + if (attachment == null || attachment.type !== AttachmentType.Region) { + continue; + } + + const regionAttachment = attachment as IRegionAttachment & { + computeWorldVertices:(slot: unknown, worldVertices: unknown, offset: unknown, stride: unknown) => void, + updateOffset?:() => void, + }; + + const vertices = new Float32Array(8); + + + regionAttachment?.updateOffset(); // We don't need this on all versions + + regionAttachment.computeWorldVertices(slot, vertices, 0, 2); + debugDisplayObjects.regionAttachmentsShape.drawPolygon(Array.from(vertices.slice(0, 8))); + + } + } + + private drawMeshHullAndMeshTriangles(spine:SpineBase, debugDisplayObjects: DebugDisplayObjects, lineWidth:number): void { + const skeleton = spine.skeleton; + const slots = skeleton.slots; + + debugDisplayObjects.meshHullLine.lineStyle(lineWidth, this.meshHullColor, 1); + debugDisplayObjects.meshTrianglesLine.lineStyle(lineWidth, this.meshTrianglesColor, 1); + + for (let i = 0, len = slots.length; i < len; i++) { + const slot = slots[i]; + if (!slot.bone.active) { + continue; + } + const attachment = slot.getAttachment(); + if (attachment == null || attachment.type !== AttachmentType.Mesh) { + continue; + } + + const meshAttachment:IMeshAttachment = attachment as IMeshAttachment; + + const vertices = new Float32Array(meshAttachment.worldVerticesLength), + triangles = meshAttachment.triangles; + let hullLength = meshAttachment.hullLength; + meshAttachment.computeWorldVertices(slot, 0, meshAttachment.worldVerticesLength, vertices, 0, 2); + // draw the skinned mesh (triangle) + if (this.drawMeshTriangles) { + for (let i = 0, len = triangles.length; i < len; i += 3) { + const v1 = triangles[i] * 2, + v2 = triangles[i + 1] * 2, + v3 = triangles[i + 2] * 2; + debugDisplayObjects.meshTrianglesLine.moveTo(vertices[v1], vertices[v1 + 1]); + debugDisplayObjects.meshTrianglesLine.lineTo(vertices[v2], vertices[v2 + 1]); + debugDisplayObjects.meshTrianglesLine.lineTo(vertices[v3], vertices[v3 + 1]); + } + } + + // draw skin border + if (this.drawMeshHull && hullLength > 0) { + hullLength = (hullLength >> 1) * 2; + let lastX = vertices[hullLength - 2], + lastY = vertices[hullLength - 1]; + for (let i = 0, len = hullLength; i < len; i += 2) { + const x = vertices[i], + y = vertices[i + 1]; + debugDisplayObjects.meshHullLine.moveTo(x, y); + debugDisplayObjects.meshHullLine.lineTo(lastX, lastY); + lastX = x; + lastY = y; + } + } + } + } + + private drawClippingFunc(spine:SpineBase, debugDisplayObjects: DebugDisplayObjects, lineWidth:number): void { + const skeleton = spine.skeleton; + const slots = skeleton.slots; + + debugDisplayObjects.clippingPolygon.lineStyle(lineWidth, this.clippingPolygonColor, 1); + for (let i = 0, len = slots.length; i < len; i++) { + const slot = slots[i]; + if (!slot.bone.active) { + continue; + } + const attachment = slot.getAttachment(); + if (attachment == null || attachment.type !== AttachmentType.Clipping) { + continue; + } + + const clippingAttachment: IClippingAttachment = attachment as IClippingAttachment; + + const nn = clippingAttachment.worldVerticesLength, + world = new Float32Array(nn); + clippingAttachment.computeWorldVertices(slot, 0, nn, world, 0, 2); + debugDisplayObjects.clippingPolygon.drawPolygon(Array.from(world)); + } + } + + private drawBoundingBoxesFunc(spine:SpineBase, debugDisplayObjects: DebugDisplayObjects, lineWidth:number): void { + // draw the total outline of the bounding box + debugDisplayObjects.boundingBoxesRect.lineStyle(lineWidth, this.boundingBoxesRectColor, 5); + + const bounds = new SkeletonBoundsBase(); + bounds.update(spine.skeleton, true); + debugDisplayObjects.boundingBoxesRect.drawRect(bounds.minX, bounds.minY, bounds.getWidth(), bounds.getHeight()); + + const polygons = bounds.polygons, + drawPolygon = (polygonVertices: ArrayLike, _offset: unknown, count: number): void => { + debugDisplayObjects.boundingBoxesPolygon.lineStyle(lineWidth, this.boundingBoxesPolygonColor, 1); + debugDisplayObjects.boundingBoxesPolygon.beginFill(this.boundingBoxesPolygonColor, 0.1); + + if (count < 3) { + throw new Error("Polygon must contain at least 3 vertices"); + } + const paths = [], + dotSize = lineWidth * 2; + for (let i = 0, len = polygonVertices.length; i < len; i += 2) { + const x1 = polygonVertices[i], + y1 = polygonVertices[i + 1]; + + // draw the bounding box node + debugDisplayObjects.boundingBoxesCircle.lineStyle(0); + debugDisplayObjects.boundingBoxesCircle.beginFill(this.boundingBoxesCircleColor); + debugDisplayObjects.boundingBoxesCircle.drawCircle(x1, y1, dotSize); + debugDisplayObjects.boundingBoxesCircle.endFill(); + + paths.push(x1, y1); + } + + // draw the bounding box area + debugDisplayObjects.boundingBoxesPolygon.drawPolygon(paths); + debugDisplayObjects.boundingBoxesPolygon.endFill(); + }; + + for (let i = 0, len = polygons.length; i < len; i++) { + const polygon = polygons[i]; + drawPolygon(polygon, 0, polygon.length); + } + } + + private drawPathsFunc(spine:SpineBase, debugDisplayObjects: DebugDisplayObjects, lineWidth:number): void { + const skeleton = spine.skeleton; + const slots = skeleton.slots; + + debugDisplayObjects.pathsCurve.lineStyle(lineWidth, this.pathsCurveColor, 1); + debugDisplayObjects.pathsLine.lineStyle(lineWidth, this.pathsLineColor, 1); + + for (let i = 0, len = slots.length; i < len; i++) { + const slot = slots[i]; + if (!slot.bone.active) { + continue; + } + const attachment = slot.getAttachment(); + if (attachment == null || attachment.type !== AttachmentType.Path) { + continue + } + + const pathAttachment = attachment as IVertexAttachment & {closed:boolean}; + let nn = pathAttachment.worldVerticesLength; + const world = new Float32Array(nn); + pathAttachment.computeWorldVertices(slot, 0, nn, world, 0, 2); + let x1 = world[2], + y1 = world[3], + x2 = 0, + y2 = 0; + if (pathAttachment.closed) { + const cx1 = world[0], + cy1 = world[1], + cx2 = world[nn - 2], + cy2 = world[nn - 1]; + x2 = world[nn - 4]; + y2 = world[nn - 3]; + + // curve + debugDisplayObjects.pathsCurve.moveTo(x1, y1); + debugDisplayObjects.pathsCurve.bezierCurveTo(cx1, cy1, cx2, cy2, x2, y2); + + // handle + debugDisplayObjects.pathsLine.moveTo(x1, y1); + debugDisplayObjects.pathsLine.lineTo(cx1, cy1); + debugDisplayObjects.pathsLine.moveTo(x2, y2); + debugDisplayObjects.pathsLine.lineTo(cx2, cy2); + } + nn -= 4; + for (let ii = 4; ii < nn; ii += 6) { + const cx1 = world[ii], + cy1 = world[ii + 1], + cx2 = world[ii + 2], + cy2 = world[ii + 3]; + x2 = world[ii + 4]; + y2 = world[ii + 5]; + // curve + debugDisplayObjects.pathsCurve.moveTo(x1, y1); + debugDisplayObjects.pathsCurve.bezierCurveTo(cx1, cy1, cx2, cy2, x2, y2); + + // handle + debugDisplayObjects.pathsLine.moveTo(x1, y1); + debugDisplayObjects.pathsLine.lineTo(cx1, cy1); + debugDisplayObjects.pathsLine.moveTo(x2, y2); + debugDisplayObjects.pathsLine.lineTo(cx2, cy2); + x1 = x2; + y1 = y2; + } + } + } + + public unregisterSpine(spine:SpineBase):void{ + if (!this.registeredSpines.has(spine)) { + console.warn("SpineDebugRenderer.unregisterSpine() - spine is not registered, can't unregister!", spine); + } + const debugDisplayObjects = this.registeredSpines.get(spine); + debugDisplayObjects.parentDebugContainer.destroy({baseTexture:true, children:true, texture:true}); + this.registeredSpines.delete(spine); + } +} \ No newline at end of file diff --git a/packages/base/src/core/ISkeleton.ts b/packages/base/src/core/ISkeleton.ts index 15701dc6..a4f27087 100644 --- a/packages/base/src/core/ISkeleton.ts +++ b/packages/base/src/core/ISkeleton.ts @@ -24,8 +24,9 @@ import {BLEND_MODES} from '@pixi/constants'; * @public */ export interface IBone { - data: { name: string }; + data: IBoneData; matrix: Matrix; + active:boolean; } /** @@ -111,6 +112,7 @@ export interface IMeshAttachment extends IVertexAttachment { color: Color; regionUVs: Float32Array, triangles: number[], + hullLength:number, } /** @@ -183,6 +185,8 @@ export interface ISkeleton { + + /** The left edge of the axis aligned bounding box. */ + minX = 0; + + /** The bottom edge of the axis aligned bounding box. */ + minY = 0; + + /** The right edge of the axis aligned bounding box. */ + maxX = 0; + + /** The top edge of the axis aligned bounding box. */ + maxY = 0; + + /** The visible bounding boxes. */ + boundingBoxes = new Array(); + + /** The world vertices for the bounding box polygons. */ + polygons = new Array(); + + private polygonPool = new Pool(() => { + return Utils.newFloatArray(16); + }); + + /** Clears any previous polygons, finds all visible bounding box attachments, and computes the world vertices for each bounding + * box's polygon. + * @param updateAabb If true, the axis aligned bounding box containing all the polygons is computed. If false, the + * SkeletonBounds AABB methods will always return true. */ + update (skeleton: ISkeleton, updateAabb: boolean) { + if (!skeleton) throw new Error("skeleton cannot be null."); + let boundingBoxes = this.boundingBoxes; + let polygons = this.polygons; + let polygonPool = this.polygonPool; + let slots = skeleton.slots; + let slotCount = slots.length; + + boundingBoxes.length = 0; + polygonPool.freeAll(polygons); + polygons.length = 0; + + for (let i = 0; i < slotCount; i++) { + let slot = slots[i]; + if (!slot.bone.active) continue; + let attachment = slot.getAttachment(); + if (attachment != null && attachment.type === AttachmentType.BoundingBox) { + let boundingBox = attachment as BoundingBoxAttachment; + boundingBoxes.push(boundingBox); + + let polygon = polygonPool.obtain() as NumberArrayLike; + if (polygon.length != boundingBox.worldVerticesLength) { + polygon = Utils.newFloatArray(boundingBox.worldVerticesLength); + } + polygons.push(polygon); + boundingBox.computeWorldVertices(slot, 0, boundingBox.worldVerticesLength, polygon, 0, 2); + } + } + + if (updateAabb) { + this.aabbCompute(); + } else { + this.minX = Number.POSITIVE_INFINITY; + this.minY = Number.POSITIVE_INFINITY; + this.maxX = Number.NEGATIVE_INFINITY; + this.maxY = Number.NEGATIVE_INFINITY; + } + } + + aabbCompute () { + let minX = Number.POSITIVE_INFINITY, minY = Number.POSITIVE_INFINITY, maxX = Number.NEGATIVE_INFINITY, maxY = Number.NEGATIVE_INFINITY; + let polygons = this.polygons; + for (let i = 0, n = polygons.length; i < n; i++) { + let polygon = polygons[i]; + let vertices = polygon; + for (let ii = 0, nn = polygon.length; ii < nn; ii += 2) { + let x = vertices[ii]; + let y = vertices[ii + 1]; + minX = Math.min(minX, x); + minY = Math.min(minY, y); + maxX = Math.max(maxX, x); + maxY = Math.max(maxY, y); + } + } + this.minX = minX; + this.minY = minY; + this.maxX = maxX; + this.maxY = maxY; + } + + /** Returns true if the axis aligned bounding box contains the point. */ + aabbContainsPoint (x: number, y: number) { + return x >= this.minX && x <= this.maxX && y >= this.minY && y <= this.maxY; + } + + /** Returns true if the axis aligned bounding box intersects the line segment. */ + aabbIntersectsSegment (x1: number, y1: number, x2: number, y2: number) { + let minX = this.minX; + let minY = this.minY; + let maxX = this.maxX; + let maxY = this.maxY; + if ((x1 <= minX && x2 <= minX) || (y1 <= minY && y2 <= minY) || (x1 >= maxX && x2 >= maxX) || (y1 >= maxY && y2 >= maxY)) + return false; + let m = (y2 - y1) / (x2 - x1); + let y = m * (minX - x1) + y1; + if (y > minY && y < maxY) return true; + y = m * (maxX - x1) + y1; + if (y > minY && y < maxY) return true; + let x = (minY - y1) / m + x1; + if (x > minX && x < maxX) return true; + x = (maxY - y1) / m + x1; + if (x > minX && x < maxX) return true; + return false; + } + + /** Returns true if the axis aligned bounding box intersects the axis aligned bounding box of the specified bounds. */ + aabbIntersectsSkeleton (bounds: SkeletonBoundsBase) { + return this.minX < bounds.maxX && this.maxX > bounds.minX && this.minY < bounds.maxY && this.maxY > bounds.minY; + } + + /** Returns the first bounding box attachment that contains the point, or null. When doing many checks, it is usually more + * efficient to only call this method if {@link #aabbContainsPoint(float, float)} returns true. + * Cannot be done here because BoundingBoxAttachment is not a thing yet*/ + containsPoint (x: number, y: number): BoundingBoxAttachment | null { + let polygons = this.polygons; + for (let i = 0, n = polygons.length; i < n; i++) + if (this.containsPointPolygon(polygons[i], x, y)) return this.boundingBoxes[i]; + return null; + } + + /** Returns true if the polygon contains the point. */ + containsPointPolygon (polygon: NumberArrayLike, x: number, y: number) { + let vertices = polygon; + let nn = polygon.length; + + let prevIndex = nn - 2; + let inside = false; + for (let ii = 0; ii < nn; ii += 2) { + let vertexY = vertices[ii + 1]; + let prevY = vertices[prevIndex + 1]; + if ((vertexY < y && prevY >= y) || (prevY < y && vertexY >= y)) { + let vertexX = vertices[ii]; + if (vertexX + (y - vertexY) / (prevY - vertexY) * (vertices[prevIndex] - vertexX) < x) inside = !inside; + } + prevIndex = ii; + } + return inside; + } + + /** Returns the first bounding box attachment that contains any part of the line segment, or null. When doing many checks, it + * is usually more efficient to only call this method if {@link #aabbIntersectsSegment()} returns + * true. */ + intersectsSegment (x1: number, y1: number, x2: number, y2: number) { + let polygons = this.polygons; + for (let i = 0, n = polygons.length; i < n; i++) + if (this.intersectsSegmentPolygon(polygons[i], x1, y1, x2, y2)) return this.boundingBoxes[i]; + return null; + } + + /** Returns true if the polygon contains any part of the line segment. */ + intersectsSegmentPolygon (polygon: NumberArrayLike, x1: number, y1: number, x2: number, y2: number) { + let vertices = polygon; + let nn = polygon.length; + + let width12 = x1 - x2, height12 = y1 - y2; + let det1 = x1 * y2 - y1 * x2; + let x3 = vertices[nn - 2], y3 = vertices[nn - 1]; + for (let ii = 0; ii < nn; ii += 2) { + let x4 = vertices[ii], y4 = vertices[ii + 1]; + let det2 = x3 * y4 - y3 * x4; + let width34 = x3 - x4, height34 = y3 - y4; + let det3 = width12 * height34 - height12 * width34; + let x = (det1 * width34 - width12 * det2) / det3; + if (((x >= x3 && x <= x4) || (x >= x4 && x <= x3)) && ((x >= x1 && x <= x2) || (x >= x2 && x <= x1))) { + let y = (det1 * height34 - height12 * det2) / det3; + if (((y >= y3 && y <= y4) || (y >= y4 && y <= y3)) && ((y >= y1 && y <= y2) || (y >= y2 && y <= y1))) return true; + } + x3 = x4; + y3 = y4; + } + return false; + } + + /** Returns the polygon for the specified bounding box, or null. */ + getPolygon (boundingBox: BoundingBoxAttachment) { + if (!boundingBox) throw new Error("boundingBox cannot be null."); + let index = this.boundingBoxes.indexOf(boundingBox); + return index == -1 ? null : this.polygons[index]; + } + + /** The width of the axis aligned bounding box. */ + getWidth () { + return this.maxX - this.minX; + } + + /** The height of the axis aligned bounding box. */ + getHeight () { + return this.maxY - this.minY; + } +} diff --git a/packages/base/src/index.ts b/packages/base/src/index.ts index 38259601..a37aa6a8 100644 --- a/packages/base/src/index.ts +++ b/packages/base/src/index.ts @@ -7,6 +7,8 @@ export * from './core/ISkeleton'; export * from './core/TextureAtlas'; export * from './core/TextureRegion'; export * from './core/Utils'; +export * from './core/SkeletonBoundsBase'; export * from './settings'; export * from './SpineBase'; +export * from './SpineDebugRenderer'; diff --git a/packages/runtime-3.7/src/core/Bone.ts b/packages/runtime-3.7/src/core/Bone.ts index a1f74eeb..6685f9f5 100644 --- a/packages/runtime-3.7/src/core/Bone.ts +++ b/packages/runtime-3.7/src/core/Bone.ts @@ -51,6 +51,9 @@ export class Bone implements Updatable, IBone { this.setToSetupPose(); } + /** NOT USED IN 3.7. Needed for the debug graph code */ + active: boolean = true; + /** Same as {@link #updateWorldTransform()}. This method exists for Bone to implement {@link Updatable}. */ update() { this.updateWorldTransformWith(this.x, this.y, this.rotation, this.scaleX, this.scaleY, this.shearX, this.shearY); diff --git a/packages/runtime-3.7/src/core/SkeletonBounds.ts b/packages/runtime-3.7/src/core/SkeletonBounds.ts index 37a9562a..cce4ffe0 100644 --- a/packages/runtime-3.7/src/core/SkeletonBounds.ts +++ b/packages/runtime-3.7/src/core/SkeletonBounds.ts @@ -1,181 +1,8 @@ import {BoundingBoxAttachment} from "./attachments"; -import {Pool, Utils} from "@pixi-spine/base"; -import type {Skeleton} from "./Skeleton"; +import {SkeletonBoundsBase} from "@pixi-spine/base"; -/** +/** Collects each visible {@link BoundingBoxAttachment} and computes the world vertices for its polygon. The polygon vertices are + * provided along with convenience methods for doing hit detection. * @public - */ -export class SkeletonBounds { - minX = 0; minY = 0; maxX = 0; maxY = 0; - boundingBoxes = new Array(); - polygons = new Array>(); - private polygonPool = new Pool>(() => { - return Utils.newFloatArray(16); - }); - - update (skeleton: Skeleton, updateAabb: boolean) { - if (skeleton == null) throw new Error("skeleton cannot be null."); - let boundingBoxes = this.boundingBoxes; - let polygons = this.polygons; - let polygonPool = this.polygonPool; - let slots = skeleton.slots; - let slotCount = slots.length; - - boundingBoxes.length = 0; - polygonPool.freeAll(polygons); - polygons.length = 0; - - for (let i = 0; i < slotCount; i++) { - let slot = slots[i]; - let attachment = slot.getAttachment(); - if (attachment instanceof BoundingBoxAttachment) { - let boundingBox = attachment as BoundingBoxAttachment; - boundingBoxes.push(boundingBox); - - let polygon = polygonPool.obtain(); - if (polygon.length != boundingBox.worldVerticesLength) { - polygon = Utils.newFloatArray(boundingBox.worldVerticesLength); - } - polygons.push(polygon); - boundingBox.computeWorldVertices(slot, 0, boundingBox.worldVerticesLength, polygon, 0, 2); - } - } - - if (updateAabb) { - this.aabbCompute(); - } else { - this.minX = Number.POSITIVE_INFINITY; - this.minY = Number.POSITIVE_INFINITY; - this.maxX = Number.NEGATIVE_INFINITY; - this.maxY = Number.NEGATIVE_INFINITY; - } - } - - aabbCompute () { - let minX = Number.POSITIVE_INFINITY, minY = Number.POSITIVE_INFINITY, maxX = Number.NEGATIVE_INFINITY, maxY = Number.NEGATIVE_INFINITY; - let polygons = this.polygons; - for (let i = 0, n = polygons.length; i < n; i++) { - let polygon = polygons[i]; - let vertices = polygon; - for (let ii = 0, nn = polygon.length; ii < nn; ii += 2) { - let x = vertices[ii]; - let y = vertices[ii + 1]; - minX = Math.min(minX, x); - minY = Math.min(minY, y); - maxX = Math.max(maxX, x); - maxY = Math.max(maxY, y); - } - } - this.minX = minX; - this.minY = minY; - this.maxX = maxX; - this.maxY = maxY; - } - - /** Returns true if the axis aligned bounding box contains the point. */ - aabbContainsPoint (x: number, y: number) { - return x >= this.minX && x <= this.maxX && y >= this.minY && y <= this.maxY; - } - - /** Returns true if the axis aligned bounding box intersects the line segment. */ - aabbIntersectsSegment (x1: number, y1: number, x2: number, y2: number) { - let minX = this.minX; - let minY = this.minY; - let maxX = this.maxX; - let maxY = this.maxY; - if ((x1 <= minX && x2 <= minX) || (y1 <= minY && y2 <= minY) || (x1 >= maxX && x2 >= maxX) || (y1 >= maxY && y2 >= maxY)) - return false; - let m = (y2 - y1) / (x2 - x1); - let y = m * (minX - x1) + y1; - if (y > minY && y < maxY) return true; - y = m * (maxX - x1) + y1; - if (y > minY && y < maxY) return true; - let x = (minY - y1) / m + x1; - if (x > minX && x < maxX) return true; - x = (maxY - y1) / m + x1; - if (x > minX && x < maxX) return true; - return false; - } - - /** Returns true if the axis aligned bounding box intersects the axis aligned bounding box of the specified bounds. */ - aabbIntersectsSkeleton (bounds: SkeletonBounds) { - return this.minX < bounds.maxX && this.maxX > bounds.minX && this.minY < bounds.maxY && this.maxY > bounds.minY; - } - - /** Returns the first bounding box attachment that contains the point, or null. When doing many checks, it is usually more - * efficient to only call this method if {@link #aabbContainsPoint(float, float)} returns true. */ - containsPoint (x: number, y: number): BoundingBoxAttachment { - let polygons = this.polygons; - for (let i = 0, n = polygons.length; i < n; i++) - if (this.containsPointPolygon(polygons[i], x, y)) return this.boundingBoxes[i]; - return null; - } - - /** Returns true if the polygon contains the point. */ - containsPointPolygon (polygon: ArrayLike, x: number, y: number) { - let vertices = polygon; - let nn = polygon.length; - - let prevIndex = nn - 2; - let inside = false; - for (let ii = 0; ii < nn; ii += 2) { - let vertexY = vertices[ii + 1]; - let prevY = vertices[prevIndex + 1]; - if ((vertexY < y && prevY >= y) || (prevY < y && vertexY >= y)) { - let vertexX = vertices[ii]; - if (vertexX + (y - vertexY) / (prevY - vertexY) * (vertices[prevIndex] - vertexX) < x) inside = !inside; - } - prevIndex = ii; - } - return inside; - } - - /** Returns the first bounding box attachment that contains any part of the line segment, or null. When doing many checks, it - * is usually more efficient to only call this method if {@link #aabbIntersectsSegment(float, float, float, float)} returns - * true. */ - intersectsSegment (x1: number, y1: number, x2: number, y2: number) { - let polygons = this.polygons; - for (let i = 0, n = polygons.length; i < n; i++) - if (this.intersectsSegmentPolygon(polygons[i], x1, y1, x2, y2)) return this.boundingBoxes[i]; - return null; - } - - /** Returns true if the polygon contains any part of the line segment. */ - intersectsSegmentPolygon (polygon: ArrayLike, x1: number, y1: number, x2: number, y2: number) { - let vertices = polygon; - let nn = polygon.length; - - let width12 = x1 - x2, height12 = y1 - y2; - let det1 = x1 * y2 - y1 * x2; - let x3 = vertices[nn - 2], y3 = vertices[nn - 1]; - for (let ii = 0; ii < nn; ii += 2) { - let x4 = vertices[ii], y4 = vertices[ii + 1]; - let det2 = x3 * y4 - y3 * x4; - let width34 = x3 - x4, height34 = y3 - y4; - let det3 = width12 * height34 - height12 * width34; - let x = (det1 * width34 - width12 * det2) / det3; - if (((x >= x3 && x <= x4) || (x >= x4 && x <= x3)) && ((x >= x1 && x <= x2) || (x >= x2 && x <= x1))) { - let y = (det1 * height34 - height12 * det2) / det3; - if (((y >= y3 && y <= y4) || (y >= y4 && y <= y3)) && ((y >= y1 && y <= y2) || (y >= y2 && y <= y1))) return true; - } - x3 = x4; - y3 = y4; - } - return false; - } - - /** Returns the polygon for the specified bounding box, or null. */ - getPolygon (boundingBox: BoundingBoxAttachment) { - if (boundingBox == null) throw new Error("boundingBox cannot be null."); - let index = this.boundingBoxes.indexOf(boundingBox); - return index == -1 ? null : this.polygons[index]; - } - - getWidth () { - return this.maxX - this.minX; - } - - getHeight () { - return this.maxY - this.minY; - } -} + * */ + export class SkeletonBounds extends SkeletonBoundsBase{}; \ No newline at end of file diff --git a/packages/runtime-3.7/src/core/attachments/RegionAttachment.ts b/packages/runtime-3.7/src/core/attachments/RegionAttachment.ts index 311eb33c..eb836ed8 100644 --- a/packages/runtime-3.7/src/core/attachments/RegionAttachment.ts +++ b/packages/runtime-3.7/src/core/attachments/RegionAttachment.ts @@ -3,6 +3,7 @@ import {Attachment} from './Attachment'; import {AttachmentType, ArrayLike, Color, TextureRegion, Utils, IRegionAttachment} from "@pixi-spine/base"; import type {Bone} from '../Bone'; +import { Slot } from '../Slot'; /** * @public @@ -130,9 +131,9 @@ export class RegionAttachment extends Attachment implements IRegionAttachment { } } - computeWorldVertices(bone: Bone, worldVertices: ArrayLike, offset: number, stride: number) { + computeWorldVertices(bone: Bone | Slot, worldVertices: ArrayLike, offset: number, stride: number) { let vertexOffset = this.offset; - let mat = bone.matrix; + let mat = bone instanceof Slot? bone.bone.matrix : bone.matrix; let x = mat.tx, y = mat.ty; let a = mat.a, b = mat.c, c = mat.b, d = mat.d; let offsetX = 0, offsetY = 0; diff --git a/packages/runtime-3.8/src/core/SkeletonBounds.ts b/packages/runtime-3.8/src/core/SkeletonBounds.ts index a7795801..cce4ffe0 100644 --- a/packages/runtime-3.8/src/core/SkeletonBounds.ts +++ b/packages/runtime-3.8/src/core/SkeletonBounds.ts @@ -1,182 +1,8 @@ import {BoundingBoxAttachment} from "./attachments"; -import {Pool, Utils} from "@pixi-spine/base"; -import type {Skeleton} from "./Skeleton"; +import {SkeletonBoundsBase} from "@pixi-spine/base"; -/** +/** Collects each visible {@link BoundingBoxAttachment} and computes the world vertices for its polygon. The polygon vertices are + * provided along with convenience methods for doing hit detection. * @public - */ -export class SkeletonBounds { - minX = 0; minY = 0; maxX = 0; maxY = 0; - boundingBoxes = new Array(); - polygons = new Array>(); - private polygonPool = new Pool>(() => { - return Utils.newFloatArray(16); - }); - - update (skeleton: Skeleton, updateAabb: boolean) { - if (skeleton == null) throw new Error("skeleton cannot be null."); - let boundingBoxes = this.boundingBoxes; - let polygons = this.polygons; - let polygonPool = this.polygonPool; - let slots = skeleton.slots; - let slotCount = slots.length; - - boundingBoxes.length = 0; - polygonPool.freeAll(polygons); - polygons.length = 0; - - for (let i = 0; i < slotCount; i++) { - let slot = slots[i]; - if (!slot.bone.active) continue; - let attachment = slot.getAttachment(); - if (attachment instanceof BoundingBoxAttachment) { - let boundingBox = attachment as BoundingBoxAttachment; - boundingBoxes.push(boundingBox); - - let polygon = polygonPool.obtain(); - if (polygon.length != boundingBox.worldVerticesLength) { - polygon = Utils.newFloatArray(boundingBox.worldVerticesLength); - } - polygons.push(polygon); - boundingBox.computeWorldVertices(slot, 0, boundingBox.worldVerticesLength, polygon, 0, 2); - } - } - - if (updateAabb) { - this.aabbCompute(); - } else { - this.minX = Number.POSITIVE_INFINITY; - this.minY = Number.POSITIVE_INFINITY; - this.maxX = Number.NEGATIVE_INFINITY; - this.maxY = Number.NEGATIVE_INFINITY; - } - } - - aabbCompute () { - let minX = Number.POSITIVE_INFINITY, minY = Number.POSITIVE_INFINITY, maxX = Number.NEGATIVE_INFINITY, maxY = Number.NEGATIVE_INFINITY; - let polygons = this.polygons; - for (let i = 0, n = polygons.length; i < n; i++) { - let polygon = polygons[i]; - let vertices = polygon; - for (let ii = 0, nn = polygon.length; ii < nn; ii += 2) { - let x = vertices[ii]; - let y = vertices[ii + 1]; - minX = Math.min(minX, x); - minY = Math.min(minY, y); - maxX = Math.max(maxX, x); - maxY = Math.max(maxY, y); - } - } - this.minX = minX; - this.minY = minY; - this.maxX = maxX; - this.maxY = maxY; - } - - /** Returns true if the axis aligned bounding box contains the point. */ - aabbContainsPoint (x: number, y: number) { - return x >= this.minX && x <= this.maxX && y >= this.minY && y <= this.maxY; - } - - /** Returns true if the axis aligned bounding box intersects the line segment. */ - aabbIntersectsSegment (x1: number, y1: number, x2: number, y2: number) { - let minX = this.minX; - let minY = this.minY; - let maxX = this.maxX; - let maxY = this.maxY; - if ((x1 <= minX && x2 <= minX) || (y1 <= minY && y2 <= minY) || (x1 >= maxX && x2 >= maxX) || (y1 >= maxY && y2 >= maxY)) - return false; - let m = (y2 - y1) / (x2 - x1); - let y = m * (minX - x1) + y1; - if (y > minY && y < maxY) return true; - y = m * (maxX - x1) + y1; - if (y > minY && y < maxY) return true; - let x = (minY - y1) / m + x1; - if (x > minX && x < maxX) return true; - x = (maxY - y1) / m + x1; - if (x > minX && x < maxX) return true; - return false; - } - - /** Returns true if the axis aligned bounding box intersects the axis aligned bounding box of the specified bounds. */ - aabbIntersectsSkeleton (bounds: SkeletonBounds) { - return this.minX < bounds.maxX && this.maxX > bounds.minX && this.minY < bounds.maxY && this.maxY > bounds.minY; - } - - /** Returns the first bounding box attachment that contains the point, or null. When doing many checks, it is usually more - * efficient to only call this method if {@link #aabbContainsPoint(float, float)} returns true. */ - containsPoint (x: number, y: number): BoundingBoxAttachment { - let polygons = this.polygons; - for (let i = 0, n = polygons.length; i < n; i++) - if (this.containsPointPolygon(polygons[i], x, y)) return this.boundingBoxes[i]; - return null; - } - - /** Returns true if the polygon contains the point. */ - containsPointPolygon (polygon: ArrayLike, x: number, y: number) { - let vertices = polygon; - let nn = polygon.length; - - let prevIndex = nn - 2; - let inside = false; - for (let ii = 0; ii < nn; ii += 2) { - let vertexY = vertices[ii + 1]; - let prevY = vertices[prevIndex + 1]; - if ((vertexY < y && prevY >= y) || (prevY < y && vertexY >= y)) { - let vertexX = vertices[ii]; - if (vertexX + (y - vertexY) / (prevY - vertexY) * (vertices[prevIndex] - vertexX) < x) inside = !inside; - } - prevIndex = ii; - } - return inside; - } - - /** Returns the first bounding box attachment that contains any part of the line segment, or null. When doing many checks, it - * is usually more efficient to only call this method if {@link #aabbIntersectsSegment(float, float, float, float)} returns - * true. */ - intersectsSegment (x1: number, y1: number, x2: number, y2: number) { - let polygons = this.polygons; - for (let i = 0, n = polygons.length; i < n; i++) - if (this.intersectsSegmentPolygon(polygons[i], x1, y1, x2, y2)) return this.boundingBoxes[i]; - return null; - } - - /** Returns true if the polygon contains any part of the line segment. */ - intersectsSegmentPolygon (polygon: ArrayLike, x1: number, y1: number, x2: number, y2: number) { - let vertices = polygon; - let nn = polygon.length; - - let width12 = x1 - x2, height12 = y1 - y2; - let det1 = x1 * y2 - y1 * x2; - let x3 = vertices[nn - 2], y3 = vertices[nn - 1]; - for (let ii = 0; ii < nn; ii += 2) { - let x4 = vertices[ii], y4 = vertices[ii + 1]; - let det2 = x3 * y4 - y3 * x4; - let width34 = x3 - x4, height34 = y3 - y4; - let det3 = width12 * height34 - height12 * width34; - let x = (det1 * width34 - width12 * det2) / det3; - if (((x >= x3 && x <= x4) || (x >= x4 && x <= x3)) && ((x >= x1 && x <= x2) || (x >= x2 && x <= x1))) { - let y = (det1 * height34 - height12 * det2) / det3; - if (((y >= y3 && y <= y4) || (y >= y4 && y <= y3)) && ((y >= y1 && y <= y2) || (y >= y2 && y <= y1))) return true; - } - x3 = x4; - y3 = y4; - } - return false; - } - - /** Returns the polygon for the specified bounding box, or null. */ - getPolygon (boundingBox: BoundingBoxAttachment) { - if (boundingBox == null) throw new Error("boundingBox cannot be null."); - let index = this.boundingBoxes.indexOf(boundingBox); - return index == -1 ? null : this.polygons[index]; - } - - getWidth () { - return this.maxX - this.minX; - } - - getHeight () { - return this.maxY - this.minY; - } -} + * */ + export class SkeletonBounds extends SkeletonBoundsBase{}; \ No newline at end of file diff --git a/packages/runtime-3.8/src/core/attachments/RegionAttachment.ts b/packages/runtime-3.8/src/core/attachments/RegionAttachment.ts index 8fb06e2a..3ac45218 100644 --- a/packages/runtime-3.8/src/core/attachments/RegionAttachment.ts +++ b/packages/runtime-3.8/src/core/attachments/RegionAttachment.ts @@ -2,6 +2,7 @@ import {Attachment} from './Attachment'; import {AttachmentType, ArrayLike, Color, TextureRegion, Utils, IRegionAttachment} from "@pixi-spine/base"; import type {Bone} from '../Bone'; +import { Slot } from '../Slot'; /** * @public @@ -129,9 +130,9 @@ export class RegionAttachment extends Attachment implements IRegionAttachment { } } - computeWorldVertices(bone: Bone, worldVertices: ArrayLike, offset: number, stride: number) { + computeWorldVertices(bone: Bone | Slot, worldVertices: ArrayLike, offset: number, stride: number) { let vertexOffset = this.offset; - let mat = bone.matrix; + let mat = bone instanceof Slot? bone.bone.matrix : bone.matrix; let x = mat.tx, y = mat.ty; let a = mat.a, b = mat.c, c = mat.b, d = mat.d; let offsetX = 0, offsetY = 0; diff --git a/packages/runtime-4.0/src/core/SkeletonBounds.ts b/packages/runtime-4.0/src/core/SkeletonBounds.ts index abf034cf..cce4ffe0 100644 --- a/packages/runtime-4.0/src/core/SkeletonBounds.ts +++ b/packages/runtime-4.0/src/core/SkeletonBounds.ts @@ -1,205 +1,8 @@ import {BoundingBoxAttachment} from "./attachments"; -import {Pool, Utils} from "@pixi-spine/base"; -import type {Skeleton} from "./Skeleton"; +import {SkeletonBoundsBase} from "@pixi-spine/base"; /** Collects each visible {@link BoundingBoxAttachment} and computes the world vertices for its polygon. The polygon vertices are * provided along with convenience methods for doing hit detection. * @public * */ -export class SkeletonBounds { - - /** The left edge of the axis aligned bounding box. */ - minX = 0; - - /** The bottom edge of the axis aligned bounding box. */ - minY = 0; - - /** The right edge of the axis aligned bounding box. */ - maxX = 0; - - /** The top edge of the axis aligned bounding box. */ - maxY = 0; - - /** The visible bounding boxes. */ - boundingBoxes = new Array(); - - /** The world vertices for the bounding box polygons. */ - polygons = new Array>(); - - private polygonPool = new Pool>(() => { - return Utils.newFloatArray(16); - }); - - /** Clears any previous polygons, finds all visible bounding box attachments, and computes the world vertices for each bounding - * box's polygon. - * @param updateAabb If true, the axis aligned bounding box containing all the polygons is computed. If false, the - * SkeletonBounds AABB methods will always return true. */ - update (skeleton: Skeleton, updateAabb: boolean) { - if (skeleton == null) throw new Error("skeleton cannot be null."); - let boundingBoxes = this.boundingBoxes; - let polygons = this.polygons; - let polygonPool = this.polygonPool; - let slots = skeleton.slots; - let slotCount = slots.length; - - boundingBoxes.length = 0; - polygonPool.freeAll(polygons); - polygons.length = 0; - - for (let i = 0; i < slotCount; i++) { - let slot = slots[i]; - if (!slot.bone.active) continue; - let attachment = slot.getAttachment(); - if (attachment instanceof BoundingBoxAttachment) { - let boundingBox = attachment as BoundingBoxAttachment; - boundingBoxes.push(boundingBox); - - let polygon = polygonPool.obtain(); - if (polygon.length != boundingBox.worldVerticesLength) { - polygon = Utils.newFloatArray(boundingBox.worldVerticesLength); - } - polygons.push(polygon); - boundingBox.computeWorldVertices(slot, 0, boundingBox.worldVerticesLength, polygon, 0, 2); - } - } - - if (updateAabb) { - this.aabbCompute(); - } else { - this.minX = Number.POSITIVE_INFINITY; - this.minY = Number.POSITIVE_INFINITY; - this.maxX = Number.NEGATIVE_INFINITY; - this.maxY = Number.NEGATIVE_INFINITY; - } - } - - aabbCompute () { - let minX = Number.POSITIVE_INFINITY, minY = Number.POSITIVE_INFINITY, maxX = Number.NEGATIVE_INFINITY, maxY = Number.NEGATIVE_INFINITY; - let polygons = this.polygons; - for (let i = 0, n = polygons.length; i < n; i++) { - let polygon = polygons[i]; - let vertices = polygon; - for (let ii = 0, nn = polygon.length; ii < nn; ii += 2) { - let x = vertices[ii]; - let y = vertices[ii + 1]; - minX = Math.min(minX, x); - minY = Math.min(minY, y); - maxX = Math.max(maxX, x); - maxY = Math.max(maxY, y); - } - } - this.minX = minX; - this.minY = minY; - this.maxX = maxX; - this.maxY = maxY; - } - - /** Returns true if the axis aligned bounding box contains the point. */ - aabbContainsPoint (x: number, y: number) { - return x >= this.minX && x <= this.maxX && y >= this.minY && y <= this.maxY; - } - - /** Returns true if the axis aligned bounding box intersects the line segment. */ - aabbIntersectsSegment (x1: number, y1: number, x2: number, y2: number) { - let minX = this.minX; - let minY = this.minY; - let maxX = this.maxX; - let maxY = this.maxY; - if ((x1 <= minX && x2 <= minX) || (y1 <= minY && y2 <= minY) || (x1 >= maxX && x2 >= maxX) || (y1 >= maxY && y2 >= maxY)) - return false; - let m = (y2 - y1) / (x2 - x1); - let y = m * (minX - x1) + y1; - if (y > minY && y < maxY) return true; - y = m * (maxX - x1) + y1; - if (y > minY && y < maxY) return true; - let x = (minY - y1) / m + x1; - if (x > minX && x < maxX) return true; - x = (maxY - y1) / m + x1; - if (x > minX && x < maxX) return true; - return false; - } - - /** Returns true if the axis aligned bounding box intersects the axis aligned bounding box of the specified bounds. */ - aabbIntersectsSkeleton (bounds: SkeletonBounds) { - return this.minX < bounds.maxX && this.maxX > bounds.minX && this.minY < bounds.maxY && this.maxY > bounds.minY; - } - - /** Returns the first bounding box attachment that contains the point, or null. When doing many checks, it is usually more - * efficient to only call this method if {@link #aabbContainsPoint(float, float)} returns true. */ - containsPoint (x: number, y: number): BoundingBoxAttachment { - let polygons = this.polygons; - for (let i = 0, n = polygons.length; i < n; i++) - if (this.containsPointPolygon(polygons[i], x, y)) return this.boundingBoxes[i]; - return null; - } - - /** Returns true if the polygon contains the point. */ - containsPointPolygon (polygon: ArrayLike, x: number, y: number) { - let vertices = polygon; - let nn = polygon.length; - - let prevIndex = nn - 2; - let inside = false; - for (let ii = 0; ii < nn; ii += 2) { - let vertexY = vertices[ii + 1]; - let prevY = vertices[prevIndex + 1]; - if ((vertexY < y && prevY >= y) || (prevY < y && vertexY >= y)) { - let vertexX = vertices[ii]; - if (vertexX + (y - vertexY) / (prevY - vertexY) * (vertices[prevIndex] - vertexX) < x) inside = !inside; - } - prevIndex = ii; - } - return inside; - } - - /** Returns the first bounding box attachment that contains any part of the line segment, or null. When doing many checks, it - * is usually more efficient to only call this method if {@link #aabbIntersectsSegment()} returns - * true. */ - intersectsSegment (x1: number, y1: number, x2: number, y2: number) { - let polygons = this.polygons; - for (let i = 0, n = polygons.length; i < n; i++) - if (this.intersectsSegmentPolygon(polygons[i], x1, y1, x2, y2)) return this.boundingBoxes[i]; - return null; - } - - /** Returns true if the polygon contains any part of the line segment. */ - intersectsSegmentPolygon (polygon: ArrayLike, x1: number, y1: number, x2: number, y2: number) { - let vertices = polygon; - let nn = polygon.length; - - let width12 = x1 - x2, height12 = y1 - y2; - let det1 = x1 * y2 - y1 * x2; - let x3 = vertices[nn - 2], y3 = vertices[nn - 1]; - for (let ii = 0; ii < nn; ii += 2) { - let x4 = vertices[ii], y4 = vertices[ii + 1]; - let det2 = x3 * y4 - y3 * x4; - let width34 = x3 - x4, height34 = y3 - y4; - let det3 = width12 * height34 - height12 * width34; - let x = (det1 * width34 - width12 * det2) / det3; - if (((x >= x3 && x <= x4) || (x >= x4 && x <= x3)) && ((x >= x1 && x <= x2) || (x >= x2 && x <= x1))) { - let y = (det1 * height34 - height12 * det2) / det3; - if (((y >= y3 && y <= y4) || (y >= y4 && y <= y3)) && ((y >= y1 && y <= y2) || (y >= y2 && y <= y1))) return true; - } - x3 = x4; - y3 = y4; - } - return false; - } - - /** Returns the polygon for the specified bounding box, or null. */ - getPolygon (boundingBox: BoundingBoxAttachment) { - if (boundingBox == null) throw new Error("boundingBox cannot be null."); - let index = this.boundingBoxes.indexOf(boundingBox); - return index == -1 ? null : this.polygons[index]; - } - - /** The width of the axis aligned bounding box. */ - getWidth () { - return this.maxX - this.minX; - } - - /** The height of the axis aligned bounding box. */ - getHeight () { - return this.maxY - this.minY; - } -} + export class SkeletonBounds extends SkeletonBoundsBase{}; \ No newline at end of file diff --git a/packages/runtime-4.0/src/core/attachments/RegionAttachment.ts b/packages/runtime-4.0/src/core/attachments/RegionAttachment.ts index 3e99c2c3..2a1795f7 100644 --- a/packages/runtime-4.0/src/core/attachments/RegionAttachment.ts +++ b/packages/runtime-4.0/src/core/attachments/RegionAttachment.ts @@ -2,6 +2,7 @@ import {Attachment} from './Attachment'; import {AttachmentType, ArrayLike, Color, TextureRegion, Utils, IRegionAttachment} from "@pixi-spine/base"; import type {Bone} from '../Bone'; +import { Slot } from '../Slot'; /** * @public @@ -159,9 +160,9 @@ export class RegionAttachment extends Attachment implements IRegionAttachment { * @param worldVertices The output world vertices. Must have a length >= `offset` + 8. * @param offset The `worldVertices` index to begin writing values. * @param stride The number of `worldVertices` entries between the value pairs written. */ - computeWorldVertices (bone: Bone, worldVertices: ArrayLike, offset: number, stride: number) { + computeWorldVertices (bone: Bone | Slot, worldVertices: ArrayLike, offset: number, stride: number) { let vertexOffset = this.offset; - let mat = bone.matrix; + let mat = bone instanceof Slot? bone.bone.matrix : bone.matrix; let x = mat.tx, y = mat.ty; let a = mat.a, b = mat.c, c = mat.b, d = mat.d; let offsetX = 0, offsetY = 0; diff --git a/packages/runtime-4.1/src/core/SkeletonBounds.ts b/packages/runtime-4.1/src/core/SkeletonBounds.ts index 734d9916..5eaea674 100644 --- a/packages/runtime-4.1/src/core/SkeletonBounds.ts +++ b/packages/runtime-4.1/src/core/SkeletonBounds.ts @@ -1,205 +1,8 @@ import {BoundingBoxAttachment} from "./attachments"; -import {Pool, Utils, NumberArrayLike} from "@pixi-spine/base"; -import type {Skeleton} from "./Skeleton"; +import {SkeletonBoundsBase} from "@pixi-spine/base"; /** Collects each visible {@link BoundingBoxAttachment} and computes the world vertices for its polygon. The polygon vertices are * provided along with convenience methods for doing hit detection. * @public * */ -export class SkeletonBounds { - - /** The left edge of the axis aligned bounding box. */ - minX = 0; - - /** The bottom edge of the axis aligned bounding box. */ - minY = 0; - - /** The right edge of the axis aligned bounding box. */ - maxX = 0; - - /** The top edge of the axis aligned bounding box. */ - maxY = 0; - - /** The visible bounding boxes. */ - boundingBoxes = new Array(); - - /** The world vertices for the bounding box polygons. */ - polygons = new Array(); - - private polygonPool = new Pool(() => { - return Utils.newFloatArray(16); - }); - - /** Clears any previous polygons, finds all visible bounding box attachments, and computes the world vertices for each bounding - * box's polygon. - * @param updateAabb If true, the axis aligned bounding box containing all the polygons is computed. If false, the - * SkeletonBounds AABB methods will always return true. */ - update (skeleton: Skeleton, updateAabb: boolean) { - if (!skeleton) throw new Error("skeleton cannot be null."); - let boundingBoxes = this.boundingBoxes; - let polygons = this.polygons; - let polygonPool = this.polygonPool; - let slots = skeleton.slots; - let slotCount = slots.length; - - boundingBoxes.length = 0; - polygonPool.freeAll(polygons); - polygons.length = 0; - - for (let i = 0; i < slotCount; i++) { - let slot = slots[i]; - if (!slot.bone.active) continue; - let attachment = slot.getAttachment(); - if (attachment instanceof BoundingBoxAttachment) { - let boundingBox = attachment as BoundingBoxAttachment; - boundingBoxes.push(boundingBox); - - let polygon = polygonPool.obtain(); - if (polygon.length != boundingBox.worldVerticesLength) { - polygon = Utils.newFloatArray(boundingBox.worldVerticesLength); - } - polygons.push(polygon); - boundingBox.computeWorldVertices(slot, 0, boundingBox.worldVerticesLength, polygon, 0, 2); - } - } - - if (updateAabb) { - this.aabbCompute(); - } else { - this.minX = Number.POSITIVE_INFINITY; - this.minY = Number.POSITIVE_INFINITY; - this.maxX = Number.NEGATIVE_INFINITY; - this.maxY = Number.NEGATIVE_INFINITY; - } - } - - aabbCompute () { - let minX = Number.POSITIVE_INFINITY, minY = Number.POSITIVE_INFINITY, maxX = Number.NEGATIVE_INFINITY, maxY = Number.NEGATIVE_INFINITY; - let polygons = this.polygons; - for (let i = 0, n = polygons.length; i < n; i++) { - let polygon = polygons[i]; - let vertices = polygon; - for (let ii = 0, nn = polygon.length; ii < nn; ii += 2) { - let x = vertices[ii]; - let y = vertices[ii + 1]; - minX = Math.min(minX, x); - minY = Math.min(minY, y); - maxX = Math.max(maxX, x); - maxY = Math.max(maxY, y); - } - } - this.minX = minX; - this.minY = minY; - this.maxX = maxX; - this.maxY = maxY; - } - - /** Returns true if the axis aligned bounding box contains the point. */ - aabbContainsPoint (x: number, y: number) { - return x >= this.minX && x <= this.maxX && y >= this.minY && y <= this.maxY; - } - - /** Returns true if the axis aligned bounding box intersects the line segment. */ - aabbIntersectsSegment (x1: number, y1: number, x2: number, y2: number) { - let minX = this.minX; - let minY = this.minY; - let maxX = this.maxX; - let maxY = this.maxY; - if ((x1 <= minX && x2 <= minX) || (y1 <= minY && y2 <= minY) || (x1 >= maxX && x2 >= maxX) || (y1 >= maxY && y2 >= maxY)) - return false; - let m = (y2 - y1) / (x2 - x1); - let y = m * (minX - x1) + y1; - if (y > minY && y < maxY) return true; - y = m * (maxX - x1) + y1; - if (y > minY && y < maxY) return true; - let x = (minY - y1) / m + x1; - if (x > minX && x < maxX) return true; - x = (maxY - y1) / m + x1; - if (x > minX && x < maxX) return true; - return false; - } - - /** Returns true if the axis aligned bounding box intersects the axis aligned bounding box of the specified bounds. */ - aabbIntersectsSkeleton (bounds: SkeletonBounds) { - return this.minX < bounds.maxX && this.maxX > bounds.minX && this.minY < bounds.maxY && this.maxY > bounds.minY; - } - - /** Returns the first bounding box attachment that contains the point, or null. When doing many checks, it is usually more - * efficient to only call this method if {@link #aabbContainsPoint(float, float)} returns true. */ - containsPoint (x: number, y: number): BoundingBoxAttachment | null { - let polygons = this.polygons; - for (let i = 0, n = polygons.length; i < n; i++) - if (this.containsPointPolygon(polygons[i], x, y)) return this.boundingBoxes[i]; - return null; - } - - /** Returns true if the polygon contains the point. */ - containsPointPolygon (polygon: NumberArrayLike, x: number, y: number) { - let vertices = polygon; - let nn = polygon.length; - - let prevIndex = nn - 2; - let inside = false; - for (let ii = 0; ii < nn; ii += 2) { - let vertexY = vertices[ii + 1]; - let prevY = vertices[prevIndex + 1]; - if ((vertexY < y && prevY >= y) || (prevY < y && vertexY >= y)) { - let vertexX = vertices[ii]; - if (vertexX + (y - vertexY) / (prevY - vertexY) * (vertices[prevIndex] - vertexX) < x) inside = !inside; - } - prevIndex = ii; - } - return inside; - } - - /** Returns the first bounding box attachment that contains any part of the line segment, or null. When doing many checks, it - * is usually more efficient to only call this method if {@link #aabbIntersectsSegment()} returns - * true. */ - intersectsSegment (x1: number, y1: number, x2: number, y2: number) { - let polygons = this.polygons; - for (let i = 0, n = polygons.length; i < n; i++) - if (this.intersectsSegmentPolygon(polygons[i], x1, y1, x2, y2)) return this.boundingBoxes[i]; - return null; - } - - /** Returns true if the polygon contains any part of the line segment. */ - intersectsSegmentPolygon (polygon: NumberArrayLike, x1: number, y1: number, x2: number, y2: number) { - let vertices = polygon; - let nn = polygon.length; - - let width12 = x1 - x2, height12 = y1 - y2; - let det1 = x1 * y2 - y1 * x2; - let x3 = vertices[nn - 2], y3 = vertices[nn - 1]; - for (let ii = 0; ii < nn; ii += 2) { - let x4 = vertices[ii], y4 = vertices[ii + 1]; - let det2 = x3 * y4 - y3 * x4; - let width34 = x3 - x4, height34 = y3 - y4; - let det3 = width12 * height34 - height12 * width34; - let x = (det1 * width34 - width12 * det2) / det3; - if (((x >= x3 && x <= x4) || (x >= x4 && x <= x3)) && ((x >= x1 && x <= x2) || (x >= x2 && x <= x1))) { - let y = (det1 * height34 - height12 * det2) / det3; - if (((y >= y3 && y <= y4) || (y >= y4 && y <= y3)) && ((y >= y1 && y <= y2) || (y >= y2 && y <= y1))) return true; - } - x3 = x4; - y3 = y4; - } - return false; - } - - /** Returns the polygon for the specified bounding box, or null. */ - getPolygon (boundingBox: BoundingBoxAttachment) { - if (!boundingBox) throw new Error("boundingBox cannot be null."); - let index = this.boundingBoxes.indexOf(boundingBox); - return index == -1 ? null : this.polygons[index]; - } - - /** The width of the axis aligned bounding box. */ - getWidth () { - return this.maxX - this.minX; - } - - /** The height of the axis aligned bounding box. */ - getHeight () { - return this.maxY - this.minY; - } -} +export class SkeletonBounds extends SkeletonBoundsBase{}; \ No newline at end of file