From 2bf85467dc0a6dffc3fa3b0863011b1bf11cd32e Mon Sep 17 00:00:00 2001 From: Davide Tantillo Date: Mon, 5 May 2025 16:13:55 +0200 Subject: [PATCH] Moved some examples in their own pages. --- spine-ts/index.html | 5 +- spine-ts/spine-widget/example/app.html | 690 +++++++++ spine-ts/spine-widget/example/game.html | 332 +++++ spine-ts/spine-widget/example/login.html | 246 ++++ spine-ts/spine-widget/example/tutorial.html | 1276 +---------------- .../src/SpineWebComponentWidget.ts | 13 +- 6 files changed, 1280 insertions(+), 1282 deletions(-) create mode 100644 spine-ts/spine-widget/example/app.html create mode 100644 spine-ts/spine-widget/example/game.html create mode 100644 spine-ts/spine-widget/example/login.html diff --git a/spine-ts/index.html b/spine-ts/index.html index a916bfb64..217a7a58d 100644 --- a/spine-ts/index.html +++ b/spine-ts/index.html @@ -195,8 +195,11 @@
  • Widget (Webcomponent)
    • diff --git a/spine-ts/spine-widget/example/app.html b/spine-ts/spine-widget/example/app.html new file mode 100644 index 000000000..8d73283c9 --- /dev/null +++ b/spine-ts/spine-widget/example/app.html @@ -0,0 +1,690 @@ + + + + + + Webcomponent GUI + + + +
    +
    + +
    + + +
    +
    + +
    + +
    +
    +
    + +
    + + +
    +
    +
    + +
    + + +
    +
    +
    + +
    + + +
    +
    +
    + +
    + + +
    +
    +
    +
    +
    +
    Carrots 0
    +
    Tomatoes 0
    +
    Breads 0
    +
    Mushrooms 0
    +
    +
    + + +
    +
    +
    +
    + + + + + +
    +
    + + + +
    + +
    + +
    +
    + Click on the food to cook it +
    +
    + + +
    +
    + +
    +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    +
    + +
    + +
    + + + + +
    +
    + + + +
    + +
    +
    +
    + +
    +
    + +
    +
    + Help the box to reach the destination by clicking the button above! +
    +
    + + +
    +
    + +
    + +
    + + + +
    +
    + + + +
    + +
    +
    +
    + Congratulation! You food has just been delivered! +
    +
    + +
    +
    + +
    + +
    + + +
    +
    +
    + + + + + \ No newline at end of file diff --git a/spine-ts/spine-widget/example/game.html b/spine-ts/spine-widget/example/game.html new file mode 100644 index 000000000..b30dd488f --- /dev/null +++ b/spine-ts/spine-widget/example/game.html @@ -0,0 +1,332 @@ + + + + + + Webcomponent GUI + + + + +
    + +
    +
    + +
    + + +
    + + +
    +
    + +
    + +
    +
    +
    + Use WASD to move around! +
    + +
    +
    +
    Save the flowers from the white pest by shooting them
    +
    + +
    +
    +
    Go to the red colored rooster of bush when ammo is low
    +
    + +
    +
    +
    Reach level 10 to win the game
    +
    + +
    +
    + +
    + +
    + + + + + \ No newline at end of file diff --git a/spine-ts/spine-widget/example/login.html b/spine-ts/spine-widget/example/login.html new file mode 100644 index 000000000..3e9eaddd0 --- /dev/null +++ b/spine-ts/spine-widget/example/login.html @@ -0,0 +1,246 @@ + + + + + + Webcomponent GUI + + + + +
    + + +
    +
    +
    + +
    +
    + +
    + +
    +
    + +
    +
    + +
    + +
    Password is password
    + +
    + + +
    + +
    +
    + +
    + A login UI made using the chibi stickers and a button made using +

    + The chibi sticker does the following: +

      +
    • It looks at the cursor when no input field is selected
      • +
    • Look at the caret when username input field is selected
      • +
    • Cover its eyes when password input field is selected
      • +
    • React in two different ways depending on the password
      • +
    +

    + +

    + The button does the following: +

      +
    • Starts some animation when cursor enters, leaves, stays, or click the button
      • +
    • Appends a div containing the LOGIN text to a slot
      • +
    • Submits the form on click
      • +
    +

    +
    +
    + + + + + \ No newline at end of file diff --git a/spine-ts/spine-widget/example/tutorial.html b/spine-ts/spine-widget/example/tutorial.html index 3157c0224..1506d297f 100644 --- a/spine-ts/spine-widget/example/tutorial.html +++ b/spine-ts/spine-widget/example/tutorial.html @@ -2360,7 +2360,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => { const [tank, tank2] = await Promise.all([ spine.getSpineWidget("tank").whenReady, spine.getSpineWidget("tank2").whenReady]); - tank.beforeUpdateWorldTransforms = (skeleton, state) => { + tank.beforeUpdateWorldTransforms = (delta, skeleton, state) => { if (!tank.onScreen) return; tank.skeleton.scaleX = tank2.skeleton.scaleX; tank.skeleton.scaleY = tank2.skeleton.scaleY; @@ -2399,7 +2399,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => { const [tank, tank2] = await Promise.all([ spine.getSpineWidget("tank").whenReady, spine.getSpineWidget("tank2").whenReady]); -tank.beforeUpdateWorldTransforms = (skeleton, state) => { +tank.beforeUpdateWorldTransforms = (delta, skeleton, state) => { if (!tank.onScreen) return; tank.skeleton.scaleX = tank2.skeleton.scaleX; tank.skeleton.scaleY = tank2.skeleton.scaleY; @@ -3415,1278 +3415,6 @@ const darkPicker = document.getElementById("dark-picker"); /////// --> - - -
    - -
    - A login UI made using the chibi stickers and a button made using Spine. -

    - The chibi sticker does the following: -

      -
    • It looks at the cursor when no input field is selected
      • -
    • Look at the caret when username input field is selected
      • -
    • Cover its eyes when password input field is selected
      • -
    • React in two different ways depending on the password
      • -
    -

    - -

    - The button does the following: -

      -
    • Starts some animation when cursor enters, leaves, stays, or click the button
      • -
    • Appends a div containing the LOGIN text to a slot
      • -
    • Submits the form on click
      • -
    -

    -
    - - - - -
    -
    -
    - -
    -
    - -
    - -
    -
    - -
    -
    - -
    - -
    Password is password
    - -
    - - -
    - -
    -
    - - - - - - - - -
    - 
    
-                
-
    -
    - -
    - - - - - - - - -
    - - - - -
    -
    - - - -
    - - -
    -
    - -
    - -
    -
    -
    - -
    - - -
    -
    -
    - -
    - - -
    -
    -
    - -
    - - -
    -
    -
    - -
    - - -
    -
    -
    -
    -
    -
    Carrots 0
    -
    Tomatoes 0
    -
    Breads 0
    -
    Mushrooms 0
    -
    -
    - - -
    -
    -
    -
    - - - - - -
    -
    - - - -
    - -
    - -
    -
    - Click on the food to cook it -
    -
    - - -
    -
    - -
    -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    -
    - -
    - -
    - - - - -
    -
    - - - -
    - -
    -
    -
    - -
    -
    - -
    -
    - Help the box to reach the destination by clicking the button above! -
    -
    - - -
    -
    - -
    - -
    - - - -
    -
    - - - -
    - -
    -
    -
    - Congratulation! You food has just been delivered! -
    -
    - -
    -
    - -
    - -
    - - -
    -
    -
    - - - - - - -
    - 
    
-            
-
    -
    - -
    - - - - - - - - -
    - -
    -
    - -
    - - -
    - - -
    -
    - -
    -
    -
    -
    - Use WASD to move around! -
    - -
    -
    -
    Save the flowers from the white pest by shooting them
    -
    - -
    -
    -
    Go to the red colored rooster of bush when ammo is low
    -
    - -
    -
    -
    Reach level 10 to win the game
    -
    - -
    -
    -
    - - - - -
    - 
    
-                
-
    -
    -
    - - - diff --git a/spine-ts/spine-widget/src/SpineWebComponentWidget.ts b/spine-ts/spine-widget/src/SpineWebComponentWidget.ts index 42c4613bb..7dff71fbf 100644 --- a/spine-ts/spine-widget/src/SpineWebComponentWidget.ts +++ b/spine-ts/spine-widget/src/SpineWebComponentWidget.ts @@ -68,7 +68,6 @@ interface Rectangle extends Point { height: number, } -type BeforeAfterUpdateSpineWidgetFunction = (skeleton: Skeleton, state: AnimationState) => void; type UpdateSpineWidgetFunction = (delta: number, skeleton: Skeleton, state: AnimationState) => void; export type OffScreenUpdateBehaviourType = "pause" | "update" | "pose"; @@ -207,8 +206,8 @@ interface WidgetAttributes { // The methods user can override to have custom behaviour interface WidgetOverridableMethods { update?: UpdateSpineWidgetFunction; - beforeUpdateWorldTransforms: BeforeAfterUpdateSpineWidgetFunction; - afterUpdateWorldTransforms: BeforeAfterUpdateSpineWidgetFunction; + beforeUpdateWorldTransforms: UpdateSpineWidgetFunction; + afterUpdateWorldTransforms: UpdateSpineWidgetFunction; onScreenFunction: (widget: SpineWebComponentWidget) => void } @@ -657,12 +656,12 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable, /** * This callback is invoked before the world transforms are computed allows to execute additional logic. */ - public beforeUpdateWorldTransforms: BeforeAfterUpdateSpineWidgetFunction = () => { }; + public beforeUpdateWorldTransforms: UpdateSpineWidgetFunction = () => { }; /** * This callback is invoked after the world transforms are computed allows to execute additional logic. */ - public afterUpdateWorldTransforms: BeforeAfterUpdateSpineWidgetFunction = () => { }; + public afterUpdateWorldTransforms: UpdateSpineWidgetFunction = () => { }; /** * A callback invoked each time the element container enters the screen viewport. @@ -1801,9 +1800,9 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes, if (onScreen || (!onScreen && offScreenUpdateBehaviour === "pose")) { state.apply(skeleton); - beforeUpdateWorldTransforms(skeleton, state); + beforeUpdateWorldTransforms(delta, skeleton, state); skeleton.updateWorldTransform(Physics.update); - afterUpdateWorldTransforms(skeleton, state); + afterUpdateWorldTransforms(delta, skeleton, state); } } }