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

recalculateBounds and autoRecalculateBounds to calculateBounds and autoCalculateBounds.

Browse Source
This commit is contained in:
Davide Tantillo 2025-04-30 12:45:35 +02:00
parent e5a4bccb69
commit 5bf75239d9
3 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
spine-ts/spine-webgl/example/webcomponent-gui.html
View File

@ -45,7 +45,7 @@
identifier="boi" identifier="boi"
atlas="assets/spineboy-pma.atlas" atlas="assets/spineboy-pma.atlas"
skeleton="assets/spineboy-pro.skel" skeleton="assets/spineboy-pro.skel"
auto-recalculate-bounds auto-calculate-bounds
debug debug
></spine-widget> ></spine-widget>
</div> </div>
@ -98,7 +98,7 @@
padBottom: 0, padBottom: 0,
padTop: 0, padTop: 0,
customBounds: false, customBounds: false,
autoRecalculateBounds: true, autoCalculateBounds: true,
fit: "contain", fit: "contain",
mode: "inside", mode: "inside",
scaleX: 1, scaleX: 1,
@ -296,10 +296,10 @@
const boundsFolder = gui.addFolder( 'Bounds' ); const boundsFolder = gui.addFolder( 'Bounds' );
boundsFolder boundsFolder
.add(myObject, 'autoRecalculateBounds') .add(myObject, 'autoCalculateBounds')
.name( 'auto-recalculate-bounds' ) .name( 'auto-calculate-bounds' )
.onChange(value => { .onChange(value => {
boi.setAttribute("auto-recalculate-bounds", value) boi.setAttribute("auto-calculate-bounds", value)
}); });
boundsFolder boundsFolder

12
spine-ts/spine-webgl/example/webcomponent-tutorial.html
View File

@ -589,7 +589,7 @@
setInterval(() => { setInterval(() => {
const newAnimation = isRoaring ? "walk" : "roar"; const newAnimation = isRoaring ? "walk" : "roar";
state.setAnimation(0, newAnimation, true); state.setAnimation(0, newAnimation, true);
widget.recalculateBounds(); // scale the skeleton based on the new animation widget.calculateBounds(); // scale the skeleton based on the new animation
isRoaring = !isRoaring; isRoaring = !isRoaring;
}, 4000); }, 4000);
})(); })();
@ -616,7 +616,7 @@
setInterval(() => { setInterval(() => {
const newAnimation = isRoaring ? "walk" : "roar"; const newAnimation = isRoaring ? "walk" : "roar";
state.setAnimation(0, newAnimation, true); state.setAnimation(0, newAnimation, true);
widget.recalculateBounds(); // scale the skeleton based on the new animation widget.calculateBounds(); // scale the skeleton based on the new animation
isRoaring = !isRoaring; isRoaring = !isRoaring;
}, 4000); }, 4000);
})(); })();
@ -644,7 +644,7 @@
<div class="split-top split"> <div class="split-top split">
<div class="split-left"> <div class="split-left">
<p>To change animation, we could also just change the animation attribute. The widget will reinitiate itself and change animation.</p> <p>To change animation, we could also just change the animation attribute. The widget will reinitiate itself and change animation.</p>
<p>In this case you would use <code>auto-recalculate-bounds</code> to ask the widget to always recalculate the bounds, as in the top example.</p> <p>In this case you would use <code>auto-calculate-bounds</code> to ask the widget to always recalculate the bounds, as in the top example.</p>
<p>If want to keep the scale consistent, but fit multiple animations in the container, you can use the <code>animation-bounds</code> attribute to define a bounds containing a list of animations, as in the bottom example.</p> <p>If want to keep the scale consistent, but fit multiple animations in the container, you can use the <code>animation-bounds</code> attribute to define a bounds containing a list of animations, as in the bottom example.</p>
</div> </div>
@ -655,7 +655,7 @@
atlas="assets/spineboy-pma.atlas" atlas="assets/spineboy-pma.atlas"
skeleton="assets/spineboy-pro.skel" skeleton="assets/spineboy-pro.skel"
animation="jump" animation="jump"
auto-recalculate-bounds auto-calculate-bounds
></spine-widget> ></spine-widget>
<spine-widget <spine-widget
style="width: 100%; flex: 1; border: 1px solid black; box-sizing: border-box;" style="width: 100%; flex: 1; border: 1px solid black; box-sizing: border-box;"
@ -703,7 +703,7 @@
atlas="assets/spineboy-pma.atlas" atlas="assets/spineboy-pma.atlas"
skeleton="assets/spineboy-pro.skel" skeleton="assets/spineboy-pro.skel"
animation="jump" animation="jump"
auto-recalculate-bounds auto-calculate-bounds
></spine-widget> ></spine-widget>
<spine-widget <spine-widget
style="width: 100%; height: 150px; border: 1px solid black;" style="width: 100%; height: 150px; border: 1px solid black;"
@ -914,7 +914,7 @@
setInterval(() => { setInterval(() => {
const newAnimation = isRoaring ? "walk" : "roar"; const newAnimation = isRoaring ? "walk" : "roar";
state.setAnimation(0, newAnimation, true); state.setAnimation(0, newAnimation, true);
widget.recalculateBounds(); // scale the skeleton based on the new animation widget.calculateBounds(); // scale the skeleton based on the new animation
isRoaring = !isRoaring; isRoaring = !isRoaring;
}, 4000); }, 4000);
})(); })();

16
spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
View File

@ -189,7 +189,7 @@ interface WidgetAttributes {
boundsY: number boundsY: number
boundsWidth: number boundsWidth: number
boundsHeight: number boundsHeight: number
autoRecalculateBounds: boolean autoCalculateBounds: boolean
width: number width: number
height: number height: number
isDraggable: boolean isDraggable: boolean
@ -409,7 +409,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
* If no skin is provided, it is used the default skin. * If no skin is provided, it is used the default skin.
* If no animation is provided, it is used the setup pose. * If no animation is provided, it is used the setup pose.
* Bounds are not automatically recalculated.when the animation or skin change. * Bounds are not automatically recalculated.when the animation or skin change.
* Invoke {@link recalculateBounds} to recalculate them, or set {@link autoRecalculateBounds} to true. * Invoke {@link calculateBounds} to recalculate them, or set {@link autoCalculateBounds} to true.
* Use `setBounds` to set you desired bounds. Bounding Box might be useful to determine the bounds to be used. * Use `setBounds` to set you desired bounds. Bounding Box might be useful to determine the bounds to be used.
* If the skeleton overflow the element container consider setting {@link clip} to `true`. * If the skeleton overflow the element container consider setting {@link clip} to `true`.
*/ */
@ -469,9 +469,9 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
/** /**
* Whether or not the bounds are recalculated when an animation or a skin is changed. `false` by default. * Whether or not the bounds are recalculated when an animation or a skin is changed. `false` by default.
* Connected to `auto-recalculate-bounds` attribute. * Connected to `auto-calculate-bounds` attribute.
*/ */
public autoRecalculateBounds = false; public autoCalculateBounds = false;
/** /**
* Specify a fixed width for the widget. If at least one of `width` and `height` is > 0, * Specify a fixed width for the widget. If at least one of `width` and `height` is > 0,
@ -811,7 +811,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
"bounds-y": { propertyName: "boundsY", type: "number" }, "bounds-y": { propertyName: "boundsY", type: "number" },
"bounds-width": { propertyName: "boundsWidth", type: "number", defaultValue: -1 }, "bounds-width": { propertyName: "boundsWidth", type: "number", defaultValue: -1 },
"bounds-height": { propertyName: "boundsHeight", type: "number", defaultValue: -1 }, "bounds-height": { propertyName: "boundsHeight", type: "number", defaultValue: -1 },
"auto-recalculate-bounds": { propertyName: "autoRecalculateBounds", type: "boolean" }, "auto-calculate-bounds": { propertyName: "autoCalculateBounds", type: "boolean" },
identifier: { propertyName: "identifier", type: "string" }, identifier: { propertyName: "identifier", type: "string" },
debug: { propertyName: "debug", type: "boolean" }, debug: { propertyName: "debug", type: "boolean" },
"manual-start": { propertyName: "manualStart", type: "boolean" }, "manual-start": { propertyName: "manualStart", type: "boolean" },
@ -962,11 +962,11 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
} }
/** /**
* Recalculates and sets the bounds of the current animation on track 0. * Calculates and sets the bounds of the current animation on track 0.
* Useful when animations or skins are set programmatically. * Useful when animations or skins are set programmatically.
* @returns void * @returns void
*/ */
public recalculateBounds (forcedRecalculate = false): void { public calculateBounds (forcedRecalculate = false): void {
const { skeleton, state } = this; const { skeleton, state } = this;
if (!skeleton || !state) return; if (!skeleton || !state) return;
@ -1116,7 +1116,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
} }
} }
if (forceRecalculate || this.autoRecalculateBounds) this.recalculateBounds(forceRecalculate); if (forceRecalculate || this.autoCalculateBounds) this.calculateBounds(forceRecalculate);
} }
private render (): void { private render (): void {