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" style="width: 100%; flex-direction: column;">
<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;">
When the widget (or the parent element) enters the viewport, the callback <code>onScreenFunction</code> is invoked. When the widget (or its parent element) enters the viewport, two things happen:<br>
<br> <ul>
<br> <li>the widget's <code>onScreenAtLeastOnce</code> property is set to <code>true</code></li>
By default, the callback does two things: <li>the widget's <code>onScreenFunction</code> callback is invoked</li>
<ul> </ul>
<li>sets <code>onScreenAtLeastOnce</code> to <code>true</code> when the widget enters the viewport for the first time</li> 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>
<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> <br>
</ul> The assets of the coin below are loaded only when the widget enters the viewport.<br>
<br> <br>
The assets of the coin below are loaded only when the widget enters the viewport. You can override the <code>onScreenFunction</code> behavior. For example, the raptor below changes its animation every time 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.
</div> </div>
<div class="skin-grid"> <div class="skin-grid">
@ -2078,7 +2075,6 @@ skins.forEach((skin, i) => {
<script> <script>
(async () => { (async () => {
const raptorWidget = await spine.getSpineWidget("coin-with-raptor").whenReady; const raptorWidget = await spine.getSpineWidget("coin-with-raptor").whenReady;
let raptorWalking = true; let raptorWalking = true;
raptorWidget.onScreenFunction = widget => { raptorWidget.onScreenFunction = widget => {
raptorWalking = !raptorWalking; raptorWalking = !raptorWalking;
@ -2097,7 +2093,14 @@ skins.forEach((skin, i) => {
<script> <script>
escapeHTMLandInject(` escapeHTMLandInject(`
<spine-skeleton <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" atlas="/assets/raptor-pma.atlas"
skeleton="/assets/raptor-pro.skel" skeleton="/assets/raptor-pro.skel"
animation="walk" 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; widget.onScreen = isIntersecting;
if (isIntersecting) { if (isIntersecting) {
widget.onScreenFunction(widget); 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. * 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 * 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) => { public onScreenFunction: (widget: SpineWebComponentSkeleton) => void = async (widget) => {
if (widget.loading && !widget.onScreenAtLeastOnce) { if (widget.loading && !widget.onScreenAtLeastOnce && widget.manualStart && widget.startWhenVisible)
widget.onScreenAtLeastOnce = true; widget.start()
if (widget.manualStart && widget.startWhenVisible) {
widget.start();
}
}
} }
/** /**