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

[ts][webcomponents] get/createSpineWidget to get/createSkeleton.

Browse Source
This commit is contained in:
Davide Tantillo 2025-05-21 17:09:41 +02:00
parent a5e737364c
commit f5da0c6f8f
7 changed files with 65 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
spine-ts/spine-webcomponents/example/app.html
View File

@ -411,7 +411,7 @@
(async () => {
/* SECTION 1 */
const widget1 = await spine.getSpineWidget("list").whenReady;
const widget1 = await spine.getSkeleton("list").whenReady;
const setInteractionSectionOne = (itemName, trackNumber) => {
const divName = `${itemName}Div`;
@ -501,7 +501,7 @@
/* SECTION 2 */
const btnNext2 = document.getElementById("btn-next-2");
const widget2 = await spine.getSpineWidget("pan").whenReady;
const widget2 = await spine.getSkeleton("pan").whenReady;
const foodPiece1 = widget2.skeleton.findSlot(`food-piece-1`);
const foodPiece2 = widget2.skeleton.findSlot(`food-piece-2`);
const foodPiece3 = widget2.skeleton.findSlot(`food-piece-3`);
@ -561,7 +561,7 @@
/* SECTION 2 */
/* SECTION 3 */
const widget3 = await spine.getSpineWidget("delivery").whenReady;
const widget3 = await spine.getSkeleton("delivery").whenReady;
const btnNext3 = document.getElementById("btn-next-3");
const box = widget3.skeleton.findSlot("box");
@ -610,7 +610,7 @@
/* SECTION 4 */
const widget4 = await spine.getSpineWidget("ready").whenReady;
const widget4 = await spine.getSkeleton("ready").whenReady;
const slot4Bread = widget4.skeleton.findSlot("salad");
widget4.addPointerSlotEventCallback(slot4Bread, (slot, event) => {

4
spine-ts/spine-webcomponents/example/game.html
View File

@ -94,8 +94,8 @@
const containerGame = document.getElementById("container-game");
(async () => {
const spineboy = spine.getSpineWidget("spineboy-game");
const windmill = spine.getSpineWidget("windmill-game");
const spineboy = spine.getSkeleton("spineboy-game");
const windmill = spine.getSkeleton("windmill-game");
await Promise.all([spineboy.whenReady, windmill.whenReady]);
spineboy.state.setAnimation(2, "aim", true);

2
spine-ts/spine-webcomponents/example/gui.html
View File

@ -57,7 +57,7 @@
<script>
(async () => {
const boi = await spine.getSpineWidget("boi").whenReady;
const boi = await spine.getSkeleton("boi").whenReady;
const animations = boi.skeleton.data.animations.map(({ name }) => name);
animations.push("none");

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

@ -88,7 +88,7 @@
</div>
<script type="module">
import { getSpineWidget, MixBlend } from '../dist/esm/spine-webcomponents.mjs';
import { getSkeleton, MixBlend } from '../dist/esm/spine-webcomponents.mjs';
const mouseX = Smooth(0, 200);
const mouseY = Smooth(0, 200);
@ -96,7 +96,7 @@
(async () => {
const form = document.getElementById('loginForm');
const widgetButton = getSpineWidget("button-login");
const widgetButton = getSkeleton("button-login");
await widgetButton.whenReady;
widgetButton.skeleton.color.set(.85, .85, .85, 1);
@ -134,7 +134,7 @@
widgetButton.followSlot("CLICK ME", divText, { followScale: false });
const widget = getSpineWidget("spineboy-login");
const widget = getSkeleton("spineboy-login");
await widget.whenReady;
// default settings

4
spine-ts/spine-webcomponents/example/team.html
View File

@ -23,7 +23,7 @@
</div>
<script type="module">
import { createSpineWidget } from '../dist/esm/spine-webcomponents.mjs';
import { createSkeleton } from '../dist/esm/spine-webcomponents.mjs';
const container = document.getElementById("team-container");
@ -69,7 +69,7 @@
div2.style.height = "150px";
div2.style.border = "4px solid #333";
const widget = createSpineWidget({
const widget = createSkeleton({
identifier: member.skin,
atlasPath: "/assets/chibi-stickers-pma.atlas",
skeletonPath: "/assets/chibi-stickers.json",

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

@ -564,7 +564,7 @@
<div class="split-top split">
<div class="split-left">
Assign an <code>identifier</code> to your widget to retrieve it using the <code>spine.getSpineWidget</code> function.
Assign an <code>identifier</code> to your widget to retrieve it using the <code>spine.getSkeleton</code> function.
You can easily access the <code>Skeleton</code> and <code>AnimationState</code> of your character, and use them as if you were working with <code>spine-webgl</code>.
<br>
<br>
@ -582,7 +582,7 @@
<script>
(async () => {
const widget = await spine.getSpineWidget("raptor").whenReady;
const widget = await spine.getSkeleton("raptor").whenReady;
let isRoaring = false;
setInterval(() => {
const newAnimation = isRoaring ? "walk" : "roar";
@ -608,7 +608,7 @@
// using js, access the skeleton and the state asynchronously
(async () => {
const widget = await spine.getSpineWidget("raptor").whenReady;
const widget = await spine.getSkeleton("raptor").whenReady;
let isRoaring = false;
setInterval(() => {
const newAnimation = isRoaring ? "walk" : "roar";
@ -667,7 +667,7 @@
<script>
(async () => {
{
const widget = await spine.getSpineWidget("spineboy-change-animation").whenReady;
const widget = await spine.getSkeleton("spineboy-change-animation").whenReady;
let toogleAnimation = false;
setInterval(() => {
const newAnimation = toogleAnimation ? "jump" : "death";
@ -677,7 +677,7 @@
}
{
const widget = await spine.getSpineWidget("spineboy-change-animation2").whenReady;
const widget = await spine.getSkeleton("spineboy-change-animation2").whenReady;
let toogleAnimation = false;
setInterval(() => {
const newAnimation = toogleAnimation ? "jump" : "death";
@ -713,7 +713,7 @@
// using js, access the skeleton and the state asynchronously
{
const widget = await spine.getSpineWidget("spineboy-change-animation").whenReady;
const widget = await spine.getSkeleton("spineboy-change-animation").whenReady;
let toogleAnimation = false;
setInterval(() => {
const newAnimation = toogleAnimation ? "jump" : "death";
@ -723,7 +723,7 @@
}
{
const widget = await spine.getSpineWidget("spineboy-change-animation2").whenReady;
const widget = await spine.getSkeleton("spineboy-change-animation2").whenReady;
let toogleAnimation = false;
setInterval(() => {
const newAnimation = toogleAnimation ? "jump" : "death";
@ -872,7 +872,7 @@
<script>
async function updateCelesteAnimations() {
const celesteAnimations = await spine.getSpineWidget("celeste-animations").whenReady;
const celesteAnimations = await spine.getSkeleton("celeste-animations").whenReady;
var celesteAnimationsTextArea = document.getElementById("celeste-animations-text-area");
celesteAnimations.setAttribute("animations", celesteAnimationsTextArea.value)
}
@ -924,7 +924,7 @@
...
async function updateCelesteAnimations() {
const celesteAnimations = await spine.getSpineWidget("celeste-animations").whenReady;
const celesteAnimations = await spine.getSkeleton("celeste-animations").whenReady;
var celesteAnimationsTextArea = document.getElementById("celeste-animations-text-area");
celesteAnimations.setAttribute("animations", celesteAnimationsTextArea.value)
}`);</script>
@ -1006,7 +1006,7 @@ async function updateCelesteAnimations() {
<script>
(async () => {
const widget = await spine.getSpineWidget("sack-debug").whenReady;
const widget = await spine.getSkeleton("sack-debug").whenReady;
widget.skeleton.getRootBone().x += 50;
})();
</script>
@ -1025,7 +1025,7 @@ async function updateCelesteAnimations() {
></spine-skeleton>
...
(async () => {
const widget = await spine.getSpineWidget("sack-debug").whenReady;
const widget = await spine.getSkeleton("sack-debug").whenReady;
widget.skeleton.getRootBone().x += 50;
})();`
);</script>
@ -1352,7 +1352,7 @@ function removeDiv() {
</div>
<script>
const widget = spine.getSpineWidget("widget-loading");
const widget = spine.getSkeleton("widget-loading");
async function reloadWidget(element) {
element.disabled = true;
await widget.whenReady;
@ -1384,7 +1384,7 @@ function removeDiv() {
...
const widget = spine.getSpineWidget("widget-loading");
const widget = spine.getSkeleton("widget-loading");
async function reloadWidget(element) {
element.disabled = true;
await widget.whenReady;
@ -1926,7 +1926,7 @@ function toggleSpinner(element) {
Create two arrays, one for the skins and the other for the animations, and loop through them.
<br>
<br>
<code>spine.createSpineWidget</code> allows you to create a Spine widget.
<code>spine.createSkeleton</code> allows you to create a Spine widget.
<br>
<br>
By default, assets are loaded immediately. You can delay this by setting <code>manual-start="false"</code>.
@ -1952,7 +1952,7 @@ function toggleSpinner(element) {
grid.appendChild(gridElement);
// create the widget
const widgetSection = spine.createSpineWidget({
const widgetSection = spine.createSkeleton({
atlasPath: "/assets/chibi-stickers-pma.atlas",
skeletonPath: "/assets/chibi-stickers.json",
animation,
@ -2000,7 +2000,7 @@ skins.forEach((skin, i) => {
grid.appendChild(gridElement);
// create the widget
const widgetSection = spine.createSpineWidget({
const widgetSection = spine.createSkeleton({
atlasPath: "/assets/chibi-stickers-pma.atlas",
skeletonPath: "/assets/chibi-stickers.json",
animation,
@ -2075,7 +2075,7 @@ skins.forEach((skin, i) => {
<script>
(async () => {
const raptorWidget = await spine.getSpineWidget("coin-with-raptor").whenReady;
const raptorWidget = await spine.getSkeleton("coin-with-raptor").whenReady;
let raptorWalking = true;
raptorWidget.onScreenFunction = widget => {
raptorWalking = !raptorWalking;
@ -2109,7 +2109,7 @@ skins.forEach((skin, i) => {
...
const raptorWidget = await spine.getSpineWidget("coin-with-raptor").whenReady;
const raptorWidget = await spine.getSkeleton("coin-with-raptor").whenReady;
let raptorWalking = true;
raptorWidget.onScreenFunction = widget => {
raptorWalking = !raptorWalking;
@ -2168,7 +2168,7 @@ raptorWidget.onScreenFunction = widget => {
</div>
<script>
const dragon = spine.getSpineWidget("dragon");
const dragon = spine.getSkeleton("dragon");
function loadPageDragon(pageIndex) {
if (!dragon.pages) {
dragon.pages = [];
@ -2200,7 +2200,7 @@ raptorWidget.onScreenFunction = widget => {
...
const dragon = spine.getSpineWidget("dragon");
const dragon = spine.getSkeleton("dragon");
function loadPageDragon(pageIndex) {
if (!dragon.pages) {
dragon.pages = [];
@ -2265,7 +2265,7 @@ function loadPageDragon(pageIndex) {
</div>
<script>
const stretchyman = spine.getSpineWidget("stretchyman");
const stretchyman = spine.getSkeleton("stretchyman");
stretchyman.update = (delta, skeleton, state) => {
// skin logiv if widget is off screen
if (!stretchyman.onScreen) return;
@ -2301,7 +2301,7 @@ function loadPageDragon(pageIndex) {
...
const stretchyman = spine.getSpineWidget("stretchyman");
const stretchyman = spine.getSkeleton("stretchyman");
stretchyman.update = (canvas, delta, skeleton, state) => {
// skin logiv if widget is off screen
if (!stretchyman.onScreen) return;
@ -2363,7 +2363,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
<script>
(async () => {
const [tank, tank2] = await Promise.all([
spine.getSpineWidget("tank").whenReady, spine.getSpineWidget("tank2").whenReady]);
spine.getSkeleton("tank").whenReady, spine.getSkeleton("tank2").whenReady]);
tank.beforeUpdateWorldTransforms = (delta, skeleton, state) => {
if (!tank.onScreen) return;
@ -2402,7 +2402,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
...
const [tank, tank2] = await Promise.all([
spine.getSpineWidget("tank").whenReady, spine.getSpineWidget("tank2").whenReady]);
spine.getSkeleton("tank").whenReady, spine.getSkeleton("tank2").whenReady]);
tank.beforeUpdateWorldTransforms = (delta, skeleton, state) => {
if (!tank.onScreen) return;
@ -2485,7 +2485,7 @@ tank.beforeUpdateWorldTransforms = (delta, skeleton, state) => {
<script>
(async () => {
const celeste = spine.getSpineWidget("celeste");
const celeste = spine.getSkeleton("celeste");
await celeste.whenReady;
celeste.state.setAnimation(0, "swing", true);
})();
@ -2554,7 +2554,7 @@ tank.beforeUpdateWorldTransforms = (delta, skeleton, state) => {
...
(async () => {
const celeste = spine.getSpineWidget("celeste");
const celeste = spine.getSkeleton("celeste");
await celeste.whenReady;
celeste.state.setAnimation(0, "swing", true);
})();`);
@ -3179,7 +3179,7 @@ const colorPicker = document.getElementById("color-picker");
const darkPicker = document.getElementById("dark-picker");
[0, 1].forEach(async (i) => {
const widget = await spine.getSpineWidget(`interactive${i}`).whenReady;
const widget = await spine.getSkeleton(`interactive${i}`).whenReady;
widget.pointerEventCallback = (event) => {
if (event === "enter") widget.state.setAnimation(0, "emotes/hooray", true).mixDuration = .15;
@ -3222,7 +3222,7 @@ const darkPicker = document.getElementById("dark-picker");
></spine-skeleton>
[0, 1].forEach(async (i) => {
const widget = await spine.getSpineWidget(\`interactive\${i}\`).whenReady;
const widget = await spine.getSkeleton(\`interactive\${i}\`).whenReady;
widget.pointerEventCallback = (event) => {
if (event === "enter") widget.state.setAnimation(0, "emotes/hooray", true).mixDuration = .15;
@ -3298,7 +3298,7 @@ const darkPicker = document.getElementById("dark-picker");
<script>
(async () => {
const widget = await spine.getSpineWidget("potty").whenReady;
const widget = await spine.getSkeleton("potty").whenReady;
widget.followSlot("rain/rain-color", document.getElementById("rain/rain-color"), { followVisibility: 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"), { followVisibility: false, hideAttachment: true });
@ -3325,7 +3325,7 @@ const darkPicker = document.getElementById("dark-picker");
...
(async () => {
const widget = await spine.getSpineWidget("potty").whenReady;
const widget = await spine.getSkeleton("potty").whenReady;
widget.followSlot("rain/rain-color", document.getElementById("rain/rain-color"), { followVisibility: 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"), { followVisibility: false, hideAttachment: true });
@ -3372,11 +3372,11 @@ const darkPicker = document.getElementById("dark-picker");
<script>
(async () => {
const widget = await spine.getSpineWidget("potty2").whenReady;
widget.followSlot("rain/rain-color", spine.getSpineWidget("potty2-1"), { followVisibility: 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"), { followVisibility: false, hideAttachment: true });
widget.followSlot("rain/rain-green", spine.getSpineWidget("potty2-4"), { followVisibility: false, hideAttachment: true });
const widget = await spine.getSkeleton("potty2").whenReady;
widget.followSlot("rain/rain-color", spine.getSkeleton("potty2-1"), { followVisibility: false, hideAttachment: true });
widget.followSlot("rain/rain-white", spine.getSkeleton("potty2-2"), { followVisibility: false, hideAttachment: true });
widget.followSlot("rain/rain-blue", spine.getSkeleton("potty2-3"), { followVisibility: false, hideAttachment: true });
widget.followSlot("rain/rain-green", spine.getSkeleton("potty2-4"), { followVisibility: false, hideAttachment: true });
})();
</script>
@ -3400,11 +3400,11 @@ const darkPicker = document.getElementById("dark-picker");
...
(async () => {
const widget = await spine.getSpineWidget("potty2").whenReady;
widget.followSlot("rain/rain-color", spine.getSpineWidget("potty2-1"), { followVisibility: 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"), { followVisibility: false, hideAttachment: true });
widget.followSlot("rain/rain-green", spine.getSpineWidget("potty2-4"), { followVisibility: false, hideAttachment: true });
const widget = await spine.getSkeleton("potty2").whenReady;
widget.followSlot("rain/rain-color", spine.getSkeleton("potty2-1"), { followVisibility: false, hideAttachment: true });
widget.followSlot("rain/rain-white", spine.getSkeleton("potty2-2"), { followVisibility: false, hideAttachment: true });
widget.followSlot("rain/rain-blue", spine.getSkeleton("potty2-3"), { followVisibility: false, hideAttachment: true });
widget.followSlot("rain/rain-green", spine.getSkeleton("potty2-4"), { followVisibility: false, hideAttachment: true });
})();`);</script>
</code></pre>
</div>

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

@ -475,7 +475,7 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
public debug = false;
/**
* An identifier to obtain this widget using the {@link getSpineWidget} function.
* An identifier to obtain this widget using the {@link getSkeleton} function.
* This is useful when you need to interact with the widget using js.
* Connected to `identifier` attribute.
*/
@ -1325,11 +1325,21 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
customElements.define("spine-skeleton", SpineWebComponentSkeleton);
export function getSpineWidget (identifier: string): SpineWebComponentSkeleton {
/**
* Return the first {@link SpineWebComponentSkeleton} with the given {@link SpineWebComponentSkeleton.identifier}
* @param identifier The {@link SpineWebComponentSkeleton.identifier} to search on the DOM
* @returns A skeleton web component instance with the given identifier
*/
export function getSkeleton (identifier: string): SpineWebComponentSkeleton {
return document.querySelector(`spine-skeleton[identifier=${identifier}]`) as SpineWebComponentSkeleton;
}
export function createSpineWidget (parameters: WidgetAttributes): SpineWebComponentSkeleton {
/**
* Create a {@link SpineWebComponentSkeleton} with the given {@link WidgetAttributes}.
* @param parameters The options to pass to the {@link SpineWebComponentSkeleton}
* @returns The skeleton web component instance created
*/
export function createSkeleton (parameters: WidgetAttributes): SpineWebComponentSkeleton {
const widget = document.createElement("spine-skeleton") as SpineWebComponentSkeleton;
Object.entries(SpineWebComponentSkeleton.attributesDescription).forEach(entry => {