diff --git a/spine-ts/spine-pixi-v7/src/Spine.ts b/spine-ts/spine-pixi-v7/src/Spine.ts index 7c95f3979..74cc81a10 100644 --- a/spine-ts/spine-pixi-v7/src/Spine.ts +++ b/spine-ts/spine-pixi-v7/src/Spine.ts @@ -326,7 +326,7 @@ export class Spine extends Container { } } - private slotsObject = new Map(); + public slotsObject = new Map(); private getSlotFromRef (slotRef: number | string | Slot): Slot { let slot: Slot | null; if (typeof slotRef === 'number') slot = this.skeleton.slots[slotRef]; @@ -349,13 +349,13 @@ export class Spine extends Container { * @param slotRef - The slot index, or the slot name, or the Slot where the pixi object will be added to. * @param pixiObject - The pixi Container to add. */ - addSlotObject (slotRef: number | string | Slot, pixiObject: Container): void { + addSlotObject (slotRef: number | string | Slot, pixiObject: Container, options?: { followAttachmentTimeline?: boolean }): void { let slot = this.getSlotFromRef(slotRef); - let oldPixiObject = this.slotsObject.get(slot); - if (oldPixiObject === pixiObject) return; + const oldPixiObject = this.slotsObject.get(slot)?.container; + if (oldPixiObject && oldPixiObject === pixiObject) return; // search if the pixiObject was already in another slotObject - for (const [otherSlot, oldPixiObjectAnotherSlot] of this.slotsObject) { + for (const [otherSlot, { container: oldPixiObjectAnotherSlot }] of this.slotsObject) { if (otherSlot !== slot && oldPixiObjectAnotherSlot === pixiObject) { this.removeSlotObject(otherSlot, pixiObject); break; @@ -364,7 +364,10 @@ export class Spine extends Container { if (oldPixiObject) this.removeChild(oldPixiObject); - this.slotsObject.set(slot, pixiObject); + this.slotsObject.set(slot, { + container: pixiObject, + followAttachmentTimeline: options?.followAttachmentTimeline || false, + }); this.addChild(pixiObject); } /** @@ -374,8 +377,10 @@ export class Spine extends Container { * @returns a Container if any, undefined otherwise. */ getSlotObject (slotRef: number | string | Slot): Container | undefined { - return this.slotsObject.get(this.getSlotFromRef(slotRef)); + const element = this.slotsObject.get(this.getSlotFromRef(slotRef)); + return element ? element.container : undefined; } + /** * Remove a slot object from the given slot. * If `pixiObject` is passed and attached to the given slot, remove it from the slot. @@ -385,7 +390,7 @@ export class Spine extends Container { */ removeSlotObject (slotRef: number | string | Slot, pixiObject?: Container): void { let slot = this.getSlotFromRef(slotRef); - let slotObject = this.slotsObject.get(slot); + let slotObject = this.slotsObject.get(slot)?.container; if (!slotObject) return; // if pixiObject is passed, remove only if it is equal to the given one @@ -404,13 +409,22 @@ export class Spine extends Container { mask.destroy(); } } - private updatePixiObject (pixiObject: Container, slot: Slot, zIndex: number) { - pixiObject.position.set(slot.bone.worldX, slot.bone.worldY); - pixiObject.scale.set(slot.bone.getWorldScaleX(), slot.bone.getWorldScaleY()); - pixiObject.rotation = slot.bone.getWorldRotationX() * MathUtils.degRad; - pixiObject.zIndex = zIndex + 1; - pixiObject.alpha = this.skeleton.color.a * slot.color.a; + + private updateSlotObject (element: { container: Container, followAttachmentTimeline: boolean }, slot: Slot, zIndex: number) { + const { container: slotObject, followAttachmentTimeline } = element + + const followAttachmentValue = followAttachmentTimeline ? Boolean(slot.attachment) : true; + slotObject.visible = this.skeleton.drawOrder.includes(slot) && followAttachmentValue; + + if (slotObject.visible) { + slotObject.position.set(slot.bone.worldX, slot.bone.worldY); + slotObject.scale.set(slot.bone.getWorldScaleX(), slot.bone.getWorldScaleY()); + slotObject.rotation = slot.bone.getWorldRotationX() * MathUtils.degRad; + slotObject.zIndex = zIndex + 1; + slotObject.alpha = this.skeleton.color.a * slot.color.a; + } } + private updateAndSetPixiMask (pixiMaskSource: PixiMaskSource | null, pixiObject: Container) { if (Spine.clipper.isClipping() && pixiMaskSource) { let mask = this.clippingSlotToPixiMasks[pixiMaskSource.slot.data.name] as Graphics; @@ -464,9 +478,9 @@ export class Spine extends Container { let pixiObject = this.slotsObject.get(slot); let zIndex = i + slotObjectsCounter; if (pixiObject) { - this.updatePixiObject(pixiObject, slot, zIndex + 1); + this.updateSlotObject(pixiObject, slot, zIndex + 1); slotObjectsCounter++; - this.updateAndSetPixiMask(pixiMaskSource, pixiObject); + this.updateAndSetPixiMask(pixiMaskSource, pixiObject.container); } const useDarkColor = slot.darkColor != null;