UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-20 09:16:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts][webcomponents] Fix onScreenAtLeastOnce not set if widget laods off screen.

Browse Source
This commit is contained in:
Davide Tantillo 2025-05-14 12:41:52 +02:00
parent 680fa631d6
commit a799d02ece
3 changed files with 22 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2043,19 +2043,16 @@ skins.forEach((skin, i) => {
<div class="split" style="width: 100%; flex-direction: column;">
<div class="split-left" style="width: 80%; box-sizing: border-box; min-height: 0;">
When the widget (or the parent element) enters the viewport, the callback <code>onScreenFunction</code> is invoked.
<br>
<br>
By default, the callback does two things:
<ul>
<li>sets <code>onScreenAtLeastOnce</code> to <code>true</code> when the widget enters the viewport for the first time</li>
<li>if <code>start-when-visible</code> is set, the widget's <code>start</code> method is invoked the first time the widget enters the viewport, and the assets are loaded at that moment.</li>
</ul>
<br>
The assets of the coin below are loaded only when the widget enters the viewport.
<br>
<br>
You can overwrite the <code>onScreenFunction</code> behavior. For example, the raptor below changes its animation every time the widget enters the viewport.
When the widget (or its parent element) enters the viewport, two things happen:<br>
<ul>
<li>the widget's <code>onScreenAtLeastOnce</code> property is set to <code>true</code></li>
<li>the widget's <code>onScreenFunction</code> callback is invoked</li>
</ul>
By default, <code>onScreenFunction</code> invokes the widget's <code>start</code> method if the widget has the <code>start-when-visible</code> attribute set, and this occurs only the first time it enters the viewport.<br>
<br>
The assets of the coin below are loaded only when the widget enters the viewport.<br>
<br>
You can override the <code>onScreenFunction</code> behavior. For example, the raptor below changes its animation every time the widget enters the viewport.
</div>
<div class="skin-grid">
@ -2078,7 +2075,6 @@ skins.forEach((skin, i) => {
<script>
(async () => {
const raptorWidget = await spine.getSpineWidget("coin-with-raptor").whenReady;
let raptorWalking = true;
raptorWidget.onScreenFunction = widget => {
raptorWalking = !raptorWalking;
@ -2097,7 +2093,14 @@ skins.forEach((skin, i) => {
<script>
escapeHTMLandInject(`
<spine-skeleton
identifier="coin"
atlas="/assets/coin-pma.atlas"
skeleton="/assets/coin-pro.skel"
animation="animation"
start-when-visible
></spine-skeleton>
<spine-skeleton
identifier="coin-with-raptor"
atlas="/assets/raptor-pma.atlas"
skeleton="/assets/raptor-pro.skel"
animation="walk"

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

@ -259,6 +259,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
widget.onScreen = isIntersecting;
if (isIntersecting) {
widget.onScreenFunction(widget);
widget.onScreenAtLeastOnce = true;
}
}
}

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

@ -566,16 +566,11 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
/**
* A callback invoked each time the element container enters the screen viewport.
* By default, the callback call the {@link start} method the first time the widget
* enters the screen viewport.
* enters the screen viewport and {@link startWhenVisible} is `true`.
*/
public onScreenFunction: (widget: SpineWebComponentSkeleton) => void = async (widget) => {
if (widget.loading && !widget.onScreenAtLeastOnce) {
widget.onScreenAtLeastOnce = true;
if (widget.manualStart && widget.startWhenVisible) {
widget.start();
}
}
if (widget.loading && !widget.onScreenAtLeastOnce && widget.manualStart && widget.startWhenVisible)
widget.start()
}
/**