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] skin accepts a list of skins.

Browse Source
This commit is contained in:
Davide Tantillo 2025-05-20 15:35:31 +02:00
parent 23b288edc8
commit 2b5f3751ad
2 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -370,7 +370,7 @@
atlas="/assets/vine-pma.atlas"
skeleton="/assets/vine-pro.skel"
animation="grow"
mode="origin"
fit="origin"
scale=".5"
y-axis="-.5"
></spine-skeleton>
@ -385,7 +385,7 @@
atlas="/assets/vine-pma.atlas"
skeleton="/assets/vine-pro.skel"
animation="grow"
mode="origin"
fit="origin"
scale=".5"
y-axis="-.5"
></spine-skeleton>
@ -1422,6 +1422,8 @@ function toggleSpinner(element) {
<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.
<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.
</div>
<div class="skin-grid">

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

@ -49,6 +49,7 @@ import {
RegionAttachment,
MeshAttachment,
Bone,
Skin,
} from "@esotericsoftware/spine-webgl";
import { AttributeTypes, castValue, isBase64, Rectangle } from "./wcUtils.js";
import { SpineWebComponentOverlay } from "./SpineWebComponentOverlay.js";
@ -76,7 +77,7 @@ interface WidgetAttributes {
animation?: string
animations?: AnimationsInfo
defaultMix?: number
skin?: string
skin?: string[]
fit: FitType
xAxis: number
yAxis: number
@ -219,14 +220,14 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
* Optional: The name of the skin to be set
* Connected to `skin` attribute.
*/
public get skin (): string | undefined {
public get skin (): string[] | undefined {
return this._skin;
}
public set skin (value: string | undefined) {
public set skin (value: string[] | undefined) {
this._skin = value;
this.initWidget();
}
private _skin?: string
private _skin?: string[]
/**
* Specify the way the skeleton is sized within the element automatically changing its `scaleX` and `scaleY`.
@ -695,7 +696,7 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
animations: { propertyName: "animations", type: "animationsInfo", defaultValue: undefined },
"animation-bounds": { propertyName: "animationsBound", type: "array-string", defaultValue: undefined },
"default-mix": { propertyName: "defaultMix", type: "number", defaultValue: 0 },
skin: { propertyName: "skin", type: "string" },
skin: { propertyName: "skin", type: "array-string" },
width: { propertyName: "width", type: "number", defaultValue: -1 },
height: { propertyName: "height", type: "number", defaultValue: -1 },
isdraggable: { propertyName: "isDraggable", type: "boolean" },
@ -997,18 +998,28 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
// skeleton.scaleX = this.dprScale;
// skeleton.scaleY = this.dprScale;
this.loading = false;
// the bounds are calculated the first time, if no custom bound is provided
this.initWidget(this.bounds.width <= 0 || this.bounds.height <= 0);
this.loading = false;
return this;
}
private initWidget (forceRecalculate = false) {
if (this.loading) return;
const { skeleton, state, animation, animations: animationsInfo, skin, defaultMix } = this;
if (skin) {
skeleton?.setSkinByName(skin);
if (skin.length === 1) {
skeleton?.setSkinByName(skin[0]);
} else {
const customSkin = new Skin("custom");
for (const s of skin) customSkin.addSkin(skeleton?.data.findSkin(s) as Skin);
skeleton?.setSkin(customSkin);
}
skeleton?.setSlotsToSetupPose();
}