UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-04 14:24:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts][webcomponents] followAttachmentAttach to followVisibility.

Browse Source
This commit is contained in:
Davide Tantillo 2025-05-20 16:11:47 +02:00
parent 2b5f3751ad
commit b588b95d76
3 changed files with 25 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
spine-ts/spine-webcomponents/example/tutorial.html
View File

@ -1423,7 +1423,7 @@ function toggleSpinner(element) {
<div class="split-left" style="width: 80%; box-sizing: border-box; min-height: 0;"> <div class="split-left" style="width: 80%; box-sizing: border-box; min-height: 0;">
It's very easy to display your different skins and animations. Simply create a table and use the <code>skin</code> and <code>animation</code> attributes. It's very easy to display your different skins and animations. Simply create a table and use the <code>skin</code> and <code>animation</code> attributes.
<br> <br>
<code>skin</code> 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. <code>skin</code> 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.
</div> </div>
<div class="skin-grid"> <div class="skin-grid">
@ -3276,7 +3276,7 @@ const darkPicker = document.getElementById("dark-picker");
<li><code>followOpacity</code>: the element opacity is connected to the slot alpha</li> <li><code>followOpacity</code>: the element opacity is connected to the slot alpha</li>
<li><code>followScale</code>: the element scale is connected to the slot scale</li> <li><code>followScale</code>: the element scale is connected to the slot scale</li>
<li><code>followRotation</code>: the element rotation is connected to the slot rotation</li> <li><code>followRotation</code>: the element rotation is connected to the slot rotation</li>
<li><code>followAttachmentAttach</code>: the element is shown/hidden depending if the slot contains an attachment or not</li> <li><code>followVisibility</code>: the element is shown/hidden depending if the slot contains an attachment or not</li>
<li><code>hideAttachment</code>: the slot attachment is hidden as if the element replaced the attachment</li> <li><code>hideAttachment</code>: the slot attachment is hidden as if the element replaced the attachment</li>
</ul> </ul>
</li> </li>
@ -3301,10 +3301,10 @@ const darkPicker = document.getElementById("dark-picker");
<script> <script>
(async () => { (async () => {
const widget = await spine.getSpineWidget("potty").whenReady; 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-color", document.getElementById("rain/rain-color"), { followVisibility: false, hideAttachment: true });
widget.followSlot("rain/rain-white", document.getElementById("rain/rain-white"), { followAttachmentAttach: 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"), { followAttachmentAttach: 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"), { followAttachmentAttach: false, hideAttachment: true }); widget.followSlot("rain/rain-green", document.getElementById("rain/rain-green"), { followVisibility: false, hideAttachment: true });
})(); })();
</script> </script>
@ -3328,10 +3328,10 @@ const darkPicker = document.getElementById("dark-picker");
(async () => { (async () => {
const widget = await spine.getSpineWidget("potty").whenReady; 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-color", document.getElementById("rain/rain-color"), { followVisibility: false, hideAttachment: true });
widget.followSlot("rain/rain-white", document.getElementById("rain/rain-white"), { followAttachmentAttach: 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"), { followAttachmentAttach: 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"), { followAttachmentAttach: false, hideAttachment: true }); widget.followSlot("rain/rain-green", document.getElementById("rain/rain-green"), { followVisibility: false, hideAttachment: true });
})();`);</script> })();`);</script>
</code></pre> </code></pre>
</div> </div>
@ -3375,10 +3375,10 @@ const darkPicker = document.getElementById("dark-picker");
<script> <script>
(async () => { (async () => {
const widget = await spine.getSpineWidget("potty2").whenReady; const widget = await spine.getSpineWidget("potty2").whenReady;
widget.followSlot("rain/rain-color", spine.getSpineWidget("potty2-1"), { 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"), { followAttachmentAttach: 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"), { followAttachmentAttach: 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"), { followAttachmentAttach: false, hideAttachment: true }); widget.followSlot("rain/rain-green", spine.getSpineWidget("potty2-4"), { followVisibility: false, hideAttachment: true });
})(); })();
</script> </script>
@ -3402,10 +3402,10 @@ const darkPicker = document.getElementById("dark-picker");
(async () => { (async () => {
const widget = await spine.getSpineWidget("potty2").whenReady; const widget = await spine.getSpineWidget("potty2").whenReady;
widget.followSlot("rain/rain-color", spine.getSpineWidget("potty2-1"), { 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"), { followAttachmentAttach: 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"), { followAttachmentAttach: 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"), { followAttachmentAttach: false, hideAttachment: true }); widget.followSlot("rain/rain-green", spine.getSpineWidget("potty2-4"), { followVisibility: false, hideAttachment: true });
})();`);</script> })();`);</script>
</code></pre> </code></pre>
</div> </div>

4
spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts
View File

@ -653,7 +653,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
if (widget.isOffScreenAndWasMoved() || !widget.skeleton) continue; if (widget.isOffScreenAndWasMoved() || !widget.skeleton) continue;
for (const boneFollower of widget.boneFollowerList) { 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; const { worldX, worldY } = widget;
this.worldToScreen(this.tempFollowBoneVector, bone.worldX + worldX, bone.worldY + worldY); this.worldToScreen(this.tempFollowBoneVector, bone.worldX + worldX, bone.worldY + worldY);
@ -674,7 +674,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
element.style.display = "" element.style.display = ""
if (followAttachmentAttach && !slot.attachment) { if (followVisibility && !slot.attachment) {
element.style.opacity = "0"; element.style.opacity = "0";
} else if (followOpacity) { } else if (followOpacity) {
element.style.opacity = `${slot.color.a}`; element.style.opacity = `${slot.color.a}`;

10
spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts
View File

@ -1016,7 +1016,7 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
skeleton?.setSkinByName(skin[0]); skeleton?.setSkinByName(skin[0]);
} else { } else {
const customSkin = new Skin("custom"); 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); skeleton?.setSkin(customSkin);
} }
@ -1231,10 +1231,10 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
* Other utilities * Other utilities
*/ */
public boneFollowerList: Array<{ slot: Slot, bone: Bone, element: HTMLElement, 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: { followAttachmentAttach?: 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 { const {
followAttachmentAttach = false, followVisibility = false,
followRotation = true, followRotation = true,
followOpacity = true, followOpacity = true,
followScale = true, followScale = true,
@ -1253,7 +1253,7 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
element.style.left = '0px'; element.style.left = '0px';
element.style.display = 'none'; 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); this.overlay.addSlotFollowerElement(element);
} }
public unfollowSlot (element: HTMLElement): HTMLElement | undefined { public unfollowSlot (element: HTMLElement): HTMLElement | undefined {