diff --git a/spine-ts/spine-webcomponents/example/tutorial.html b/spine-ts/spine-webcomponents/example/tutorial.html index 35f76edc4..90a3449d0 100644 --- a/spine-ts/spine-webcomponents/example/tutorial.html +++ b/spine-ts/spine-webcomponents/example/tutorial.html @@ -1423,7 +1423,7 @@ function toggleSpinner(element) {
It's very easy to display your different skins and animations. Simply create a table and use the skin and animation attributes.
- skin accepts an comma separated list of skin names. The skins will be combined in a new one, from the first to the last. If multiple skins set the same slot, the latest in the list will be used. + skin accepts a comma separated list of skin names. The skins will be combined in a new one, from the first to the last. If multiple skins set the same slot, the latest in the list will be used.
@@ -3276,7 +3276,7 @@ const darkPicker = document.getElementById("dark-picker");
  • followOpacity: the element opacity is connected to the slot alpha
  • followScale: the element scale is connected to the slot scale
  • followRotation: the element rotation is connected to the slot rotation
    • -
  • followAttachmentAttach: the element is shown/hidden depending if the slot contains an attachment or not
    • +
  • followVisibility: the element is shown/hidden depending if the slot contains an attachment or not
  • hideAttachment: the slot attachment is hidden as if the element replaced the attachment
    • @@ -3301,10 +3301,10 @@ const darkPicker = document.getElementById("dark-picker"); @@ -3328,10 +3328,10 @@ const darkPicker = document.getElementById("dark-picker"); (async () => { const widget = await spine.getSpineWidget("potty").whenReady; - widget.followSlot("rain/rain-color", document.getElementById("rain/rain-color"), { followAttachmentAttach: false, hideAttachment: true }); - widget.followSlot("rain/rain-white", document.getElementById("rain/rain-white"), { followAttachmentAttach: false, hideAttachment: true }); - widget.followSlot("rain/rain-blue", document.getElementById("rain/rain-blue"), { followAttachmentAttach: false, hideAttachment: true }); - widget.followSlot("rain/rain-green", document.getElementById("rain/rain-green"), { followAttachmentAttach: false, hideAttachment: true }); + widget.followSlot("rain/rain-color", document.getElementById("rain/rain-color"), { followVisibility: false, hideAttachment: true }); + widget.followSlot("rain/rain-white", document.getElementById("rain/rain-white"), { followVisibility: false, hideAttachment: true }); + widget.followSlot("rain/rain-blue", document.getElementById("rain/rain-blue"), { followVisibility: false, hideAttachment: true }); + widget.followSlot("rain/rain-green", document.getElementById("rain/rain-green"), { followVisibility: false, hideAttachment: true }); })();`);
    @@ -3375,10 +3375,10 @@ const darkPicker = document.getElementById("dark-picker"); @@ -3402,10 +3402,10 @@ const darkPicker = document.getElementById("dark-picker"); (async () => { const widget = await spine.getSpineWidget("potty2").whenReady; - widget.followSlot("rain/rain-color", spine.getSpineWidget("potty2-1"), { followAttachmentAttach: false, hideAttachment: true }); - widget.followSlot("rain/rain-white", spine.getSpineWidget("potty2-2"), { followAttachmentAttach: false, hideAttachment: true }); - widget.followSlot("rain/rain-blue", spine.getSpineWidget("potty2-3"), { followAttachmentAttach: false, hideAttachment: true }); - widget.followSlot("rain/rain-green", spine.getSpineWidget("potty2-4"), { followAttachmentAttach: false, hideAttachment: true }); + widget.followSlot("rain/rain-color", spine.getSpineWidget("potty2-1"), { followVisibility: false, hideAttachment: true }); + widget.followSlot("rain/rain-white", spine.getSpineWidget("potty2-2"), { followVisibility: false, hideAttachment: true }); + widget.followSlot("rain/rain-blue", spine.getSpineWidget("potty2-3"), { followVisibility: false, hideAttachment: true }); + widget.followSlot("rain/rain-green", spine.getSpineWidget("potty2-4"), { followVisibility: false, hideAttachment: true }); })();`); diff --git a/spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts b/spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts index 3fb7b38eb..8ef026d50 100644 --- a/spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts +++ b/spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts @@ -653,7 +653,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr if (widget.isOffScreenAndWasMoved() || !widget.skeleton) continue; for (const boneFollower of widget.boneFollowerList) { - const { slot, bone, element, followAttachmentAttach, followRotation, followOpacity, followScale } = boneFollower; + const { slot, bone, element, followVisibility, followRotation, followOpacity, followScale } = boneFollower; const { worldX, worldY } = widget; this.worldToScreen(this.tempFollowBoneVector, bone.worldX + worldX, bone.worldY + worldY); @@ -674,7 +674,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr element.style.display = "" - if (followAttachmentAttach && !slot.attachment) { + if (followVisibility && !slot.attachment) { element.style.opacity = "0"; } else if (followOpacity) { element.style.opacity = `${slot.color.a}`; diff --git a/spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts b/spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts index 7d41a35c8..e4dcab519 100644 --- a/spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts +++ b/spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts @@ -1016,7 +1016,7 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable skeleton?.setSkinByName(skin[0]); } else { const customSkin = new Skin("custom"); - for (const s of skin) customSkin.addSkin(skeleton?.data.findSkin(s) as Skin); + for (const s of skin) customSkin.addSkin(skeleton?.data.findSkin(s) as Skin); skeleton?.setSkin(customSkin); } @@ -1231,10 +1231,10 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable * Other utilities */ - public boneFollowerList: Array<{ slot: Slot, bone: Bone, element: HTMLElement, followAttachmentAttach: boolean, followRotation: boolean, followOpacity: boolean, followScale: boolean, hideAttachment: boolean }> = []; - public followSlot (slotName: string | Slot, element: HTMLElement, options: { followAttachmentAttach?: boolean, followRotation?: boolean, followOpacity?: boolean, followScale?: boolean, hideAttachment?: boolean } = {}) { + public boneFollowerList: Array<{ slot: Slot, bone: Bone, element: HTMLElement, followVisibility: boolean, followRotation: boolean, followOpacity: boolean, followScale: boolean, hideAttachment: boolean }> = []; + public followSlot (slotName: string | Slot, element: HTMLElement, options: { followVisibility?: boolean, followRotation?: boolean, followOpacity?: boolean, followScale?: boolean, hideAttachment?: boolean } = {}) { const { - followAttachmentAttach = false, + followVisibility = false, followRotation = true, followOpacity = true, followScale = true, @@ -1253,7 +1253,7 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable element.style.left = '0px'; element.style.display = 'none'; - this.boneFollowerList.push({ slot, bone: slot.bone, element, followAttachmentAttach, followRotation, followOpacity, followScale, hideAttachment }); + this.boneFollowerList.push({ slot, bone: slot.bone, element, followVisibility, followRotation, followOpacity, followScale, hideAttachment }); this.overlay.addSlotFollowerElement(element); } public unfollowSlot (element: HTMLElement): HTMLElement | undefined {